Section 区块标题

17:06

说明

区块标题：左侧是竖条 + 主标题（title），右侧是副标题（sub-title，不传时取内置「更多」文案）与箭头，用于引导用户「查看更多」。点击右侧区域触发 click。

兼容性

平台	支持情况
App	✅ 支持（原生 text 不继承父 view 的 color / font-size，组件已把字体样式写在 text 上；自定义样式时同样需直接写在 text 上）
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

竖条 + 主标题 + 右侧「更多」与箭头；点击右侧触发 click。

查看源码

<template>
    <ux-section title="章节标题" @click="onClick" />
</template>

<script setup lang="uts">
const onClick = () => {
    uni.showToast({ title: '点击了更多', icon: 'none' });
};
</script>

隐藏竖条 show-line

show-line=false 隐藏左侧竖条（column-line 图标）。

查看源码

<template>
    <ux-section title="章节标题" :show-line="false" />
</template>

隐藏箭头 arrow

arrow=false 隐藏右侧箭头，保留副标题。

查看源码

<template>
    <ux-section title="章节标题" :arrow="false" />
</template>

自定义副标题 sub-title

sub-title 覆盖默认「更多」文案，示例为「查看全部」。

查看源码

<template>
    <ux-section title="章节标题" sub-title="副标题文字" />
</template>

隐藏右侧 right

right=false 且未传 right 插槽时，整个右侧区域不渲染。

查看源码

<template>
    <ux-section title="章节标题" :right="false" />
</template>

右侧插槽 right slot

right 插槽替换右侧默认内容（副标题与箭头），示例放入自定义文字。

查看源码

<template>
    <ux-section title="章节标题">
        <template #right>
            <text class="slot-text">自定义右侧</text>
        </template>
    </ux-section>
</template>

<style scoped>
.slot-text {
    color: #2979ff;
}
</style>

自定义字号 font-size

font-size=20 放大主标题，竖条图标与间距按比例（1.25 倍 / 0.4 倍）同步变化。

查看源码

<template>
    <ux-section title="章节标题" :font-size="20" />
</template>

不加粗 bold

bold=false 时主标题取消加粗。

查看源码

<template>
    <ux-section title="章节标题" :bold="false" />
</template>

自定义颜色

color / sub-color / line-color 分别设置主标题、副标题与左侧竖条的颜色。

查看源码

<template>
    <ux-section title="章节标题" color="#2979ff" sub-color="#19be6b" line-color="#f56c6c" />
</template>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
title	标题信息	string	''	-
subTitle	右边副标题内容	string	''	-
right	是否显示右边的内容	boolean	true	-
fontSize	主标题的字体大小	string | number	DEFAULT_FONT_SIZE	-
bold	主标题是否加粗	boolean	true	-
color	主标题的颜色	string	''	-
subColor	右边副标题的颜色	string	''	-
showLine	是否显示左边的竖条	boolean	true	-
lineColor	左边竖线的颜色	string	''	-
arrow	是否显示右边箭头	boolean	true	-

Events

事件名	说明	回调参数	版本
click	组件右侧内容被点击时触发，用于跳转「更多」	-	-

Slots

插槽名	说明	版本
right	替换右侧默认内容（副标题与箭头）	-

注意事项

1. click 只在右侧区域被点击时触发（用于跳转「更多」），左侧标题区不触发。
2. 右侧区域在 right=true 或传入 right 插槽时渲染；right=false 且无插槽时整体隐藏。
3. 传入 right 插槽后，默认的副标题与箭头都会被替换。
4. sub-title 为空时回退到组件内置的多语言文案（中文为「更多」）。
5. 左侧竖条是 column-line 图标，尺寸为主标题字号的 1.25 倍、与标题的间距为字号的 0.4 倍；show-line=false 可隐藏。
6. App 端原生 text 不继承父 view 的 color / font-size，自定义标题样式需直接写在 text 上。