@daflow-ui/ui-collapse

@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