Skip to content

Title 标题 4.4.0

up-title 组件用于展示标题文本,通常用于页面区块标题,提供默认的前缀标识样式。

平台差异说明

|App(vue)|App(uvue/uni-app-x)|App(nvue)|H5|小程序| |:-😐:-😐:-😐:-😐:-😐:-😐 |√|√|√|√|

基本使用

通过默认插槽设置标题内容:

html
<up-title>这里是标题</up-title>

自定义前缀

使用 [prefix] 插槽自定义前缀标识:

html
<up-title>
  <template #prefix>
    <view class="custom-prefix">◆</view>
  </template>
  带自定义前缀的标题
</up-title>

组合使用

html
<up-title class="custom-title">
  <up-icon name="bell" size="18"></up-icon>
  带图标的标题
</up-title>

右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

API

Props

参数说明类型默认值可选值
-当前组件无props---

Slots

名称说明
default标题文本内容
prefix标题前缀内容

Event

事件名说明回调参数
-当前组件无事件-

### 组件特点说明:
1. **简洁性**:组件仅包含基础标题展示能力,通过 [prefix]插槽支持自定义前缀
2. **样式定制**:
   - 默认前缀样式通过 `.u-title-prefix` 类控制(宽度4px/高度18px/主色背景)
   - 可通过覆盖 `up-title` 类实现整体样式定制
3. **无状态**:组件不包含业务逻辑,仅为展示型组件
4. **跨平台**:兼容所有 uni-app 支持平台