Initial commit
This commit is contained in:
Zhongwei Li
241
docs/components/select.md
Normal file
241
docs/components/select.md
Normal file
@@ -0,0 +1,241 @@
|
||||
- Home
|
||||
- Components
|
||||
- Select
|
||||
|
||||
# Select
|
||||
|
||||
Displays a list of options for the user to pick from—triggered by a button.
|
||||
|
||||
## Types
|
||||
|
||||
```
|
||||
interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
|
||||
state?: "default" | "disabled" | "error";
|
||||
size?: "sm" | "md" | "lg";
|
||||
font?: "standard" | "mono";
|
||||
align?: "left" | "center" | "right";
|
||||
}
|
||||
|
||||
interface SelectItemProps extends ComponentProps<typeof SelectPrimitive.Item> {
|
||||
prefix?: ReactNode;
|
||||
suffix?: ReactNode;
|
||||
}
|
||||
|
||||
// Other select components use Radix primitives:
|
||||
// SelectRoot, SelectGroup, SelectValue, SelectContent,
|
||||
// SelectLabel, SelectSeparator - all extend Radix component props
|
||||
```
|
||||
|
||||
## In Toolbar
|
||||
|
||||
```
|
||||
<Toolbar>
|
||||
<ToolbarGroup>
|
||||
<Button icon variant="ghost" size="sm">
|
||||
<Settings className="size-4" />
|
||||
</Button>
|
||||
<Select defaultValue="medium">
|
||||
<SelectTrigger size="sm" className="w-20">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="small">S</SelectItem>
|
||||
<SelectItem value="medium">M</SelectItem>
|
||||
<SelectItem value="large">L</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button icon variant="ghost" size="sm">
|
||||
<Download className="size-4" />
|
||||
</Button>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
### Select
|
||||
|
||||
|
||||
Prop Type Default Description
|
||||
font 'standard' | 'mono' 'mono' Font family applied to trigger and items
|
||||
align 'left' | 'center' | 'right' 'left' Text alignment applied to trigger and items
|
||||
...Radix props ComponentProps<typeof SelectPrimitive.Root> - All Radix Select root props
|
||||
|
||||
### SelectTrigger
|
||||
|
||||
|
||||
Prop Type Default Description
|
||||
size 'sm' | 'md' | 'lg' 'md' Trigger size
|
||||
state 'default' | 'error' 'default' Visual state
|
||||
...Radix props ComponentProps<typeof SelectPrimitive.Trigger> - All Radix trigger props
|
||||
|
||||
### SelectContent
|
||||
|
||||
|
||||
Prop Type Default Description
|
||||
position 'item-aligned' | 'popper' 'item-aligned' Positioning strategy
|
||||
...Radix props ComponentProps<typeof SelectPrimitive.Content> - All Radix content props
|
||||
|
||||
### SelectItem
|
||||
|
||||
|
||||
Prop Type Default Description
|
||||
prefix ReactNode - Element rendered before the label
|
||||
suffix ReactNode - Element rendered after the label
|
||||
...Radix props ComponentProps<typeof SelectPrimitive.Item> - All Radix item props
|
||||
|
||||
### SelectLabel, SelectGroup, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, SelectValue
|
||||
|
||||
Pass-through wrappers for corresponding Radix components.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
<Select defaultValue="apple">
|
||||
<SelectTrigger size="sm" className="w-[180px]">
|
||||
<SelectValue placeholder="Select a fruit"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Fruits</SelectLabel>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana" prefix={<Plus/>}>Banana</SelectItem>
|
||||
<SelectItem disabled value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes" suffix={<>Suffix<Minus/></>}>Grapes</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
|
||||
<SelectSeparator/>
|
||||
|
||||
<SelectGroup>
|
||||
<SelectLabel>Vegetables</SelectLabel>
|
||||
<SelectItem value="aubergine">Aubergine</SelectItem>
|
||||
<SelectItem value="broccoli">Broccoli</SelectItem>
|
||||
<SelectItem disabled value="carrot">Carrot</SelectItem>
|
||||
<SelectItem value="courgette">Courgette</SelectItem>
|
||||
<SelectItem value="leek">Leek</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
## State
|
||||
|
||||
```
|
||||
<Select>
|
||||
<SelectTrigger disabled size="sm" className="w-[180px]">
|
||||
<SelectValue placeholder="Disabled"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Fruits</SelectLabel>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes">Grapes</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
## Sides
|
||||
|
||||
Left
|
||||
|
||||
Top
|
||||
|
||||
Bottom
|
||||
|
||||
Right
|
||||
|
||||
```
|
||||
<p className="text-sm font-medium mb-2">Left</p>
|
||||
<Select>
|
||||
<SelectTrigger size="sm" className="w-[120px]">
|
||||
<SelectValue placeholder="Left"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent side="<left | top | bottom | right>" position="popper">
|
||||
<SelectGroup>
|
||||
<SelectItem value="left1">Left 1</SelectItem>
|
||||
<SelectItem value="left2">Left 2</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
## Font Styles
|
||||
|
||||
Standard Font
|
||||
|
||||
Mono Font
|
||||
|
||||
```
|
||||
{/* Standard font */}
|
||||
<Select font="standard">
|
||||
<SelectTrigger size="sm" className="w-[120px]">
|
||||
<SelectValue placeholder="Standard"/>
|
||||
</SelectTrigger>
|
||||
</Select>
|
||||
|
||||
{/* Monospace font (default) */}
|
||||
<Select font="mono">
|
||||
<SelectTrigger size="sm" className="w-[120px]">
|
||||
<SelectValue placeholder="Mono"/>
|
||||
</SelectTrigger>
|
||||
</Select>
|
||||
```
|
||||
|
||||
## Text Alignment
|
||||
|
||||
Left Aligned
|
||||
|
||||
Center Aligned
|
||||
|
||||
Right Aligned
|
||||
|
||||
```
|
||||
{/* Left aligned (default) */}
|
||||
<Select align="left">
|
||||
<SelectTrigger size="sm" className="w-[140px]">
|
||||
<SelectValue placeholder="Left aligned"/>
|
||||
</SelectTrigger>
|
||||
</Select>
|
||||
|
||||
{/* Center aligned */}
|
||||
<Select align="center">
|
||||
<SelectTrigger size="sm" className="w-[140px]">
|
||||
<SelectValue placeholder="Center aligned"/>
|
||||
</SelectTrigger>
|
||||
</Select>
|
||||
|
||||
{/* Right aligned */}
|
||||
<Select align="right">
|
||||
<SelectTrigger size="sm" className="w-[140px]">
|
||||
<SelectValue placeholder="Right aligned"/>
|
||||
</SelectTrigger>
|
||||
</Select>
|
||||
```
|
||||
|
||||
## Error
|
||||
|
||||
```
|
||||
<Select>
|
||||
<SelectTrigger state="error" size="sm" className="w-[180px]">
|
||||
<SelectValue placeholder="Error"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Fruits</SelectLabel>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||||
<SelectItem value="grapes">Grapes</SelectItem>
|
||||
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user