UIButtonList

Creates a List with Buttons that accept any kind of text button types.

Since: 7.0.0

Name	Type	Default	Description
listValues	Array.<object>		Required - The values that will be mapped in the list
listValues.label	string		Required - The label that will be listed on each button.
listValues.value	string		Required - The value that will be listed with each button.
listValues.tooltipText	string		This text is visible on each tooltip.
listValues.icon	string		Optional if there is an icon on each of the buttons that are listed, see UIButton for instruction.
listValues.selected	boolean	false	Selected state or not for each button in the list.
type	string	"primary"	Type of buttonlist look. See UIButton for variations.
size	string	"normal"	Size of buttonlist. See UIButton for variations.
width	string	"full"	Width of buttonlist. Variants: block|full. This is the list's width, where Full is the full width of the list container and Block corresponds to the inline width of buttons in the list. The UIButton's width property can not be changed.
onClick	function		Callback for when the button is clicked.

Example

import {UIButtonList} from 'writer'

render($$) {

    const el = $$('div')

    return el.append(
        $$(UIButtonList, {
            listValues: [
                {
                    label: 'A',
                    value: 'a',
                    tooltipText: 'Button A'
                },
                {
                    label: 'B',
                    value: 'b',
                    tooltipText: 'Button B'
                },
                {
                    label: 'C',
                    value: 'c',
                    tooltipText: 'Button C'
                }
            ],
            onClick: () => {
                // Do something
            }
        })
    )
}

Example

import {UIButtonList} from 'writer'

render($$) {
    const el = $$('div')

    return el.append(
        $$(UIButtonList, {
            listValues: values,
            size: 'tiny',
            type: 'text',
            width: 'full'
        })
        .on('click', () => {
            // Do something (substance event callback style)
        })
    )
}