Bootstrap4 components for Vecty

• Depends
  • GopherJS
  • Vecty
  • bootstrap4

Policy

• Support:
  • Primitive tag only.
  • Custom markup attributes for each tag.
  • Custom child components or hml for each tag.

Component definition pattern

typeComponentNamestruct {
vecty.CoreBoldbool`vecty:"prop"`...Markup vecty.MarkupList`vecty:"prop"`Children vecty.ComponentOrHTML`vecty:"prop"`
}
func (c*ComponentName) Render() vecty.ComponentOrHTML {
returnvecty.Tag(elementName,
vecty.Markup(
vecty.ClassMap{
"bold": c.Bold,
}
...
),
c.Markup,
c.Children,
)
}

Usage

Basic

&ComponentName{
Bold: true,
Markup:vecty.Markup(vecty.Attribute("id","name")),
Children: vecty.Text("name"),
}

Multiple Child

&ComponentName{
Bold: true,
Markup:vecty.Markup(vecty.Attribute("id","name")),
Children: vecty.List(
vecty.Text("bra..bra.."),
elem.Span(vecty.Text("memo")),
),
}

Nested Component

&ComponentName1{
Bold: true,
Markup:vecty.Markup(vecty.Attribute("id","name")),
Children: &ComponentName2{
...
},
}

Event Handling

logging and original behavier

&ComponentName{
Href: "#/",
Markup: vecty.Markup(event.Click(func(event*vecty.Event) {
log.Println("click: link")
})),
Children: vecty.Text("link"),
},

logging only

&ComponentName{
Href: "#/",
Markup: vecty.Markup(event.Click(func(event*vecty.Event) {
log.Println("click: link")
}).PreventDefault()),
Children: vecty.Text("link"),
},

TODO

Supported Coponents

• Alerts
• Badge
• Breadcrumb
• Buttons
• Button group
• Card
• Carousel
• Collapse
• Dropdowns
• Forms
• Input group
• Jumbotron
• List group
• Modal
• Navs
• Navbar
• Pagination
• Popovers
• Progress
• Scrollspy
• Tooltips