mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-14 10:30:41 +00:00
162 lines
3.5 KiB
Markdown
162 lines
3.5 KiB
Markdown
# Command Component API
|
|
|
|
A command palette component for quick actions and navigation.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-command = "0.7"
|
|
```
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_command::Command;
|
|
```
|
|
|
|
---
|
|
|
|
## Import
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_command::{
|
|
Command,
|
|
CommandInput,
|
|
CommandList,
|
|
CommandItem,
|
|
CommandGroup,
|
|
CommandSeparator,
|
|
CommandEmpty
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Component API
|
|
|
|
### Command
|
|
|
|
Root container for command palette.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `open` | `Signal<bool>` | **Required** | Open state |
|
|
| `on_open_change` | `Option<Callback<bool>>` | `None` | Change handler |
|
|
|
|
### CommandInput
|
|
|
|
Search input for filtering commands.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `placeholder` | `MaybeProp<String>` | `"Type a command..."` | Placeholder text |
|
|
|
|
### CommandItem
|
|
|
|
Individual command item.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `value` | `String` | **Required** | Search value |
|
|
| `on_select` | `Option<Callback<()>>` | `None` | Select handler |
|
|
|
|
---
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Command Palette
|
|
|
|
```rust
|
|
use leptos::prelude::*;
|
|
use shadcn_ui_leptos_command::*;
|
|
|
|
#[component]
|
|
pub fn MyComponent() -> impl IntoView {
|
|
let (open, set_open) = signal(false);
|
|
|
|
view! {
|
|
<div>
|
|
<button on:click=move |_| set_open.set(true)>
|
|
"Open Command Palette"
|
|
</button>
|
|
|
|
<Command
|
|
open=open.into()
|
|
on_open_change=Some(Callback::new(move |v| set_open.set(v)))
|
|
>
|
|
<CommandInput placeholder="Type a command..." />
|
|
<CommandList>
|
|
<CommandEmpty>"No results found"</CommandEmpty>
|
|
<CommandGroup heading="Suggestions">
|
|
<CommandItem value="calendar" on_select=Some(Callback::new(move |_| println!("Calendar")))>
|
|
"Calendar"
|
|
</CommandItem>
|
|
<CommandItem value="settings">
|
|
"Settings"
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</div>
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## CSS Classes
|
|
|
|
```css
|
|
.command {
|
|
flex h-full w-full flex-col overflow-hidden rounded-md
|
|
bg-popover text-popover-foreground
|
|
}
|
|
|
|
.command-input {
|
|
flex h-11 w-full rounded-md bg-transparent py-3
|
|
text-sm outline-none placeholder:text-muted-foreground
|
|
}
|
|
|
|
.command-item {
|
|
relative flex cursor-pointer select-none items-center
|
|
rounded-sm px-2 py-1.5 text-sm outline-none
|
|
hover:bg-accent hover:text-accent-foreground
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
### Keyboard Navigation
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| **Type** | Filter commands |
|
|
| **Arrow Keys** | Navigate items |
|
|
| **Enter** | Execute command |
|
|
| **Escape** | Close palette |
|
|
| **Ctrl+K** | Open palette (global) |
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface CommandProps {
|
|
open: boolean;
|
|
onOpenChange?: (open: boolean) => void;
|
|
}
|
|
|
|
export const Command: React.FC<CommandProps>;
|
|
export const CommandInput: React.FC<{ placeholder?: string }>;
|
|
export const CommandList: React.FC<ComponentProps>;
|
|
export const CommandItem: React.FC<{ value: string; onSelect?: () => void }>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/command/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/command/src/default.rs)*
|