Expand description
Command palette molecule component
A command palette/search component with keyboard navigation. Similar to VS Code’s cmd+palette or shadcn’s Command component.
§Example
ⓘ
use dioxus_ui_system::molecules::command::*;
fn MyCommand() -> Element {
let mut value = use_signal(|| "".to_string());
rsx! {
Command {
CommandInput {
placeholder: "Search commands...",
value: value(),
on_value_change: move |v| value.set(v),
}
CommandList {
CommandEmpty { "No results found." }
CommandGroup {
heading: "Suggestions",
CommandItem {
value: "calendar",
on_select: move |_| println!("Calendar selected"),
"Calendar"
}
CommandItem {
value: "search",
on_select: move |_| println!("Search selected"),
"Search"
}
}
CommandSeparator {}
CommandGroup {
heading: "Settings",
CommandItem {
value: "profile",
on_select: move |_| println!("Profile selected"),
"Profile"
}
}
}
}
}
}Re-exports§
pub use CommandSeparator_completions::Component::CommandSeparator;pub use CommandLoading_completions::Component::CommandLoading;
Structs§
- Command
Empty Props - Command empty properties
- Command
Group Props - Command group properties
- Command
Input Props - Command input properties
- Command
Item Props - Command item properties
- Command
List Props - Command list properties
- Command
Props - Command container properties
- Command
Shortcut Props - Command shortcut properties
Functions§
- Command
- Command container component
- Command
Empty - Command empty component
- Command
Group - Command group component
- Command
Input - Command input component
- Command
Item - Command item component
- Command
List - Command list component
- Command
Loading - Command loading component
- Command
Separator - Command separator component
- Command
Shortcut - Command shortcut component