Section Title

17:06

Description

A section header: a vertical bar plus the main title on the left, and a sub-title (falling back to the built-in "More" text) with an arrow on the right, guiding users to "view more". Tapping the right area emits click.

Compatibility

Platform	Support
App	✅ Supported (native text does not inherit color / font-size from the parent view; the component sets font styles directly on the text, and custom styling must do the same)
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Basic Usage

Vertical bar + main title + "More" and an arrow on the right; tapping the right side emits click.

View source

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

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

Hide Vertical Bar (show-line)

show-line=false hides the left vertical bar (the column-line icon).

View source

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

Hide Arrow (arrow)

arrow=false hides the right arrow while keeping the subtitle.

View source

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

Custom Subtitle (sub-title)

sub-title overrides the default "More" text; here "View All".

View source

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

Hide Right Side (right)

With right=false and no right slot, the whole right area is not rendered.

View source

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

Right Slot (right slot)

The right slot replaces the default right-side content (subtitle and arrow); the example puts custom text there.

View source

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

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

Custom Font Size (font-size)

font-size=20 enlarges the main title; the vertical bar icon and its spacing scale accordingly (1.25× / 0.4×).

View source

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

Not Bold (bold)

bold=false removes the bold weight from the main title.

View source

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

Custom Color

color / sub-color / line-color set the main title, subtitle and left vertical bar colors respectively.

View source

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

API

Props

Property	Description	Type	Default	Version
customStyle	Custom root element style	UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
title	Title text	string	''	-
subTitle	Subtitle content on the right	string	''	-
right	Whether to show the content on the right	boolean	true	-
fontSize	Font size of the main title	string | number	DEFAULT_FONT_SIZE	-
bold	Whether the main title is bold	boolean	true	-
color	Color of the main title	string	''	-
subColor	Color of the right subtitle	string	''	-
showLine	Whether to show the vertical bar on the left	boolean	true	-
lineColor	Color of the left vertical bar	string	''	-
arrow	Whether to show the arrow on the right	boolean	true	-

Events

Event	Description	Params	Version
click	Fires when the right side of the component is tapped, used to navigate to "view more"	-	-

Slots

Slot	Description	Version
right	Replaces the default right-side content (subtitle and arrow)	-

Notes

1. click fires only when the right area is tapped (used to navigate to "view more"); tapping the left title area does not trigger it.
2. The right area renders when right=true or a right slot is passed; with right=false and no slot it is hidden entirely.
3. Once a right slot is passed, the default subtitle and arrow are both replaced.
4. When sub-title is empty it falls back to the component's built-in localized text ("More" in Chinese).
5. The left vertical bar is a column-line icon whose size is 1.25× the main title font size, with a 0.4× gap to the title; show-line=false hides it.
6. On App, native text does not inherit color / font-size from the parent view, so custom title styles must be set directly on the text.