197 lines
4.5 KiB
Markdown
197 lines
4.5 KiB
Markdown
1. Home
|
|
2. Menu Tool Layouts
|
|
3. Toolbar
|
|
|
|
# Toolbar
|
|
|
|
Simple, composable toolbar components for organizing buttons and actions.
|
|
|
|
## Complex Example
|
|
|
|
Add ```jsx
|
|
const [selectedTool, setSelectedTool] = useState("select");
|
|
|
|
return (
|
|
<Toolbar size="md">
|
|
<ToolbarGroup>
|
|
<ToggleButtons value={selectedTool} onValueChange={setSelectedTool} padding={false} variant="primary">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleButton icon value="select" >
|
|
<MouseCursorAltIcon strokWidth={0.5} size="md"/>
|
|
</ToggleButton>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Select tool</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleButton value="edit" icon >
|
|
<MouseCursorIcon strokWidth={0.5}/>
|
|
</ToggleButton>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Edit tool</TooltipContent>
|
|
</Tooltip>
|
|
</ToggleButtons>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button icon variant="ghost">
|
|
<Scissors className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Cut</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button icon variant="ghost">
|
|
<Hand className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Hand tool</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
icon
|
|
size="md"
|
|
>
|
|
<Hash/>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Hash tool</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
icon
|
|
size="md"
|
|
onClick={() => toast("Type tool selected")}
|
|
>
|
|
<Type/>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Type tool</TooltipContent>
|
|
</Tooltip>
|
|
</ToolbarGroup>
|
|
<ToolbarSeparator />
|
|
<ToolbarGroup>
|
|
<Button
|
|
variant="primary"
|
|
size="md"
|
|
onClick={() => toast("Add item clicked")}
|
|
>
|
|
<Plus/> Add
|
|
</Button>
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
)
|
|
```
|
|
|
|
## Examples
|
|
|
|
Add ```jsx
|
|
<Toolbar>
|
|
<ToolbarGroup>
|
|
<Button variant="ghost" icon>
|
|
<Hash/>
|
|
</Button>
|
|
<Button variant="ghost" icon>
|
|
<Type/>
|
|
</Button>
|
|
<Button variant="ghost" icon>
|
|
<Image/>
|
|
</Button>
|
|
</ToolbarGroup>
|
|
<ToolbarSeparator />
|
|
<ToolbarGroup>
|
|
<Button variant="primary">
|
|
<Plus/> Add
|
|
</Button>
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
```
|
|
|
|
## Components
|
|
|
|
- Toolbar - Main container with variant support (default | floating)
|
|
- ToolbarGroup - Groups related buttons with gap spacing
|
|
- Button - Button component with toolbar-specific styling
|
|
- ToolbarSeparator - Short rounded visual separator
|
|
|
|
## Floating Variant
|
|
|
|
Add ```jsx
|
|
<Toolbar variant="floating">
|
|
<ToolbarGroup>
|
|
<Button variant="ghost" icon>
|
|
<Hash />
|
|
</Button>
|
|
<Button variant="ghost" icon>
|
|
<Type />
|
|
</Button>
|
|
</ToolbarGroup>
|
|
<ToolbarSeparator />
|
|
<ToolbarGroup>
|
|
<Button variant="primary">
|
|
<Plus /> Add
|
|
</Button>
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
```
|
|
|
|
## Sizes
|
|
|
|
```jsx
|
|
{/* Small toolbar - compact padding */}
|
|
<Toolbar size="sm">
|
|
<ToolbarGroup>
|
|
<Button variant="ghost" icon size="sm"><Hash /></Button>
|
|
<Button variant="ghost" icon size="sm"><Type /></Button>
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
|
|
{/* Medium toolbar - default */}
|
|
<Toolbar size="md">
|
|
<ToolbarGroup>
|
|
<Button variant="ghost" icon size="md"><Hash /></Button>
|
|
<Button variant="ghost" icon size="md"><Type /></Button>
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
|
|
{/* Large toolbar - spacious padding */}
|
|
<Toolbar size="lg">
|
|
<ToolbarGroup>
|
|
<Button variant="ghost" icon size="lg"><Hash /></Button>
|
|
<Button variant="ghost" icon size="lg"><Type /></Button>
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Toolbar
|
|
|
|
```tsx
|
|
interface ToolbarProps {
|
|
className?: string
|
|
children?: React.ReactNode
|
|
variant?: "default" | "floating"
|
|
size?: "sm" | "md" | "lg"
|
|
}
|
|
```
|
|
|
|
### Button
|
|
|
|
```tsx
|
|
interface ButtonProps {
|
|
variant?: "primary" | "secondary" | "destructive" | "ghost" | "link"
|
|
size?: "sm" | "md" | "lg"
|
|
icon?: boolean
|
|
className?: string
|
|
children: React.ReactNode
|
|
onClick?: () => void
|
|
disabled?: boolean
|
|
tooltip?: string
|
|
}
|
|
``` |