Skip to content

Commit ac88db8

Browse files
author
sanguogege
committed
fix: All of kobalte components have been encapsulated, but the writing is still not fully completed.
1 parent 6f3c012 commit ac88db8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+808
-861
lines changed

‎apps/docs/src/components/badge.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
2+
import { Badge } from "solid-element-ui";
13
const DemoCode = () => {
2-
return;
4+
return (
5+
<div class="p-4 bg-white dark:bg-zinc-950 border rounded-lg space-x-2">
6+
<Badge variant="default">Beta</Badge>
7+
<Badge variant="success">已上线</Badge>
8+
<Badge variant="danger">已下线</Badge>
9+
<Badge variant="outline">v1.0.0</Badge>
10+
</div>
11+
);
312
};
413

514
export { DemoCode };

‎apps/docs/src/components/breadcrumbs.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
1+
import { Breadcrumbs } from "solid-element-ui";
2+
3+
export const navItems = [
4+
{ title: "首页", href: "/" },
5+
{ title: "组件库", href: "/components" },
6+
{ title: "面包屑", current: true },
7+
];
8+
19
const DemoCode = () => {
2-
return;
10+
return (
11+
<div class=" not-prose p-4 bg-white dark:bg-zinc-950 border rounded-lg">
12+
<Breadcrumbs class="" items={navItems} />
13+
</div>
14+
);
315
};
416

517
export { DemoCode };

‎apps/docs/src/components/button.tsx‎

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,92 @@
1+
import { Button } from "solid-element-ui";
2+
import { Search } from "lucide-solid";
3+
14
const DemoCode = () => {
2-
return;
5+
return (
6+
<>
7+
<div class="not-prose flex p-4 bg-white dark:bg-zinc-950 border rounded-lg space-x-2 my-2">
8+
<Button variant="default">default</Button>
9+
<Button variant="outline">outline</Button>
10+
<Button variant="dashed">dashed</Button>
11+
<Button variant="filled">filled</Button>
12+
<Button variant="text">text</Button>
13+
</div>
14+
<div class="not-prose flex p-4 bg-white dark:bg-zinc-950 border rounded-lg space-x-2 my-2">
15+
<Button color="primary">primary</Button>
16+
<Button variant="outline" color="primary">
17+
primary
18+
</Button>
19+
<Button variant="dashed" color="primary">
20+
primary
21+
</Button>
22+
<Button variant="filled" color="primary">
23+
primary
24+
</Button>
25+
<Button variant="text" color="primary">
26+
primary
27+
</Button>
28+
</div>
29+
<div class="not-prose flex p-4 bg-white dark:bg-zinc-950 border rounded-lg space-x-2 my-2">
30+
<Button color="success">success</Button>
31+
<Button variant="outline" color="success">
32+
primary
33+
</Button>
34+
<Button variant="dashed" color="success">
35+
primary
36+
</Button>
37+
<Button variant="filled" color="success">
38+
primary
39+
</Button>
40+
<Button variant="text" color="success">
41+
primary
42+
</Button>
43+
</div>
44+
<div class="not-prose flex p-4 bg-white dark:bg-zinc-950 border rounded-lg space-x-2 my-2">
45+
<Button color="warning">warning</Button>
46+
<Button variant="outline" color="warning">
47+
primary
48+
</Button>
49+
<Button variant="dashed" color="warning">
50+
primary
51+
</Button>
52+
<Button variant="filled" color="warning">
53+
primary
54+
</Button>
55+
<Button variant="text" color="warning">
56+
primary
57+
</Button>
58+
</div>
59+
<div class="not-prose flex p-4 bg-white dark:bg-zinc-950 border rounded-lg space-x-2 my-2">
60+
<Button color="danger">danger</Button>
61+
<Button variant="outline" color="danger">
62+
primary
63+
</Button>
64+
<Button variant="dashed" color="danger">
65+
primary
66+
</Button>
67+
<Button variant="filled" color="danger">
68+
primary
69+
</Button>
70+
<Button variant="text" color="danger">
71+
primary
72+
</Button>
73+
</div>
74+
75+
<div class="not-prose flex p-4 bg-white dark:bg-zinc-950 border rounded-lg space-x-2 my-2">
76+
<Button color="danger" leftIcon={<div>左边</div>}>
77+
danger
78+
</Button>
79+
80+
<Button
81+
variant="text"
82+
color="danger"
83+
rightIcon={<div>右边</div>}
84+
>
85+
primary
86+
</Button>
87+
</div>
88+
</>
89+
);
390
};
491

592
export { DemoCode };

‎apps/docs/src/components/checkbox.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
1-
1+
import { Checkbox } from "solid-element-ui";
22
const DemoCode = () => {
3-
return ;
3+
return (
4+
<div class="flex p-4 bg-white dark:bg-zinc-950 border rounded-lg space-x-2">
5+
<Checkbox label="接受服务协议" />
6+
7+
<Checkbox defaultChecked label="默认选中项" />
8+
9+
<Checkbox disabled label="禁用状态" />
10+
11+
<Checkbox
12+
label="接受条款"
13+
validationState="invalid"
14+
description="请阅读我们的隐私政策。"
15+
errorMessage="您必须同意后才能继续"
16+
size="lg"
17+
color="primary"
18+
/>
19+
</div>
20+
);
421
};
522

