Skip to main content

split_button_layout

Function split_button_layout 

Source
pub fn split_button_layout() -> SplitButtonLayoutBuilder
Expand description

§split_button_layout

Lay out a split button with leading and trailing actions.

§Usage

Group a primary action with a related secondary action or menu.

§Parameters

  • modifier — optional modifier chain applied to the split button layout.
  • spacing — optional spacing between the leading and trailing buttons.
  • leading_button — optional leading button slot.
  • trailing_button — optional trailing button slot.

§Examples

use tessera_components::{
    icon::icon,
    material_icons::filled,
    menus::MenuController,
    split_buttons::{split_button_layout, split_leading_button, split_trailing_button},
    text::text,
    theme::material_theme,
};
use tessera_ui::{remember, tessera};

#[tessera]
fn component() {
    let menu = remember(MenuController::new);
    material_theme().child(move || {
        split_button_layout()
            .leading_button(|| {
                split_leading_button().on_click(|| {}).content(|| {
                    text("Send");
                });
            })
            .trailing_button(move || {
                split_trailing_button()
                    .expanded(menu.with(MenuController::is_open))
                    .accessibility_label("Send options")
                    .on_click(move || menu.with_mut(MenuController::toggle))
                    .content(|| {
                        icon().painter(filled::ARROW_DROP_DOWN_SVG);
                    });
            });
    });
}