Collapse 折叠面板

通过折叠面板收纳内容区域

基础用法

基础用法

我是标题

测试

我是标题123

xuran

<template>
	<LiCollapse>
		<LiCollapseItem title="我是标题">测试</LiCollapseItem>
		<LiCollapseItem title="我是标题123">xuran </LiCollapseItem>
	</LiCollapse>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

手风琴

使用accordion属性

我是标题

测试

我是标题123

xuran

<template>
	<LiCollapse accordion>
		<LiCollapseItem title="我是标题">测试</LiCollapseItem>
		<LiCollapseItem title="我是标题123">xuran </LiCollapseItem>
	</LiCollapse>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

插槽

我是标题0

我是内容0

我是标题1

我是内容1

我是标题2

我是内容2

我是标题3

我是内容3

我是标题4

我是内容4

<template>
	<LiCollapse>
		<LiCollapseItem v-for="(_, ind) in new Array(5).fill(0)">
			<template #title>
				<div style="display: flex; align-items: center">
					<img
						style="width: 24px; height: 24px; display: inline"
						src="https://s3.bmp.ovh/imgs/2024/08/28/136ab813ae9e0e5f.png"
					/>
					<span>我是标题{{ ind }}</span>
				</div>
			</template>
			<template #default> 我是内容{{ ind }} </template>
		</LiCollapseItem>
	</LiCollapse>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

Collapse Attributes

参数	说明	类型	可选值	默认值
accordion	手风琴模式	boolean		false

Collapse Slots

插槽名	说明
-	内容
title	标题