Dioxus Components

The Navbar component is built using a hierarchical structure of sub-components to create a navigation bar with collapsible menus.

• Navbar: The top-level wrapper for the entire menu bar.
• NavbarNav: Represents an individual menu. It requires an index to determine display order.
• NavbarTrigger: The interactive element (e.g., a button) that opens the menu.
• NavbarContent: The container for the menu items that appear when the trigger is activated.
• NavbarItem: Individual selectable items within the menu. Each item has a value and an on_select callback.

Navbar {
    NavbarNav {
        index: 0,
        NavbarTrigger {
            "Menu Label"
        }
        NavbarContent {
            NavbarItem {
                value: "item_1",
                on_select: |value: String| {
                    println!("Selected: {}", value);
                },
            }
        }
    }
}

The Tabs component manages a tabbed interface by coordinating TabList, TabTrigger, and TabContent components. The component uses a value property to link triggers to their corresponding content. When a TabTrigger with a specific value is activated, the TabContent with the matching value is displayed.

Component Hierarchy

• Tabs: The root container that wraps all triggers and content.
• TabList: A container within Tabs that holds all TabTrigger elements.
• TabTrigger: The clickable element that switches the active tab. It requires a unique value and an index for focus order.
• TabContent: The container for the content associated with a tab. Its value must match a TabTrigger's value to be visible.

Tabs {
    TabList {
        TabTrigger {
            index: 0,
            value: "tab1",
            {children}
        }
    }
    TabContent {
        index: 0,
        value: "tab1",
        {children}
    }
}

The Accordion component is used to display collapsible content panels. To use it correctly, you must follow a specific nesting hierarchy:

1. Accordion: The top-level wrapper that must contain all accordion items.
2. AccordionItem: Represents an individual collapsible section. It requires an index property (starting from 0) to control its placement.
3. AccordionTrigger: The interactive element used to expand or collapse the item.
4. AccordionContent: The container for the content that is revealed when the item is expanded.

// The accordion component must wrap all accordion items.
Accordion {
    // Each accordion item contains both a trigger and the expanded contents of the item.
    AccordionItem {
        // Each item must have an index starting from 0 to control where the item is placed.
        index: 0,
        // The trigger is used to expand or collapse the item.
        AccordionTrigger {}
        // The content that is shown when the item is expanded.
        AccordionContent {}
    }
}

The Sheet component is a panel that slides in from the edge of the screen (Top, Right, Bottom, or Left). It is composed of several sub-components to manage its layout and lifecycle:

• Sheet: The root container. Use the data-side attribute to specify the entry edge (defaults to Right).
• SheetContentClose: A component used within the sheet content to handle closing.
• SheetHeader: A container for the title and description.
• SheetTitle: The heading text for the sheet.
• SheetDescription: Supporting text for the sheet.
• SheetFooter: A container for actions at the bottom of the sheet.
• SheetClose: A trigger that closes the sheet when interacted with.

Sheet {
    open: open(),
    // Which edge to slide in from. Available sides: Top, Right (default), Bottom, Left.
    "data-side": SheetSide::Right.as_str(),
    SheetContentClose {}
    SheetHeader {
        SheetTitle { "Edit Profile" }
        SheetDescription { "Make changes to your profile here." }
    }
    SheetFooter {
        SheetClose { "Close" }
    }
}

The Sidebar component is built using a hierarchical structure managed by a SidebarProvider. The provider handles the state for open/closed status, side placement, and collapsible modes, and it also enables the ⌘/Ctrl+B keyboard shortcut to toggle the sidebar.

Component Hierarchy

• SidebarProvider: The root wrapper that supplies state and keyboard shortcuts.
  • Sidebar: The main container. Configurable via side, variant, and collapsible props.
    • SidebarHeader: Contains the header area, typically housing a SidebarTrigger.
    • SidebarContent: The main scrollable area for navigation.
      • SidebarGroup: A logical grouping of menu items.
        • SidebarGroupLabel: A label for the group.
        • SidebarGroupAction: An action associated with the group.
        • SidebarGroupContent: Wraps the SidebarMenu.
          • SidebarMenu: The list of items.
            • SidebarMenuItem: An individual item or a container for a submenu.
              • SidebarMenuButton: The primary interactive element. Supports is_active state and an optional tooltip.
              • SidebarMenuAction: A trailing action (e.g., an icon) that can be configured to show_on_hover.
              • SidebarMenuBadge: An optional badge for the item.
            • SidebarMenuSub: A nested menu structure.
              • SidebarMenuSubItem: A container for submenu items.
                • SidebarMenuSubButton: The interactive button/link within a submenu.
    • SidebarFooter: The bottom area of the sidebar, often used for user profiles or settings.
  • SidebarRail: An optional draggable resize handle placed between the rail and the main content.
  • SidebarInset: The main content area that sits adjacent to the sidebar.

SidebarProvider {
    Sidebar {
        side: SidebarSide::Left,
        variant: SidebarVariant::Sidebar,
        collapsible: SidebarCollapsible::Offcanvas,

        SidebarHeader {
            SidebarTrigger {}
        }

        SidebarContent {
            SidebarGroup {
                SidebarGroupLabel { "Label" }
                SidebarGroupContent {
                    SidebarMenu {
                        SidebarMenuItem {
                            SidebarMenuButton {
                                is_active: true,
                                tooltip: rsx!("Tooltip text"),
                                Icon {}
                                span { "Menu Item" }
                            }
                        }
                    }
                }
            }
        }
    }
    SidebarRail {}
    SidebarInset { /* Main Content */ }
}