xt/comfy-downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(components): 添加组件演示页面

Browse Source 
- 在 ComponentsDemo.tsx 中添加了多种组件的演示
- 包括 Radio、RadioGroup、Check、Segments、Select 和 Switcher 组件
- 展示了不同配置和状态下的组件用法
This commit is contained in:
Vixalie
2025-08-21 08:41:18 +08:00
parent 6c81c22c72
commit 75291cda8c
1 changed files with 133 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/pages/ComponentsDemo.tsx
View File

@@ -1,8 +1,140 @@
import { Component } from 'solid-js';
import Check from '../components/Check';
import Radio from '../components/Radio';
import RadioGroup from '../components/RadioGroup';
import ScrollArea from '../components/ScrollArea';
import Segments from '../components/Segments';
import Select from '../components/Select';
import Switcher from '../components/Switch';
const ComponentsDemo: Component = () => {
return (
<div class="workspace flex flex-col items-stretch gap-2 rounded-sm bg-swatch-neutral-20"></div>
<div class="workspace flex flex-col items-stretch gap-2 rounded-sm bg-swatch-neutral-20 p-4">
<ScrollArea enableY flexExtended>
<div class="flex flex-col items-stretch gap-2">
<div class="flex flex-row gap-1">
<Radio name="t_radio_1" defaultChecked>
Test Radio button
</Radio>
</div>
<div class="flex flex-row items-center gap-3">
<RadioGroup
name="t_radio_group_1"
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
defalutValue="2"
/>
</div>
<div class="flex flex-row gap-1">
<Check name="t_check_1">Test Checkbox</Check>
</div>
<div class="flex flex-row gap-1 items-center">
<Segments
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>
<Select
placeholder="Select an option"
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>
<Select
placeholder="Select an option"
variant="underlined"
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>
<Select
placeholder="Select an option"
variant="immersive"
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
{ label: 'Option 4', value: '4' },
{ label: 'Option 5', value: '5' },
{ label: 'Option 6', value: '6' },
{ label: 'Option 7', value: '7' },
{ label: 'Option 8', value: '8' },
{ label: 'Option 9', value: '9' },
{ label: 'Option 1', value: 'a' },
{ label: 'Option 2', value: 'b' },
{ label: 'Option 3', value: 'c' },
{ label: 'Option 4', value: 'd' },
{ label: 'Option 5', value: 'e' },
{ label: 'Option 6', value: 'f' },
{ label: 'Option 7', value: 'g' },
]}
/>
</div>
<div class="flex flex-row gap-1 items-center">
<Segments
disabled
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>
<Select
placeholder="Select an option"
disabled
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>
<Select
placeholder="Select an option"
variant="underlined"
disabled
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>
<Select
placeholder="Select an option"
variant="immersive"
disabled
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>
</div>
<div class="flex flex-row gap-1 text-xs">
<Segments
direction="vertical"
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
defaultValue="3"
/>
</div>
<div class="flex flex-row gap-1">
<Switcher />
</div>
</div>
</ScrollArea>
</div>
);
};