Thaw UI Documentation

The Toast component supports several slots for rich content:

• ToastTitle: The main heading. It supports ToastTitleMedia (for icons/spinners) and ToastTitleAction (for buttons/links) via slots.
• ToastTitleMedia: A slot within ToastTitle for visual elements like a Spinner.
• ToastBody: The main message area. It supports a ToastBodySubtitle slot for secondary text.
• ToastFooter: An area at the bottom of the toast for actions like links or buttons.

<Toast>
    <ToastTitle>
        "Loading"
        <ToastTitleMedia slot>
            <Spinner size=SpinnerSize::Tiny/>
        </ToastTitleMedia>
    </ToastTitle>
    <ToastBody>
        "Uploading file..."
        <ToastBodySubtitle slot>
            "Please wait while we process your request"
        </ToastBodySubtitle>
    </ToastBody>
    <ToastFooter>
        <Link>Cancel</Link>
    </ToastFooter>
</Toast>

If you need to display values in a specific format (e.g., using commas as decimal separators) or parse non-standard string inputs, use the parser and format props.

• format: A callback that takes the underlying value T and returns a String to be displayed in the input field.
• parser: A callback that takes a String from the user input and returns Option<T>. This allows you to intercept and transform the raw string before it updates the component's value.

Note: The parser must return Option<T> to handle invalid inputs gracefully.

let value = RwSignal::new(0.0);

// Example: Customizing decimal separator to a comma
let format = move |v: f64| {
    // ... logic to format v as a string with commas ...
    format!("{},{:0<2}", sign, int, dec)
};

let parser = move |v: String| {
    // ... logic to parse string with commas back into f64 ...
    format!("{:0<1}.{:0<2}", int_part, dec_part).parse::<f64>().ok()
};

view! {
    <SpinButton<f64> value=value parser=parser format=format step_page=1.0 />
}

You can customize where the popover appears relative to its trigger and how it looks using the position and appearance props on the Popover component.

Placement

Use the position prop with PopoverPosition variants to align the popover. Available positions include:

• PopoverPosition::Top, PopoverPosition::TopStart, PopoverPosition::TopEnd
• PopoverPosition::Bottom, PopoverPosition::BottomStart, PopoverPosition::BottomEnd
• PopoverPosition::Left, PopoverPosition::LeftStart, PopoverPosition::LeftEnd
• PopoverPosition::Right, PopoverPosition::RightStart, PopoverPosition::RightEnd

Appearance

Use the appearance prop with PopoverAppearance to change the visual style:

• PopoverAppearance::Brand: Applies brand-specific styling.
• PopoverAppearance::Inverted: Applies an inverted color scheme.
• Default: If not specified, the default theme style is used.

// Example of custom placement and appearance
view! {
    <Popover position=PopoverPosition::BottomStart appearance=PopoverAppearance::Brand>
        <PopoverTrigger slot>
            <Button>"Trigger"</Button>
        </PopoverTrigger>
        "Content"
    </Popover>
}

To manage validation across multiple fields in a form, wrap your fields in a FieldContextProvider. This allows you to trigger validation for the entire group of fields.

Each input component (like Input, Select, Slider, etc.) accepts a rules prop containing a vector of specific rule types (e.g., InputRule, SelectRule). You can also provide custom validation logic using a .validator() method which returns a Result<(), FieldValidationState::Error>.

To trigger validation manually (for example, on a submit button click), use FieldContextInjection::expect_context() to access the context and call .validate().

view! {
    <form>
        <FieldContextProvider>
            <Field label="Username" name="username">
                <Input rules=vec![InputRule::required(true.into())]/>
            </Field>
            
            <Field label="SpinButton" name="spinbutton">
                <SpinButton
                    step_page=1
                    rules=vec![SpinButtonRule::validator(move |v, _| {
                        if v % 2 == 0 {
                            Err(FieldValidationState::Error("It has to be odd!".to_string()))
                        } else {
                            Ok(())
                        }
                    })]
                />
            </Field>

            <Button
                button_type=ButtonType::Submit
                on_click={ 
                    let field_context = FieldContextInjection::expect_context();
                    move |e: ev::MouseEvent| {
                        if !field_context.validate() {
                            e.prevent_default();
                        }
                    }
                }
            >
                "Submit"
            </Button>
        </FieldContextProvider>
    </form>
}

To create a hierarchical tree structure, compose <Tree> components with <TreeItem> and <TreeItemLayout>.

• <Tree>: The root container for the tree.
• <TreeItem>: Represents an individual node. Use the item_type prop to specify if it is a TreeItemType::Branch (can contain children) or TreeItemType::Leaf (cannot contain children).
• <Tree> (nested): To create nesting, place a new <Tree> component inside a <TreeItem> that is marked as a branch.
• <TreeItemLayout>: Used inside a <TreeItem> to define the visual content/label of that item.

view! {
    <Tree>
        <TreeItem item_type=TreeItemType::Branch>
            <TreeItemLayout>"level 1, item 1"</TreeItemLayout>
            <Tree>
                <TreeItem item_type=TreeItemType::Leaf>
                    <TreeItemLayout>"level 2, item 1"</TreeItemLayout>
                </TreeItem>
            </Tree>
        </TreeItem>
        <TreeItem item_type=TreeItemType::Leaf>
            <TreeItemLayout>"level 1, item 2"</TreeItemLayout>
        </TreeItem>
    </Tree>
}