低代码高性能原生UI框架Collapse 折叠面板
组件类型：UxCollapseComponentPublicInstance、UxCollapseItemComponentPublicInstance
支持手风琴模式，可禁用单项，可显示下划线。需搭配 ux-collapse-item 使用
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
UxCollapseComponentPublicInstance
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| accordion | Boolean | true | 是否开启手风琴效果 |
| color | String | - | 颜色 |
| darkColor | String | - | 深色 |
| size | Number | $ux.Conf.fontSize | 标题文字大小 |
| bold | Boolean | false | 标题文字加粗 |
| titleBackground | String | - | 标题背景颜色 |
| titleBackgroundDark | String | - | 深色 |
| background | String | - | 背景颜色 |
| backgroundDark | String | - | 深色 |
| border | Boolean | true | 显示下边框 |
| disabled | Boolean | false | 是否禁用 |
UxCollapseItemComponentPublicInstance
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String | - | 标题 |
| color | String | - | 颜色 |
| darkColor | String | - | 深色 |
| size | Number | $ux.Conf.fontSize | 标题文字大小 |
| bold | Boolean | false | 标题文字加粗 |
| titleBackground | String | - | 标题背景颜色 |
| titleBackgroundDark | String | - | 深色 |
| background | String | - | 背景颜色 |
| backgroundDark | String | - | 深色 |
| open | Boolean | false | 默认是否打开 |
| border | Boolean | true | 显示下边框 |
| disabled | Boolean | false | 是否禁用 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="折叠面板" :bold="true">
<ux-text text="支持手风琴模式，可禁用单项，可显示下划线"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="折叠面板" text="https://www.uxframe.cn/component/layout/collapse.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="非手风琴模式" :bold="true">
<ux-text text="支持默认打开、禁用单项" :mb="15"></ux-text>
<ux-collapse :accordion="false" :bold="true">
<ux-collapse-item title="uni-app x 是什么？" :open="true">
<ux-text :margin="[10, 15]" text="uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uni-app x 性能问题？" :disabled="true">
<ux-text :margin="[10, 15]" text="uni-app x 没有使用js和webview，它基于 uts 语言。在App端，uts在iOS编译为swift、在Android编译为kotlin，完全达到了原生应用的功能、性能。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uvue渲染引擎">
<ux-text :margin="[10, 15]" text="vue是一套基于uts的、兼容vue语法的、跨iOS和Android的、原生渲染引擎。uvue渲染引擎包括uts版的vue框架（组件、数据绑定...）、跨平台基础ui、css引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="自动化测试">
<ux-text :margin="[10, 15]" text="uni-app x 从源头重视产品质量，第一个版本就支持自动化测试。并为uni-app x产品编写了数十万行自动化测试例代码。"></ux-text>
</ux-collapse-item>
</ux-collapse>
</ux-card>
<ux-card direction="column" icon="arrowright" title="手风琴模式" :bold="true">
<ux-text text="支持手风琴模式" :mb="15"></ux-text>
<ux-collapse :accordion="true" :bold="true">
<ux-collapse-item title="uni-app x 是什么？">
<ux-text :margin="[10, 15]" text="uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uni-app x 性能问题？">
<ux-text :margin="[10, 15]" text="uni-app x 没有使用js和webview，它基于 uts 语言。在App端，uts在iOS编译为swift、在Android编译为kotlin，完全达到了原生应用的功能、性能。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uvue渲染引擎" :disabled="true">
<ux-text :margin="[10, 15]" text="vue是一套基于uts的、兼容vue语法的、跨iOS和Android的、原生渲染引擎。uvue渲染引擎包括uts版的vue框架（组件、数据绑定...）、跨平台基础ui、css引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="自动化测试">
<ux-text :margin="[10, 15]" text="uni-app x 从源头重视产品质量，第一个版本就支持自动化测试。并为uni-app x产品编写了数十万行自动化测试例代码。"></ux-text>
</ux-collapse-item>
</ux-collapse>
</ux-card>
<ux-card direction="column" icon="arrowright" title="不显示下划线" :bold="true">
<ux-text text="支持隐藏下划线" :mb="15"></ux-text>
<ux-collapse :accordion="true" :border="false">
<ux-collapse-item title="uni-app x 是什么？">
<ux-text :margin="[10, 15]" text="uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uni-app x 性能问题？">
<ux-text :margin="[10, 15]" text="uni-app x 没有使用js和webview，它基于 uts 语言。在App端，uts在iOS编译为swift、在Android编译为kotlin，完全达到了原生应用的功能、性能。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uvue渲染引擎">
<ux-text :margin="[10, 15]" text="vue是一套基于uts的、兼容vue语法的、跨iOS和Android的、原生渲染引擎。uvue渲染引擎包括uts版的vue框架（组件、数据绑定...）、跨平台基础ui、css引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="自动化测试">
<ux-text :margin="[10, 15]" text="uni-app x 从源头重视产品质量，第一个版本就支持自动化测试。并为uni-app x产品编写了数十万行自动化测试例代码。"></ux-text>
</ux-collapse-item>
</ux-collapse>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="折叠面板" :bold="true">
<ux-text text="支持手风琴模式，可禁用单项，可显示下划线"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="折叠面板" text="https://www.uxframe.cn/component/layout/collapse.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="非手风琴模式" :bold="true">
<ux-text text="支持默认打开、禁用单项" :mb="15"></ux-text>
<ux-collapse :accordion="false" :bold="true">
<ux-collapse-item title="uni-app x 是什么？" :open="true">
<ux-text :margin="[10, 15]" text="uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uni-app x 性能问题？" :disabled="true">
<ux-text :margin="[10, 15]" text="uni-app x 没有使用js和webview，它基于 uts 语言。在App端，uts在iOS编译为swift、在Android编译为kotlin，完全达到了原生应用的功能、性能。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uvue渲染引擎">
<ux-text :margin="[10, 15]" text="vue是一套基于uts的、兼容vue语法的、跨iOS和Android的、原生渲染引擎。uvue渲染引擎包括uts版的vue框架（组件、数据绑定...）、跨平台基础ui、css引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="自动化测试">
<ux-text :margin="[10, 15]" text="uni-app x 从源头重视产品质量，第一个版本就支持自动化测试。并为uni-app x产品编写了数十万行自动化测试例代码。"></ux-text>
</ux-collapse-item>
</ux-collapse>
</ux-card>
<ux-card direction="column" icon="arrowright" title="手风琴模式" :bold="true">
<ux-text text="支持手风琴模式" :mb="15"></ux-text>
<ux-collapse :accordion="true" :bold="true">
<ux-collapse-item title="uni-app x 是什么？">
<ux-text :margin="[10, 15]" text="uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uni-app x 性能问题？">
<ux-text :margin="[10, 15]" text="uni-app x 没有使用js和webview，它基于 uts 语言。在App端，uts在iOS编译为swift、在Android编译为kotlin，完全达到了原生应用的功能、性能。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uvue渲染引擎" :disabled="true">
<ux-text :margin="[10, 15]" text="vue是一套基于uts的、兼容vue语法的、跨iOS和Android的、原生渲染引擎。uvue渲染引擎包括uts版的vue框架（组件、数据绑定...）、跨平台基础ui、css引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="自动化测试">
<ux-text :margin="[10, 15]" text="uni-app x 从源头重视产品质量，第一个版本就支持自动化测试。并为uni-app x产品编写了数十万行自动化测试例代码。"></ux-text>
</ux-collapse-item>
</ux-collapse>
</ux-card>
<ux-card direction="column" icon="arrowright" title="不显示下划线" :bold="true">
<ux-text text="支持隐藏下划线" :mb="15"></ux-text>
<ux-collapse :accordion="true" :border="false">
<ux-collapse-item title="uni-app x 是什么？">
<ux-text :margin="[10, 15]" text="uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uni-app x 性能问题？">
<ux-text :margin="[10, 15]" text="uni-app x 没有使用js和webview，它基于 uts 语言。在App端，uts在iOS编译为swift、在Android编译为kotlin，完全达到了原生应用的功能、性能。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="uvue渲染引擎">
<ux-text :margin="[10, 15]" text="vue是一套基于uts的、兼容vue语法的、跨iOS和Android的、原生渲染引擎。uvue渲染引擎包括uts版的vue框架（组件、数据绑定...）、跨平台基础ui、css引擎。"></ux-text>
</ux-collapse-item>
<ux-collapse-item title="自动化测试">
<ux-text :margin="[10, 15]" text="uni-app x 从源头重视产品质量，第一个版本就支持自动化测试。并为uni-app x产品编写了数十万行自动化测试例代码。"></ux-text>
</ux-collapse-item>
</ux-collapse>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
</style><style lang="scss">
</style>