6-
export { DemoCode };
23+
export { DemoCode };

‎apps/docs/src/components/collapsible.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
1+
import { Collapsible } from "solid-element-ui";
22
const DemoCode = () => {
3-
return ;
3+
return (
4+
<div class="not-prose flex p-4 bg-white dark:bg-zinc-950 border rounded-lg space-x-2">
5+
<Collapsible title="查看源代码说明" class="not-prose">
6+
这段内容默认是隐藏的，点击上方按钮可以展开。
7+
它使用了原生高度动画和 Kobalte 的状态管理。
8+
</Collapsible>
9+
</div>
10+
);
411
};
512

6-
export { DemoCode };
13+
export { DemoCode };

‎apps/docs/src/components/combobox.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1+
import { Combobox, ComboboxItem } from "solid-element-ui";
12

23
const DemoCode = () => {
3-
return ;
4+
return (
5+
<div class="p-4 bg-white dark:bg-zinc-950 border rounded-lg">
6+
<Combobox
7+
options={["Apple", "Banana", "Orange"]}
8+
placeholder="Search fruits..."
9+
itemComponent={(props:any) => <ComboboxItem item={props.item} />}
10+
/>
11+
</div>
12+
);
413
};
514

6-
export { DemoCode };
15+
export { DemoCode };

‎apps/docs/src/components/context-menu.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,32 @@
1+
import { ContextMenu } from "solid-element-ui";
2+
3+
4+
export const menuItems = [
5+
{ label: "返回", onClick: () => console.log("Back") },
6+
{ label: "前进", disabled: true },
7+
{ separator: true },
8+
{
9+
label: "更多工具",
10+
children: [
11+
{ label: "保存页面", onClick: () => alert("Saved") },
12+
{ label: "打印", onClick: () => window.print() },
13+
],
14+
},
15+
{ separator: true },
16+
{ label: "检查", onClick: () => console.log("Inspect") },
17+
];
118

219
const DemoCode = () => {
3-
return ;
20+
return (
21+
<div class="p-4 bg-white dark:bg-zinc-950 border rounded-lg space-y-2">
22+
<ContextMenu
23+
items={menuItems}
24+
class="flex h-32 w-full items-center justify-center border-2 border-dashed rounded-lg"
25+
>
26+
<span>触发区域</span>
27+
</ContextMenu>
28+
</div>
29+
);
430
};
531

6-
export { DemoCode };
32+
export { DemoCode };

‎apps/docs/src/components/dialog.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
1-
1+
import { Dialog } from "solid-element-ui";
22
const DemoCode = () => {
3-
return ;
3+
return (
4+
<div class="p-4 bg-white dark:bg-zinc-950 border rounded-lg space-y-2">
5+
<Dialog
6+
title="确认操作"
7+
description="此操作无法撤销，请确认是否继续。"
8+
trigger={<button class="btn-primary">删除账户</button>}
9+
>
10+
<p class="text-sm text-zinc-600">
11+
删除后，您的所有数据将永久从我们的服务器中移除。
12+
</p>
13+
</Dialog>
14+
</div>
15+
);
416
};
517

6-
export { DemoCode };
18+
export { DemoCode };

‎apps/docs/src/components/dropdown-menu.tsx‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
1+
import { DropdownMenu } from "solid-element-ui";
2+
3+
export const profileMenu = [
4+
{ label: "个人资料", onClick: () => console.log("Profile") },
5+
{ label: "设置", onClick: () => console.log("Settings") },
6+
{ separator: true },
7+
{
8+
label: "邀请好友",
9+
children: [
10+
{ label: "通过邮件", onClick: () => {} },
11+
{ label: "通过微信", onClick: () => {} },
12+
],
13+
},
14+
{ separator: true },
15+
{ label: "退出登录", onClick: () => {}, disabled: false },
16+
];
117

218
const DemoCode = () => {
3-
return ;
19+
return (
20+
<div class="p-4 bg-white dark:bg-zinc-950 border rounded-lg space-y-2">
21+
<DropdownMenu
22+
items={profileMenu}
23+
trigger={<button class="btn">账户设置</button>}
24+
/>
25+
</div>
26+
);
427
};
528

6-
export { DemoCode };
29+
export { DemoCode };

‎apps/docs/src/components/file-field.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1-
1+
import { FileField } from "solid-element-ui";
22
const DemoCode = () => {
3-
return ;
3+
return (
4+
<div class="p-4 bg-white dark:bg-zinc-950 border rounded-lg space-y-2">
5+
<FileField
6+
label="附件上传"
7+
description="支持 PDF 格式"
8+
accept=".pdf"
9+
onChange={(files:any) => console.log(files)}
10+
/>
11+
</div>
12+
);
413
};
514

6-
export { DemoCode };
15+
export { DemoCode };

0 commit comments

Comments
 (0)