mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
236 lines
9.4 KiB
Markdown
236 lines
9.4 KiB
Markdown
# uni-title
|
||
|
||
## Instructions
|
||
|
||
组件名：uni-title
|
||
|
||
代码块： uTitle
|
||
|
||
点击下载&安装
|
||
|
||
### Syntax
|
||
|
||
- 使用 `<uni-title />`（或 `<uni-title></uni-title>`，当需要包裹子节点时）。
|
||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||
|
||
#### Properties
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| --- | --- | --- | --- |
|
||
| type | String | - | 标题类型，可选值 h1、h2、h3、h4、h5 ，章节标题字体会比正常字长字体粗，不指定 type 值，默认为上报统计数据 |
|
||
| title | String | - | 章节标题内容 |
|
||
| align | String | - | 对齐方式，可选值 left:左对齐；center:居中；right:右对齐； |
|
||
| color | String | - | 字体颜色 |
|
||
| stat | Boolean | - | 是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭 |
|
||
|
||
#### Events
|
||
|
||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-title.html`
|
||
|
||
#### Platform Compatibility
|
||
|
||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-title.html`
|
||
|
||
### Examples
|
||
|
||
### Example (Example 1)
|
||
|
||
```vue
|
||
<uni-title title="上报统计数据"></uni-title>
|
||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||
```
|
||
|
||
### Example (Example 2)
|
||
|
||
```html
|
||
<uni-title title="上报统计数据"></uni-title>
|
||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||
```
|
||
|
||
### Example (Example 3)
|
||
|
||
```vue
|
||
<template>
|
||
<view class="box">
|
||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||
</view>
|
||
</template>
|
||
<style>
|
||
.box {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### Example (Example 4)
|
||
|
||
```html
|
||
<template>
|
||
<view class="box">
|
||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||
</view>
|
||
</template>
|
||
<style>
|
||
.box {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### Example (Example 5)
|
||
|
||
```vue
|
||
<template>
|
||
<view class="uni-content">
|
||
<uni-card is-full :is-shadow="false">
|
||
<text class="uni-h6"> 章节标题，通常用于记录页面标题，使用当前组件在 uni-app 开启统计的情况下，将会自动统计页面标题.</text>
|
||
</uni-card>
|
||
<uni-section title="不同类型" type="line">
|
||
<view class="example-body">
|
||
<uni-title type="h1" title="h1 一级标题"></uni-title>
|
||
<uni-title type="h2" title="h2 二级标题"></uni-title>
|
||
<uni-title type="h3" title="h3 三级标题"></uni-title>
|
||
<uni-title type="h4" title="h4 四级标题"></uni-title>
|
||
<uni-title type="h5" title="h5 五级标题"></uni-title>
|
||
</view>
|
||
</uni-section>
|
||
|
||
<uni-section title="改变颜色" type="line">
|
||
|
||
<view class="example-body">
|
||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||
<uni-title type="h2" title="h2 二级标题" color="#2490ff"></uni-title>
|
||
<uni-title type="h3" title="h3 三级标题" color="#439ffc"></uni-title>
|
||
<uni-title type="h4" title="h4 四级标题" color="#60adfb"></uni-title>
|
||
<uni-title type="h5" title="h5 五级标题" color="#7db9f7"></uni-title>
|
||
</view>
|
||
</uni-section>
|
||
<uni-section title="对齐方式" type="line">
|
||
|
||
<view class="example-body">
|
||
<uni-title type="h1" title="h1 左对齐" align="left"></uni-title>
|
||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||
<uni-title type="h3" title="h3 右对齐" align="right"></uni-title>
|
||
<uni-title type="h4" title="h4 居中" align="center"></uni-title>
|
||
<uni-title type="h5" title="h5 左对齐" align="left"></uni-title>
|
||
</view>
|
||
</uni-section>
|
||
<uni-section title="组合示例" type="line">
|
||
|
||
<view class="example-body">
|
||
<view class="uni-box-head">
|
||
<uni-title type="h1" align="center" title="uni-app介绍"></uni-title>
|
||
</view>
|
||
<view class="uni-box">
|
||
<uni-title class="h3" type="h3" title="1 框架介绍"></uni-title>
|
||
</view>
|
||
<view class="uni-box">
|
||
<uni-title class="h4" type="h4" title="1.1 什么是uni-app"></uni-title>
|
||
</view>
|
||
<view>
|
||
<text
|
||
class="uni-text">uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。DCloud公司拥有370万开发者用户，旗下uni-app有5万+案例、900款插件、50+微信/qq群，并且被阿里小程序工具内置，开发者可以放心选择。</text>
|
||
</view>
|
||
<view class="uni-box">
|
||
<uni-title class="h4" type="h4" title="1.2 开发规范"></uni-title>
|
||
</view>
|
||
<view class="">
|
||
<uni-title class="h5" type="h5" color="#666" title="- 页面文件遵循 Vue 单文件组件 (SFC) 规范"></uni-title>
|
||
<uni-title class="h5" type="h5" color="#666" title="- 组件标签靠近小程序规范，详见uni-app 组件规范"></uni-title>
|
||
<uni-title class="h5" type="h5" color="#666"
|
||
title="- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范"></uni-title>
|
||
<uni-title class="h5" type="h5" color="#666" title="- 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期">
|
||
</uni-title>
|
||
<uni-title class="h5" type="h5" color="#666" title="- 为兼容多端运行，建议使用flex布局进行开发"></uni-title>
|
||
</view>
|
||
</view>
|
||
</uni-section>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
### Example (Example 6)
|
||
|
||
```html
|
||
<template>
|
||
<view class="uni-content">
|
||
<uni-card is-full :is-shadow="false">
|
||
<text class="uni-h6"> 章节标题，通常用于记录页面标题，使用当前组件在 uni-app 开启统计的情况下，将会自动统计页面标题.</text>
|
||
</uni-card>
|
||
<uni-section title="不同类型" type="line">
|
||
<view class="example-body">
|
||
<uni-title type="h1" title="h1 一级标题"></uni-title>
|
||
<uni-title type="h2" title="h2 二级标题"></uni-title>
|
||
<uni-title type="h3" title="h3 三级标题"></uni-title>
|
||
<uni-title type="h4" title="h4 四级标题"></uni-title>
|
||
<uni-title type="h5" title="h5 五级标题"></uni-title>
|
||
</view>
|
||
</uni-section>
|
||
|
||
<uni-section title="改变颜色" type="line">
|
||
|
||
<view class="example-body">
|
||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||
<uni-title type="h2" title="h2 二级标题" color="#2490ff"></uni-title>
|
||
<uni-title type="h3" title="h3 三级标题" color="#439ffc"></uni-title>
|
||
<uni-title type="h4" title="h4 四级标题" color="#60adfb"></uni-title>
|
||
<uni-title type="h5" title="h5 五级标题" color="#7db9f7"></uni-title>
|
||
</view>
|
||
</uni-section>
|
||
<uni-section title="对齐方式" type="line">
|
||
|
||
<view class="example-body">
|
||
<uni-title type="h1" title="h1 左对齐" align="left"></uni-title>
|
||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||
<uni-title type="h3" title="h3 右对齐" align="right"></uni-title>
|
||
<uni-title type="h4" title="h4 居中" align="center"></uni-title>
|
||
<uni-title type="h5" title="h5 左对齐" align="left"></uni-title>
|
||
</view>
|
||
</uni-section>
|
||
<uni-section title="组合示例" type="line">
|
||
|
||
<view class="example-body">
|
||
<view class="uni-box-head">
|
||
<uni-title type="h1" align="center" title="uni-app介绍"></uni-title>
|
||
</view>
|
||
<view class="uni-box">
|
||
<uni-title class="h3" type="h3" title="1 框架介绍"></uni-title>
|
||
</view>
|
||
<view class="uni-box">
|
||
<uni-title class="h4" type="h4" title="1.1 什么是uni-app"></uni-title>
|
||
</view>
|
||
<view>
|
||
<text
|
||
class="uni-text">uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。DCloud公司拥有370万开发者用户，旗下uni-app有5万+案例、900款插件、50+微信/qq群，并且被阿里小程序工具内置，开发者可以放心选择。</text>
|
||
</view>
|
||
<view class="uni-box">
|
||
<uni-title class="h4" type="h4" title="1.2 开发规范"></uni-title>
|
||
</view>
|
||
<view class="">
|
||
<uni-title class="h5" type="h5" color="#666" title="- 页面文件遵循 Vue 单文件组件 (SFC) 规范"></uni-title>
|
||
<uni-title class="h5" type="h5" color="#666" title="- 组件标签靠近小程序规范，详见uni-app 组件规范"></uni-title>
|
||
<uni-title class="h5" type="h5" color="#666"
|
||
title="- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范"></uni-title>
|
||
<uni-title class="h5" type="h5" color="#666" title="- 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期">
|
||
</uni-title>
|
||
<uni-title class="h5" type="h5" color="#666" title="- 为兼容多端运行，建议使用flex布局进行开发"></uni-title>
|
||
</view>
|
||
</view>
|
||
</uni-section>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
Reference:
|
||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-title.html)
|
||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=title)
|
||
- [Local Example](examples/uni-ui/uni-title.vue)
|