@duskmoon-dev/el-按钮
用于 DuskMoon 元素的自定义按钮组件 . 好,你别这样,
安装
bun add @duskmoon-dev/el-button
使用量
自动注册( 建议)
使用组件的最简单方式 - 只需导入即可:
<!-- Via CDN -->
<script type="module" src="https://esm.sh/@duskmoon-dev/el-button/register"></script>
<!-- Now use the element -->
<el-dm-button>Click me</el-dm-button>
<el-dm-button variant="secondary">Secondary</el-dm-button>
<el-dm-button variant="outline" size="lg">Large Outline</el-dm-button>
或与一捆子:
import '@duskmoon-dev/el-button/register';
手工登记
<script type="module">
import { register } from '@duskmoon-dev/el-button';
register();
</script>
<el-dm-button>Click me</el-dm-button>
备选案文
| 备选案文 | 说明 |
|---|---|
primary | 主动作按钮( 默认) |
secondary | 次要动作按钮 |
tertiary | 第三级/ 下级按钮 |
ghost | 透明背景按钮 |
outline | 仅边框按钮 |
大小
| 大小 | 说明 |
|---|---|
xs | 额外小型 |
sm | 小型 |
md | 中 (默认) |
lg | 大块 |
xl | 额外大项 |
形状
使用 shape="circle" 或者说 shape="square" 用于图标按钮。 奥米 shape 用于默认矩形按钮.
<el-dm-button variant="outline" size="xs" shape="circle" aria-label="Add">
<svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 2v12M2 8h12" stroke="currentColor" />
</svg>
</el-dm-button>
<el-dm-button shape="square" aria-label="Add">
<svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 2v12M2 8h12" stroke="currentColor" />
</svg>
</el-dm-button>
属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
variant | 字符串 | primary | 按钮变体 |
size | 字符串 | md | 按钮大小 |
shape | 字符串 | —— 说 | 可选形状:圆形或平方形 |
disabled | 布尔 | false | 禁用按钮 |
type | 字符串 | button | 按钮类型( 按钮、 提交、 重置) |
loading | 布尔 | false | 显示装入旋转器 |
aria-label | 字符串 | —— 说 | 只用于图标按钮的可访问名称 |
aria-labelledby | 字符串 | —— 说 | 主机 DOM 树上标签元素的标识 |
槽数
| 槽 | 说明 |
|---|---|
| (默认) | 按钮内容 |
prefix | 主要案文之前的内容 |
suffix | 主文后的内容 |
CSS 组件
| 编 | 说明 |
|---|---|
button | 本地按钮元素 |
content | 内容包装 |
prefix | 前缀插槽包装器 |
suffix | 后缀槽包装器 |
spinner | 正在装入旋转器 |
CSS 自定义属性
| 财产 | 说明 |
|---|---|
--dm-button-padding-x | 水平粘贴 |
--dm-button-padding-y | 垂直粘贴 |
--dm-button-font-size | 字体大小 |
--dm-button-border-radius | 边界半径 |
实例
带有图标
<el-dm-button>
<span slot="prefix">🚀</span>
Launch
</el-dm-button>
装入状态
<el-dm-button loading>Submitting...</el-dm-button>
可访问图标按钮
设定 aria-label 按钮。 标签与本地按钮同步,
包括渲染后所作的修改.
<el-dm-button aria-label="Remove email">
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M5 5L19 19M19 5L5 19" />
</svg>
</el-dm-button>
<span id="remove-email-label">Remove email</span>
<el-dm-button aria-labelledby="remove-email-label">×</el-dm-button>
aria-labelledby 解析主机文档中的ID或包含阴影根并取出
优先于 aria-label 当目标存在时。 支持 ARIA 元素引用的浏览器
直接使用引用元素; 老浏览器使用其文本内容或 aria-label。 。 。 .
标签文本更改和替换标签元素是同步的. 没有两个属性,
时间档内容提供了无障碍名称.
提交表单
<form>
<el-dm-button type="submit">Submit Form</el-dm-button>
</form>
许可证
麻省理工学院