@h3/thinking-ui

# Accordion 手风琴

# 使用指南

可以折叠/展开的内容区域。

  • 对复杂区域进行分组和隐藏。
  • 通常，一次只允许单个内容区域展开；特殊情况，多个内容区域可以同时展开。

# 与h3-mobile-vue组件的区别以及迁移

通过对组件梳理，进行重构及统一风格及UI。若要做迁移请参考

弃用了H3AccordionItemChild

H3AccordionItem只允许在H3Accordion内使用，H3Accordion可以嵌套H3Accordion。

H3Accordion变化

  1. 弃用的props：-
  2. 替换的props：
    • defaultIndex => value
    • multi => multiple
  3. 新增的props：intoView

H3AccordionItem变化

  1. 弃用的props：itemIndex
  2. 替换的props：
    • iconClass => icon
  3. 新增的props：iconRotate
  4. 新增的event：expand

# 代码演示

查看代码

# API - H3Accordion

# Props - H3Accordion

属性 说明 类型 默认值
value 要展开的H3AccordionItem的下标，若为字符串则为H3AccordionItem的name。multiple=true则为array，v-model绑定值 string|number|array -1
multiple 是否可以同时展开多个面板 boolean false
intoView 是否展开后滚动到显示区域 boolean true

# Events - H3Accordion

事件名 说明 参数
input v-model绑定事件 value:number|string

# API - H3AccordionItem

# Props - H3AccordionItem

属性 说明 类型 默认值
title 标题名称 string 无
name item标识 string 无
icon 指示图标 例如down|right string 'right'
iconRotate 指示图标 在展开后旋转角度 默认90 若为down默认180 number 90
position 指示图标 位置 left|right string 'left'
disabled 禁止手动展开收起 boolean false

# Events - H3AccordionItem

事件名 说明 参数
expand 显示或隐藏时触发 value:boolean

# Slots - H3AccordionItem

插槽名 说明
title 对标题处插槽，不包含指示图标

← Calendar 日历 →