@duskmoon-dev/el-tabs (日语)
用 Web 组件构建的标签界面组件 .
安装
bun add @duskmoon-dev/el-tabs
使用量
自动注册
import '@duskmoon-dev/el-tabs/register';
<el-dm-tabs>
<el-dm-tab label="Tab 1">Content for tab 1</el-dm-tab>
<el-dm-tab label="Tab 2">Content for tab 2</el-dm-tab>
<el-dm-tab label="Tab 3">Content for tab 3</el-dm-tab>
</el-dm-tabs>
手工登记
import { ElDmTabs, ElDmTab, register } from '@duskmoon-dev/el-tabs';
// Register with default tag names
register();
// Or register with custom tag names
customElements.define('my-tabs', ElDmTabs);
customElements.define('my-tab', ElDmTab);
备选案文
| 备选案文 | 说明 |
|---|
default | 默认样式 |
pills | 药丸形标签 |
underline | 下划线标签 |
方向
| 方向 | 说明 |
|---|
horizontal | 水平标签( 默认) |
vertical | 垂直标签 |
属性( el- dm- tabs)
| 属性 | 类型 | 默认 | 说明 |
|---|
value | string | - 说吧 | 活动标签值 |
variant | string | 'default' | 样式变体 |
color | string | 'primary' | 颜色变体 |
orientation | string | 'horizontal' | 标签取向 |
属性 (el-dm-tab)
| 属性 | 类型 | 默认 | 说明 |
|---|
label | string | '' | 标签 |
value | string | - 说吧 | 标签值( 如果未设定, 自动生成) |
disabled | boolean | false | 禁用标签 |
CSS 部件( el- dm- tabs)
| 编 | 说明 |
|---|
tablist | 标签列表容器 |
indicator | 活动标签指示器 |
活动
| 活动 | 细节 | 说明 |
|---|
change | { value, index } | 当活动标签更改时被解除 |
实例
基础
<el-dm-tabs>
<el-dm-tab label="Overview">Overview content</el-dm-tab>
<el-dm-tab label="Details">Details content</el-dm-tab>
<el-dm-tab label="Settings">Settings content</el-dm-tab>
</el-dm-tabs>
药丸备选案文
<el-dm-tabs variant="pills">
<el-dm-tab label="Tab 1">Content 1</el-dm-tab>
<el-dm-tab label="Tab 2">Content 2</el-dm-tab>
</el-dm-tabs>
下划线变量
<el-dm-tabs variant="underline">
<el-dm-tab label="Tab 1">Content 1</el-dm-tab>
<el-dm-tab label="Tab 2">Content 2</el-dm-tab>
</el-dm-tabs>
垂直方向
<el-dm-tabs orientation="vertical">
<el-dm-tab label="Tab 1">Content 1</el-dm-tab>
<el-dm-tab label="Tab 2">Content 2</el-dm-tab>
<el-dm-tab label="Tab 3">Content 3</el-dm-tab>
</el-dm-tabs>
禁用标签
<el-dm-tabs>
<el-dm-tab label="Active">Active content</el-dm-tab>
<el-dm-tab label="Disabled" disabled>Disabled content</el-dm-tab>
</el-dm-tabs>
控制值
<el-dm-tabs value="settings">
<el-dm-tab label="Home" value="home">Home content</el-dm-tab>
<el-dm-tab label="Settings" value="settings">Settings content</el-dm-tab>
</el-dm-tabs>
许可证
麻省理工学院