折叠面板

示例

设计语言

语言是合作的基础。在团队中工作,没有共同的语言,一群人不能共同有效地合作。同理,因为每个人都会有不同的心智模式去达成各自的目的,如果没有共同的设计语言,对界面元素的共同理解,那么我们很难通过协作输出协调一致并具备高可用性的产品。

拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式,或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解,基于共同的理解,参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。

当设计语言是通用知识时,它就成为一个强大的设计和协作工具,产品创建过程中便可停止专注于界面样式本身,而更多地关注用户。

KDL的价值
设计原则
基础用法

使用CollapseItem定义每一项,CollapseItemtitle属性是要展示的标题,disabled属性用来禁用该项,value属性是选中该项的取值,如果没有提供value属性,则默认会使用形如$0的索引字符串当作value。给Collapse添加value可以展开指定的CollapseItemCollapsevalueArray类型,可以使用v-model进行双向绑定

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
设计语言

语言是合作的基础。在团队中工作,没有共同的语言,一群人不能共同有效地合作。同理,因为每个人都会有不同的心智模式去达成各自的目的,如果没有共同的设计语言,对界面元素的共同理解,那么我们很难通过协作输出协调一致并具备高可用性的产品。

拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式,或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解,基于共同的理解,参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。

当设计语言是通用知识时,它就成为一个强大的设计和协作工具,产品创建过程中便可停止专注于界面样式本身,而更多地关注用户。

KDL的价值
设计原则
手风琴

添加accordion属性,可以实现类似手风琴的交互风格,即一次只能展开一项

手风琴风格的value依然是Array类型

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
设计语言
KDL的价值
设计原则
自定义标题

使用title扩展点,可以定义复杂的标题内容

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
设计语言详细说明

语言是合作的基础。在团队中工作,没有共同的语言,一群人不能共同有效地合作。同理,因为每个人都会有不同的心智模式去达成各自的目的,如果没有共同的设计语言,对界面元素的共同理解,那么我们很难通过协作输出协调一致并具备高可用性的产品。

拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式,或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解,基于共同的理解,参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。

当设计语言是通用知识时,它就成为一个强大的设计和协作工具,产品创建过程中便可停止专注于界面样式本身,而更多地关注用户。

KDL的价值
设计原则
箭头位置

默认情况下箭头展示在标题右边,某些情况下,如:你需要在标题后面添加说明文字,我们可能需要将箭头展示在左边。指定arrow属性为left即可

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
设计语言

语言是合作的基础。在团队中工作,没有共同的语言,一群人不能共同有效地合作。同理,因为每个人都会有不同的心智模式去达成各自的目的,如果没有共同的设计语言,对界面元素的共同理解,那么我们很难通过协作输出协调一致并具备高可用性的产品。

拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式,或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解,基于共同的理解,参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。

当设计语言是通用知识时,它就成为一个强大的设计和协作工具,产品创建过程中便可停止专注于界面样式本身,而更多地关注用户。

KDL的价值
设计原则
无边框样式

添加noBorder属性,可以展示无边框的简洁样式

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

Collapse

属性 说明 类型 默认值
value 当前展开的CollapseItem取值 Array undefined
accordion 是否展示手风琴风格 Boolean false
arrow 指定箭头位置 "right" | "left" "right"
noBorder 是否展示无边框的简洁样式 Boolean false

CollapseItem

属性 说明 类型 默认值
value 当前CollapseItem的取值,默认会使用$ + 索引的组合 String $${index}
title 标题内容 String | vNode undefined
disabled 是否禁用 Boolean false

扩展点

CollapseItem

名称 说明
title 扩展标题

事件

CollapseItem

事件名 说明 参数
show 展开时触发 CollapseItem实例
hide 收起时触发 CollapseItem实例