58个组件演示 | 主题化组件库

布局组件 (Layout)

.container

.col 1

.col 2

.grid 项

.flex 项1

.stack 项1
.stack 项2

按钮 .btn (尺寸 + 颜色)

输入框 .input / 文本域 .textarea / 下拉 .select

复选框 .checkbox / 单选框 .radio (颜色变体)

开关 .switch (含颜色变体)

滑块 .slider (颜色变体)

评分 .rate (含颜色变体)

★ ★ ★ ★ ★

表单 .form / .form_item / .label / .fieldset

提示框 .tooltip / 气泡卡片 .popover (静态演示)

模态框 .modal / 抽屉 .drawer (仅结构，需JS触发)

抽屉标题

抽屉内容

下拉菜单 .dropdown / 菜单 .menu

标签页 .tabs / .tab

激活页

未激活

卡片 .card (含颜色变体)

卡片标题

卡片内容区域

底部

Primary 卡片

边框/头部颜色变体

头像 .avatar / 徽标 .badge / 标签 .tag

Badge Success sm Tag Tag lg

警告 .alert / 全局提示 .message (静态)

这是一条警告信息 (primary)

成功提示 (sm)

全局提示 (danger)

进度条 .progress

加载中 .spinner / 骨架屏 .skeleton

面包屑 .breadcrumb / 分页 .pagination

1

2

3

步骤条 .steps / .step

1

步骤1

2

步骤2

3

步骤3

表格 .table / 列表 .list

姓名	年龄
张三	25
李四	30

列表项1
小号列表项

图片 .img / 图标 .icon / 链接 .link

主色链接大号成功链接

标题 .h* / 段落 .p / 文本 .text / 代码 .code

主色标题 H2

小号段落文本，用于展示小号文字。

危险文本色

const a = 1;

引用 .blockquote / 图形 .figure / .figcaption

这是一个引用块，左边框为primary色。

时间 .time / 地址 .address

2025-03-20

北京市朝阳区

58 个组件演示

主色标题 H2