@duskmoon-dev/el-stepper (日语)
用Web组件构建的分步指标部分.
安装
bun add @duskmoon-dev/el-stepper
使用量
自动注册
import '@duskmoon-dev/el-stepper/register';
<el-dm-stepper current="1"></el-dm-stepper>
手工登记
import { ElDmStepper, register } from '@duskmoon-dev/el-stepper';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-stepper', ElDmStepper);
通过 JavaScript 设置步骤
const stepper = document.querySelector('el-dm-stepper');
stepper.steps = [
{ label: 'Account', description: 'Create your account' },
{ label: 'Profile', description: 'Add profile details' },
{ label: 'Review', description: 'Review and submit' },
];
方向
| 方向 | 说明 |
|---|
horizontal | 水平布局( 默认) |
vertical | 垂直布局 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
current | number | 0 | 当前步骤指数(基于0) |
orientation | string | 'horizontal' | 布局方向 |
color | string | 'primary' | 颜色变体 |
clickable | boolean | false | 允许点击来导航 |
CSS 组件
| 编 | 说明 |
|---|
stepper | 脚步容器 |
step | 每个步骤元素 |
indicator | 步号/icon |
content | 步骤内容包装 |
label | 步骤标签 |
description | 步骤说明 |
connector | 台阶之间的线条 |
活动
| 活动 | 细节 | 说明 |
|---|
change | { step, index } | 步数变化时被解除 |
实例
基础
<el-dm-stepper id="stepper" current="0"></el-dm-stepper>
<script>
document.querySelector('#stepper').steps = [
{ label: 'Step 1' },
{ label: 'Step 2' },
{ label: 'Step 3' },
];
</script>
有说明
stepper.steps = [
{ label: 'Details', description: 'Enter your information' },
{ label: 'Payment', description: 'Choose payment method' },
{ label: 'Confirm', description: 'Review your order' },
];
垂直方向
<el-dm-stepper orientation="vertical"></el-dm-stepper>
可点击步骤
<el-dm-stepper clickable></el-dm-stepper>
<el-dm-stepper id="stepper" current="0"></el-dm-stepper>
<div>
<el-dm-button id="prev">Previous</el-dm-button>
<el-dm-button id="next">Next</el-dm-button>
</div>
<script>
const stepper = document.querySelector('#stepper');
stepper.steps = [
{ label: 'Step 1' },
{ label: 'Step 2' },
{ label: 'Step 3' },
];
document.querySelector('#prev').addEventListener('click', () => {
if (stepper.current > 0) stepper.current--;
});
document.querySelector('#next').addEventListener('click', () => {
if (stepper.current < stepper.steps.length - 1) stepper.current++;
});
</script>
<el-dm-stepper id="wizard" current="0"></el-dm-stepper>
<div id="step-content">
<!-- Step content changes based on current step -->
</div>
<script>
const stepper = document.querySelector('#wizard');
const content = document.querySelector('#step-content');
stepper.steps = [
{ label: 'Personal', description: 'Basic info' },
{ label: 'Contact', description: 'Contact details' },
{ label: 'Finish', description: 'Complete' },
];
stepper.addEventListener('change', (e) => {
// Update content based on step
loadStepContent(e.detail.index);
});
</script>
许可证
麻省理工学院