Component

toolbar

dx components add toolbar

A toolbar component for grouping related inputs.

This is a sample text that will be formatted according to the toolbar buttons you click. Try clicking the buttons above to see how the text formatting changes.

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
use dioxus_primitives::toolbar::{self, ToolbarButtonProps, ToolbarProps, ToolbarSeparatorProps};
use dioxus_primitives::{dioxus_attributes::attributes, merge_attributes};

#[component]
pub fn Toolbar(props: ToolbarProps) -> Element {
    let base = attributes!(div {
        class: "dx-toolbar",
    });
    let merged = merge_attributes(vec![base, props.attributes]);

    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/toolbar/style.css") }
        toolbar::Toolbar {
            aria_label: props.aria_label,
            disabled: props.disabled,
            horizontal: props.horizontal,
            attributes: merged,
            {props.children}
        }
    }
}

#[component]
pub fn ToolbarButton(props: ToolbarButtonProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/toolbar/style.css") }
        toolbar::ToolbarButton {
            index: props.index,
            disabled: props.disabled,
            on_click: props.on_click,
            attributes: props.attributes,
            {props.children}
        }
    }
}

#[component]
pub fn ToolbarSeparator(props: ToolbarSeparatorProps) -> Element {
    let base = attributes!(div {
        class: "dx-toolbar-separator",
    });
    let merged = merge_attributes(vec![base, props.attributes]);

    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/toolbar/style.css") }
        toolbar::ToolbarSeparator {
            decorative: props.decorative,
            horizontal: props.horizontal,
            attributes: merged,
        }
    }
}

#[component]
pub fn ToolbarGroup(
    #[props(extends = GlobalAttributes)]
    #[props(extends = div)]
    attributes: Vec<Attribute>,
    children: Element,
) -> Element {
    let base = attributes!(div {
        class: "dx-toolbar-group",
    });
    let merged = merge_attributes(vec![base, attributes]);

    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/toolbar/style.css") }
        div { ..merged, {children} }
    }
}

Usage notes

The toolbar component is a flexible and customizable component that can be used to create a variety of toolbars. It can be used to create a simple toolbar with a title, or a more complex toolbar with multiple buttons and actions.

Component Structure

// The Toolbar component wraps all toolbar items.
Toolbar {
    // The aria_label of the toolbar, used for accessibility purposes.
    aria_label: "Toolbar Title",
    // The ToolbarButton component represents each individual button in the toolbar.
    ToolbarButton {
        // The index of the toolbar button, used to determine the order in which buttons are focused.
        index: 0,
        on_click: |_: ()| {
            // This callback is triggered when the button is clicked.
        },
        // The contents of the toolbar button
        {children}
    }
    // The ToolbarSeparator component represents a separator line in the toolbar.
    ToolbarSeparator {
        // The orientation of the separator, true for horizontal and false for vertical.
        horizontal: true,
        // The decorative property controls if the separator is decorative and should not be visible to screen readers.
        decorative: false,
    }
}

Direction / RTL

Toolbar accepts a dir: Option<Direction> prop. When horizontal: true (the default), ToolbarButton's ArrowLeft/ArrowRight roving focus swaps under RTL. See the rtl variant.

Variants

Alternative examples for common configurations.

rtl