button_bar

ButtonBar

from dara.components.common.button_bar import ButtonBar

class ButtonBar(FormComponent)

The ButtonBar component adds a button bar with a set of options that can be selected from and update a Variable instance. It can be a useful component for defining different content to be displayed, similar to that of a navigation bar.

A simple button bar component:

from dara.core import Variable
from dara.components.common import ButtonBar, Item

ButtonBar(
    items=[
        Item(label='Value 1', value='val1'),
        Item(label='Value 2', value='val2'),
        Item(label='Value 3', value='val3'),
    ],
    value=Variable('val2')
)

A ButtonBar component with onchange:

from dara.core import Variable, Notify
from dara.components.common import ButtonBar, Item

ButtonBar(
    items=[
        Item(label='Value 1', value='val1'),
        Item(label='Value 2', value='val2'),
        Item(label='Value 3', value='val3'),
    ],
    value=Variable('val2')
    onchange=Notify(message='ButtonBar value changed'),
)

A button bar component with styling:

from dara.core import Variable
from dara.components.common import ButtonBar, ButtonBarStyle, Item

ButtonBar(
    items=[
        Item(label='Value 1', value='val1'),
        Item(label='Value 2', value='val2'),
        Item(label='Value 3', value='val3'),
    ],
    value=Variable('val2'),
    styling=ButtonBarStyle.SECONDARY
)

Arguments:

• items: An Item list that defines the button labels
• value: A Variable or DervivedVariable updated by the buttons
• onchange: Action triggered when button in ButtonBar is selected
• id: the key to be used if this component is within a form
• styling: A style of the ButtonBar, can be 'primary' or 'secondary'

Attributes

• items: List[Item]
• value:
• onchange: Optional[Action]
• id: Optional[str]
• styling: ButtonBarStyle