zhongwei/gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 09:05:04 +08:00
commit 7afdd6601b
69 changed files with 9552 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
docs/components/toggle-group.md Normal file
View File

@@ -0,0 +1,110 @@
1. Home
2. Components
3. Toggle Group
# Toggle Group
A set of two-state buttons that can be toggled on or off. Toggle buttons share outer rounded corners with sharp inner corners, creating a seamless single-button appearance.
[Docs](https://www.radix-ui.com/primitives/docs/components/toggle-group)[API Reference](https://www.radix-ui.com/primitives/docs/components/toggle-group#api-reference)## Props
### ToggleGroup
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| etype | 'single' | 'multiple' | 'single' | Selection behavior |
| variant | 'primary' | 'secondary' | 'ghost' | 'primary' | Visual style passed to items |
| size | 'sm' | 'base' | 'lg' | 'base' | Size passed to items |
| ...Radix props | ComponentProps<typeof ToggleGroupPrimitive.Root> | - | All Radix group props |
### ToggleGroupItem
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| inherits | variant, size from group | - | Styling context from parent |
| ...Radix props | ComponentProps<typeof ToggleGroupPrimitive.Item> | - | All Radix item props |
Multiple buttons can be active at once with etype="multiple".
## Variants
### Primary (Default)
1 2 3 Selected: option-1
```jsx
<ToggleGroup variant="primary" type="multiple" size="sm">
<ToggleGroupItem value="option-1">1</ToggleGroupItem>
<ToggleGroupItem value="option-2">2</ToggleGroupItem>
<ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>
```
### Secondary
1 2 3 Selected: option-1
```jsx
<ToggleGroup variant="secondary" type="multiple" size="sm">
<ToggleGroupItem value="option-1">1</ToggleGroupItem>
<ToggleGroupItem value="option-2">2</ToggleGroupItem>
<ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>
```
### Ghost
1 2 3 Selected: option-1
```jsx
<ToggleGroup variant="ghost" type="multiple" size="sm">
<ToggleGroupItem value="option-1">1</ToggleGroupItem>
<ToggleGroupItem value="option-2">2</ToggleGroupItem>
<ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>
```
## Single Selection
Selected: center
```jsx
const [value, setValue] = useState("center");
<ToggleGroup variant="primary" type="single" size="sm" value={value} onValueChange={setValue}>
<ToggleGroupItem value="left"><AlignLeft className="size-3" /></ToggleGroupItem>
<ToggleGroupItem value="center"><AlignCenter className="size-3" /></ToggleGroupItem>
<ToggleGroupItem value="right"><AlignRight className="size-3" /></ToggleGroupItem>
<ToggleGroupItem value="justify"><AlignJustify className="size-3" /></ToggleGroupItem>
</ToggleGroup>
```
Only one button can be active at a time with etype="single".
## With Icons
Selected: list
```jsx
const [value, setValue] = useState(["view-1"]);
<ToggleGroup variant="primary" type="multiple" size="sm" value={value} onValueChange={setValue}>
<ToggleGroupItem value="list"><List className="size-3" /></ToggleGroupItem>
<ToggleGroupItem value="grid"><Grid className="size-3" /></ToggleGroupItem>
<ToggleGroupItem value="folder"><Folder className="size-3" /></ToggleGroupItem>
</ToggleGroup>
```
Toggle group with icon content.
## Disabled State
1 2 3 Selected: None
```jsx
<ToggleGroup variant="primary" type="multiple" size="sm">
<ToggleGroupItem value="option-1">1</ToggleGroupItem>
<ToggleGroupItem value="option-2" disabled>2</ToggleGroupItem>
<ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>
```