This documentation refers to a Gravstrap obsolete release. Please consider to upgrade to the new release

The Gravstrap Splitbutton component handles the Bootstrap splitbutton component.

The splitbutton component is defined by the following Yaml code:

gravstrap:
    splitbutton:
        # Add as many splitbuttons as you need
        splitbutton1:
            label: Cool
            type: warning
            attributes:
                aria-haspopup: "true"
                aria-expanded: "true"
                # class: btn-lg
            items:             
                item0:
                    type: header
                    caption: Dropdown header
                item1:
                    type: link
                    url: #
                    menu: Page1 
                    # attributes:
                    #    class: something-cool           
                item2:
                    type: link
                    disabled: true
                    url: "#"
                    menu: Page2              
                item3:
                    type: divider
                item4:
                    type: link
                    url: "#"
                    menu: Page3  

This code must be added to the page where you need to display the component.

label property

The label mandatory property defines the splitbutton label.

type property [optional]

The type optional property defines the splitbutton type. You can choose one from the following accepted values: default, primary, danger, success, info, warning. Default is the default value for this component.

attributes property [optional]

The attributes property defines an array of html tags you can add to the splitbutton component.

items property

The items property is an array which defines the elements displayed in the splitbutton component.

item's type property

The type mandatory property defines the item type. You can choose one from the following accepted values: link, header, divider.

item's url property [optional]

The url optional property defines the url connected with the item. This property is used only when the link type is selected.

item's menu property [optional]

The menu optional property defines the menu label for the item. This property is used only when the link type is selected.

item's attributes property [optional]

The attributes property defines an array of html tags you can add to the item.

item's caption property [optional]

The caption property defines the caption for the header type.

Render the splitbutton component

Add the following code to the template where you need to render the splitbutton component:

{{ gravstrap.splitbutton1 }}

Next Post Previous Post