tanxin/App.k12.Parents
1
0
Fork 0
Code Pull Requests Actions Releases Activity

Initial commit

Browse Source
This commit is contained in:
tanxin
2026-10-29 10:08:39 +08:00
commit 4c6243a274
124 changed files with 17359 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uni_modules/uni-collapse-x/changelog.md
+4
View File
@@ -0,0 +1,4 @@
## 1.0.1（2026-05-14）
- 支持 content-wrap-class 定义内层容器样式
## 1.0.0（2026-05-07）
- 支持 uni-collapse 组件
uni_modules/uni-collapse-x/components/common.ts
+3
View File
@@ -0,0 +1,3 @@
export const UNI_COLLAPSE_REGISTER_CHILD = 'uni-collapse-register-child'
export const UNI_COLLAPSE_UNREGISTER_CHILD = 'uni-collapse-unregister-child'
export const UNI_COLLAPSE_CHILD_TOGGLE = 'uni-collapse-child-toggle'
uni_modules/uni-collapse-x/components/type.ts
+6
View File
@@ -0,0 +1,6 @@
export type ItemChildType = {
openCollapse?: (show: boolean) => void;
openOrClose: (show: boolean) => void;
is_open: Ref<boolean>;
elId: string;
};
uni_modules/uni-collapse-x/components/uni-collapse-item/uni-collapse-item.uvue
+739
View File
@@ -0,0 +1,739 @@
<template>
<view>
<view class="uni-collapse-item__title" :class="props.titleWrapClass" @click="openCollapse(!is_open)">
<view class="uni-collapse-item__title-main">
<slot name="title" :open="is_open" :disabled="props.disabled">
<text class="uni-collapse-item__title-text"
:class="[{'open--active': is_open, 'is-disabled': props.disabled}, props.titleClass, is_open ? props.titleOpenClass : '', props.disabled ? props.titleDisabledClass : '']">{{ props.title }}</text>
</slot>
</view>
<view class="down_arrow"
:class="[arrowPlatformClass, arrowStateClass, arrowDisabledClass, props.arrowClass, is_open ? props.arrowOpenClass : '', props.disabled ? props.arrowDisabledClass : '']"></view>
</view>
<view ref="contentWrapRef" class="uni-collapse-item__content"
:class="[transition_enabled ? 'content-transition--active' : '', box_is_open ? 'content-state-open' : 'content-state-close', contentWrapClass]">
<view ref="contentRef" class="uni-collapse-item__content-box"
:class="[transition_enabled ? 'content-transition--active' : '', box_is_open ? 'content-box-open' : 'content-box-close']">
<slot></slot>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
/**
* 折叠面板子项
* @description 折叠面板子项组件
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
import type { ItemChildType } from '../type.ts'
import {
UNI_COLLAPSE_REGISTER_CHILD,
UNI_COLLAPSE_UNREGISTER_CHILD,
UNI_COLLAPSE_CHILD_TOGGLE
} from '../common.ts'
defineOptions({
name: 'UniCollapseItem',
styleIsolation: 'app',
externalClasses: ['title-wrap-class', 'title-class', 'title-open-class', 'title-disabled-class', 'content-wrap-class', 'arrow-class', 'arrow-open-class', 'arrow-disabled-class']
})
type Props = {
/**
* @description 折叠项标题文字
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
title? : string,
/**
* @description 是否默认展开
* @default false
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
open? : boolean,
/**
* @description 是否禁用，禁用后点击标题不会展开或收起
* @default false
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
disabled? : boolean,
/**
* @description 标题行（整行容器）的样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
titleWrapClass? : string.ClassString,
/**
* @description 标题文字的基础样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
titleClass? : string.ClassString,
/**
* @description 展开状态下叠加到标题文字的样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
titleOpenClass? : string.ClassString,
/**
* @description 禁用状态下叠加到标题文字的样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
titleDisabledClass? : string.ClassString,
/**
* @description 内容外层容器的样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
contentWrapClass? : string.ClassString,
/**
* @description 箭头图标的基础样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
arrowClass? : string.ClassString,
/**
* @description 展开状态下叠加到箭头图标的样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
arrowOpenClass? : string.ClassString,
/**
* @description 禁用状态下叠加到箭头图标的样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
arrowDisabledClass? : string.ClassString
}
const props = withDefaults(defineProps<Props>(), {
title: '',
open: false,
disabled: false,
titleWrapClass: '',
titleClass: '',
titleOpenClass: '',
titleDisabledClass: '',
contentWrapClass: '',
arrowClass: '',
arrowOpenClass: '',
arrowDisabledClass: ''
})
const emit = defineEmits<{
change: [open: boolean]
}>()
defineSlots<{
default(props : {}) : any,
title(props : { open : boolean, disabled : boolean }) : any
}>()
let is_open = ref<boolean>(props.open)
let box_is_open = ref<boolean>(props.open)
let transition_enabled = ref<boolean>(false)
let contentWrapRef = ref<UniViewElement | null>(null)
let contentRef = ref<UniViewElement | null>(null)
const elId = ref(`uni_collapse_item_${Math.ceil(Math.random() * 10e5).toString(36)}`)
const contentTransitionDelay = 16
let enableTransitionTimer = 0
let isAndroidArrowRenderFix = false
// #ifdef APP-ANDROID
// Android arrow fix:
// keep transform rotation, but avoid animating border colors for border-drawn arrows.
// Keep split border-* properties here. Do not use border shorthand with var().
isAndroidArrowRenderFix = true
// #endif
const registerChild = inject<((child : ItemChildType) => void) | null>(UNI_COLLAPSE_REGISTER_CHILD, null)
const unregisterChild = inject<((elId : string) => void) | null>(UNI_COLLAPSE_UNREGISTER_CHILD, null)
const collapseToggle = inject<((elId : string) => void) | null>(UNI_COLLAPSE_CHILD_TOGGLE, null)
const arrowPlatformClass = computed(() : string => {
return isAndroidArrowRenderFix ? 'down_arrow--android-fix' : ''
})
const arrowStateClass = computed(() : string => {
if (!is_open.value) {
return ''
}
return isAndroidArrowRenderFix ? 'down_arrow--android-active' : 'down_arrow--active'
})
const arrowDisabledClass = computed(() : string => {
return props.disabled ? 'down_arrow--disabled' : ''
})
function clearEnableTransitionTimer() {
if (enableTransitionTimer != 0) {
clearTimeout(enableTransitionTimer)
enableTransitionTimer = 0
}
}
function openOrClose(open : boolean) {
box_is_open.value = open
}
function applyOpenState(open : boolean, syncSiblings : boolean, triggerEmit : boolean) {
if (is_open.value == open && box_is_open.value == open) {
return
}
if (open && syncSiblings && collapseToggle != null) {
collapseToggle(elId.value)
}
is_open.value = open
openOrClose(open)
if (triggerEmit) {
emit('change', open)
}
}
function openCollapse(open : boolean) {
if (props.disabled) {
return
}
applyOpenState(open, true, true)
}
onMounted(() => {
if (registerChild != null) {
const child : ItemChildType = {
is_open,
elId: elId.value,
openOrClose
}
registerChild(child)
}
if (is_open.value && collapseToggle != null) {
collapseToggle(elId.value)
}
nextTick(() => {
enableTransitionTimer = setTimeout(() => {
enableTransitionTimer = 0
transition_enabled.value = true
}, contentTransitionDelay)
})
})
onUnmounted(() => {
clearEnableTransitionTimer()
if (unregisterChild != null) {
unregisterChild(elId.value)
}
})
watch(() : boolean => props.open, (value : boolean) => {
applyOpenState(value, false, false)
})
defineExpose({
is_open,
openOrClose,
openCollapse
})
</script>
<style>
.uni-collapse-item__title {
flex-direction: row;
align-items: center;
padding: 12px 18px;
background-color: #ffffff;
}
.uni-collapse-item__title-main {
flex: 1;
flex-direction: row;
align-items: center;
}
.uni-collapse-item__title-text {
flex: 1;
font-size: 14px;
font-weight: 400;
color: #333333;
}
.open--active {
opacity: 0.78;
}
.is-disabled {
opacity: 0.45;
}
.down_arrow {
width: 8px;
height: 8px;
margin-left: 12px;
margin-top: -3px;
transform: rotate(45deg);
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
transition-property: transform, border-right-color, border-bottom-color;
transition-duration: 150ms;
}
.down_arrow--active {
margin-top: 0px;
transform: rotate(-135deg);
}
.down_arrow--android-fix {
transition-property: transform;
}
.down_arrow--android-active {
margin-top: 0px;
transform: rotate(-135deg);
}
.down_arrow--disabled {
opacity: 0.45;
}
.uni-collapse-item__content {
overflow: hidden;
width: 100%;
max-height: 0px;
background-color: #ffffff;
}
.uni-collapse-item__content-box {
width: 100%;
opacity: 0;
transform: translateY(-8px);
}
.content-state-open {
max-height: 2000px;
}
.content-state-close {
max-height: 0px;
}
.content-box-open {
opacity: 1;
transform: translateY(0px);
}
.content-box-close {
opacity: 0;
transform: translateY(-8px);
}
.content-transition--active {
transition-duration: 180ms;
transition-timing-function: ease;
}
/* 不要恢复旧的“运行时测量高度 + 内联 style.height”方案。
该方案在 HarmonyOS 上会出现默认展开时外层容器仍为 0 高度，导致内容不显示。 */
.uni-collapse-item__content {
transition-property: max-height;
}
.uni-collapse-item__content-box {
transition-property: opacity, transform;
}
</style>
uni_modules/uni-collapse-x/components/uni-collapse/uni-collapse.uvue
+129
View File
@@ -0,0 +1,129 @@
<template>
<view>
<slot></slot>
</view>
</template>
<script lang="ts" setup>
/**
* 折叠面板
* @description 折叠面板组件
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
import type { ItemChildType } from '../type.ts'
import {
UNI_COLLAPSE_REGISTER_CHILD,
UNI_COLLAPSE_UNREGISTER_CHILD,
UNI_COLLAPSE_CHILD_TOGGLE
} from '../common.ts'
defineOptions({
name: 'UniCollapse'
})
type Props = {
/**
* @description 是否开启手风琴模式，开启后同一时间仅允许一个子项展开
* @default true
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
accordion? : boolean
}
const props = withDefaults(defineProps<Props>(), {
accordion: true
})
let childNodes = [] as ItemChildType[]
function registerChild(child : ItemChildType) {
const existIndex = childNodes.findIndex((item : ItemChildType) : boolean => item.elId == child.elId)
if (existIndex == -1) {
childNodes.push(child)
}
}
function unregisterChild(elId : string) {
childNodes = childNodes.filter((item : ItemChildType) : boolean => item.elId != elId)
}
function toggle(elId : string) {
if (props.accordion && childNodes.length > 0) {
childNodes.forEach((item : ItemChildType) => {
const isOpen = item.is_open.value as boolean
if (isOpen && item.elId != elId) {
item.is_open.value = false
item.openOrClose(false)
}
})
}
}
provide(UNI_COLLAPSE_REGISTER_CHILD, registerChild)
provide(UNI_COLLAPSE_UNREGISTER_CHILD, unregisterChild)
provide(UNI_COLLAPSE_CHILD_TOGGLE, toggle)
</script>
uni_modules/uni-collapse-x/package.json
+74
View File
@@ -0,0 +1,74 @@
{
"id": "uni-collapse-x",
"displayName": "uni-collapse 折叠面板",
"version": "1.0.1",
"description": "Collapse 折叠面板组件，可自定义折叠面板的展开和收起。",
"isExt": true,
"extUrl": "https://ext.dcloud.net.cn/plugin?id=27899",
"keywords": [
"uni-ui",
"uniui",
"collapse",
"折叠面板",
"uni-app-x"
],
"engines": {
"HBuilderX": "",
"uni-app": "",
"uni-app-x": "^5.07"
},
"repository": "https://gitcode.com/dcloud/uni-ui-x",
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"type": "component-vue",
"darkmode": "x",
"i18n": "x",
"widescreen": "x",
"npmurl": ""
},
"uni_modules": {
"encrypt": [],
"dependencies": [],
"platforms": {
"cloud": {
"tcb": "x",
"aliyun": "x",
"alipay": "x"
},
"client": {
"uni-app-x": {
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"android": "√",
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√"
}
}
}
}
}
}
uni_modules/uni-collapse-x/readme.md
+96
View File
@@ -0,0 +1,96 @@
折叠面板组件，包含：
- `uni-collapse`：父容器
- `uni-collapse-item`：子面板
一个折叠面板组件可以包含若干uni-collapse-item。每个uni-collapse-item包括顶部标题栏和通过slot传入的内容区。
### 基本用法
```html
<uni-collapse :accordion="true">
<uni-collapse-item title="标题 1" :open="true">
<view><text>内容 1</text></view>
</uni-collapse-item>
<uni-collapse-item title="标题 2">
<view><text>内容 2</text></view>
</uni-collapse-item>
</uni-collapse>
```
uni-collapse-item的标题栏的自定义：
- 标题栏容器可通过 `title-wrap-class` 自定义背景等容器样式。
- 标题栏支持title属性，可通过title-class自定义文字样式。
- 标题展开态可通过 `title-open-class` 自定义激活文字样式。组件默认使用透明度区分状态，便于外部继续覆盖文字颜色。
- 标题禁用态可通过 `title-disabled-class` 自定义禁用文字样式。若同时存在展开态和禁用态，以禁用态为最终状态。
- 内容外层容器可通过 `content-wrap-class` 自定义背景等容器样式。
- 标题栏右边默认带有箭头，可通过arrow-class自定义箭头样式。该箭头为一个view包括2个直角边的边框，然后旋转而成。
- 箭头展开态和禁用态可分别通过 `arrow-open-class`、`arrow-disabled-class` 覆盖。组件默认也使用透明度区分状态，便于外部继续覆盖箭头颜色。
- 如果完全不想要默认包含的title和arrow，也可以传入一个名为title的具名插槽来替换。
### 具名插槽标题
```html
<uni-collapse-item>
<template #title="{ open, disabled }">
<view class="custom-title">
<view class="custom-title-icon"></view>
<text class="custom-title-text">{{ open ? '已展开' : '未展开' }}</text>
</view>
</template>
<view><text>自定义标题内容</text></view>
</uni-collapse-item>
```
### externalClass
```html
<uni-collapse-item
title="自定义样式"
title-wrap-class="my-title-wrap-class"
title-class="my-title-class"
title-open-class="my-title-open-class"
content-wrap-class="my-content-wrap-class"
arrow-class="my-arrow-class"
arrow-open-class="my-arrow-open-class"
>
<view><text>内容区域</text></view>
</uni-collapse-item>
```
### Slots
#### uni-collapse-item
| 插槽名 | 说明 | 插槽参数 |
| --- | --- | --- |
| default | 面板内容 | - |
| title | 自定义标题区域 | `open: boolean`、`disabled: boolean` |
### Events
#### uni-collapse-item
| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 面板展开状态变化时触发 | `open: boolean` |
### Expose
#### uni-collapse-item
| 方法名 | 说明 |
| --- | --- |
| openCollapse(open: boolean) | 执行展开/收起，会遵循 `disabled` 和手风琴逻辑 |
| openOrClose(open: boolean) | 直接切换内容显示状态 |
### 暗黑模式适配
建议通过组件 `class` 和 externalClass 组合传入暗色样式：
- 用组件 `class` 统一控制根节点和内容区等外层视觉。
- 用 `title-wrap-class`、`title-class`、`title-open-class`、`content-wrap-class`、`arrow-class`、`arrow-open-class` 等 externalClass 覆盖标题区、内容外层和箭头样式。
- 默认展开态和禁用态主要通过透明度表达，减少颜色覆盖时的交叉冲突。
### 注意
- 本组件在Android上需HBuilderX 5.09+。在低版本上箭头变颜色+旋转时，在Android上会消失