Bootstrap4 components for Vecty
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
alert.go
badge.go
button.go
cards.go
carousel.go
collapse.go
const.go
dropdown.go
forms.go
groups.go
jumbotron.go
listgroup.go
modal.go
navbar.go
navs.go
pagination.go
progress.go
styles.go

README.md

Bootstrap4 components for Vecty

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