@daflow-ui/ui-collapse

基于 Ark UI Collapsible 封装的折叠面板组件，支持 v-model、手风琴模式、禁用状态与自定义标题。

Installation

pnpm add @daflow-ui/ui-collapse

Usage

全局引入样式（在 main.ts 中）：

import '@daflow-ui/ui-collapse/style.css';

在组件中使用：

<script setup lang="ts">
import { ref } from 'vue';
import { DfCollapse, DfCollapseItem } from '@daflow-ui/ui-collapse';

const activeNames = ref(['1']);
</script>

<template>
  <DfCollapse v-model="activeNames">
    <DfCollapseItem name="1" title="一致性 Consistency">
      与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念
    </DfCollapseItem>
    <DfCollapseItem name="2" title="反馈 Feedback">
      控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作
    </DfCollapseItem>
  </DfCollapse>
</template>

自定义标题

<template>
  <DfCollapse v-model="activeNames">
    <DfCollapseItem name="1">
      <template #title>
        <span style="color: #409eff">自定义标题</span>
      </template>
      内容
    </DfCollapseItem>
  </DfCollapse>
</template>

API

DfCollapse Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string \| number \| Array<string \| number> | [] | 当前激活的面板，手风琴模式下为单个值 | | accordion | boolean | false | 是否为手风琴模式（每次只能展开一个面板） |

DfCollapse Events

| 事件 | 参数 | 说明 | |------|------|------| | update:modelValue | (value: CollapseModelValue) | v-model 更新事件 | | change | (value: CollapseModelValue) | 当前激活面板改变时触发 |

DfCollapseItem Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | name | string \| number | - | 唯一标识符 | | title | string | - | 面板标题 | | disabled | boolean | false | 是否禁用该面板 |

DfCollapseItem Slots

| 插槽名 | 说明 | |--------|------| | default | 面板内容 | | title | 自定义标题 |

Development

Install dependencies

pnpm install

Start playground (at monorepo root)

cd ../..  # 回到 monorepo 根目录
pnpm dev  # 启动统一 playground，自动发现组件

组件会自动出现在 playground 导航中（通过 dev/index.vue）。

Build

pnpm build

Type check

pnpm typecheck

Lint

pnpm lint
pnpm lint:fix

License

MIT