# title 标题
# 概述
title 标题组件可以用于页面中某块的标题,它包含两个样式,一个是普通的标题,一个是带有前缀 icon 的样式。
# 代码示例
<xy-title>我是标题组件</xy-title>
<xy-title isShowIcon>我是带有 icon 的标题组件</xy-title>
<xy-title class="customClass" style="font-size: 20px;color: blue;">可以自定义标题样式</xy-title>
<xy-title isShowIcon>可以自定义默认 icon 颜色</xy-title>
<style>
.xy-title-icon::before {
  background: blue;
}
</style>
<xy-title isShowIcon>
  可以设置标题右侧的内容
  <template v-slot:right>
    <button>按钮</button>
  </template>
</xy-title>
<xy-title isShowIcon>
  可以设置副标题
  <template v-slot:sub-title>
    <span>我是副标题的内容</span>
  </template>
</xy-title>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 效果
我是标题组件
  我是副标题的内容
 # API
| 属性 | 类型 | 说明 | 默认值 | 
|---|---|---|---|
| isShowIcon | Boolean | 用于显示或隐藏前缀 icon | false | 
| v-slot:right | VNode | 放置标题右侧插槽内容 | 无 | 
| v-slot:sub-title | VNode | 跟随在主标题右边的副标题 | 无 | 
← 快速上手 wrapper 包裹容器 →