@duskmoon-dev/el-accordion (日语)
用Web组件建造的相撞手风琴组件.
安装
bun add @duskmoon-dev/el-accordion
使用量
自动注册
import '@duskmoon-dev/el-accordion/register';
<el-dm-accordion>
<el-dm-accordion-item label="Section 1">
Content for section 1
</el-dm-accordion-item>
<el-dm-accordion-item label="Section 2">
Content for section 2
</el-dm-accordion-item>
</el-dm-accordion>
手工登记
import { ElDmAccordion, ElDmAccordionItem, register } from '@duskmoon-dev/el-accordion';
// Register with default tag names
register();
// Or register with custom tag names
customElements.define('my-accordion', ElDmAccordion);
customElements.define('my-accordion-item', ElDmAccordionItem);
属性(el-dm-accordion)
| 属性 | 类型 | 默认 | 说明 |
|---|
multiple | boolean | false | 允许打开多个项目 |
value | string | - 说吧 | 目前开放的项目 |
属性(el-dm-accordion-项目)
| 属性 | 类型 | 默认 | 说明 |
|---|
label | string | '' | 项目标题标签 |
value | string | - 说吧 | 项目值( 如果未设定则自动生成) |
disabled | boolean | false | 禁用项目 |
open | boolean | false | 是否打开此项目 |
CSS 部件(el-dm-accordion)
活动
| 活动 | 细节 | 说明 |
|---|
change | { value, openItems } | 当打开的项目更改时被解除 |
实例
基础
<el-dm-accordion>
<el-dm-accordion-item label="What is this?">
This is an accordion component.
</el-dm-accordion-item>
<el-dm-accordion-item label="How does it work?">
Click on the headers to expand/collapse.
</el-dm-accordion-item>
</el-dm-accordion>
多个打开
<el-dm-accordion multiple>
<el-dm-accordion-item label="Section 1">Content 1</el-dm-accordion-item>
<el-dm-accordion-item label="Section 2">Content 2</el-dm-accordion-item>
<el-dm-accordion-item label="Section 3">Content 3</el-dm-accordion-item>
</el-dm-accordion>
默认打开
<el-dm-accordion>
<el-dm-accordion-item label="Open by default" open>
This section is open by default.
</el-dm-accordion-item>
<el-dm-accordion-item label="Closed">
This section is closed.
</el-dm-accordion-item>
</el-dm-accordion>
禁用项目
<el-dm-accordion>
<el-dm-accordion-item label="Normal">Content</el-dm-accordion-item>
<el-dm-accordion-item label="Disabled" disabled>
Can't open this
</el-dm-accordion-item>
</el-dm-accordion>
FAQ 示例
<el-dm-accordion>
<el-dm-accordion-item label="How do I get started?">
Install the package and import the component.
</el-dm-accordion-item>
<el-dm-accordion-item label="Is it accessible?">
Yes, it follows ARIA accordion patterns.
</el-dm-accordion-item>
<el-dm-accordion-item label="Can I style it?">
Yes, use CSS custom properties and parts.
</el-dm-accordion-item>
</el-dm-accordion>
许可证
麻省理工学院