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)
        })
    )
}

Last updated