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

type ComponentName struct {
  vecty.Core
  Bold bool `vecty:"prop"`
  ...
  Markup   vecty.MarkupList      `vecty:"prop"`
  Children vecty.ComponentOrHTML `vecty:"prop"`
}

func (c *ComponentName) Render() vecty.ComponentOrHTML {
  return vecty.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