# 标签页

位于 app 内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。

使用规则

1、可在导航栏中显示当前视图的标题；
2、标题长度适配：如果标题非常冗长且无法精简，可以以“…”结尾，表示未显示完全；标题两边与图标或功能文字留一定距离；
3、导航栏避免过多元素。一般情况下，一个“返回按钮”、一个“标题”；
4、导航栏中右侧包含 4 种情况：无、1个图标（功能入口）、2个图标（功能入口）、文字（功能入口）;
5、为图标和文字控件，提供更大的点击热区。
6、右侧文字按钮可根据场景变换色值。

# 示例

<template>
  <div class="wrapper">
    <dof-minibar title="3.1导航栏"></dof-minibar>
    <scroller class="scroller">
      <div class="title-box">
        <text class="title-text">基础样式</text>
      </div>
      <dof-minibar title="标题"></dof-minibar>
      <dof-minibar title="标题标题标题标题标题标题标题标题标题标题标题标题"></dof-minibar>
      <dof-minibar title="标题" right-button="default"></dof-minibar>
      <dof-minibar title="标题标题标题标题标题标题标题标题标题标题标题标题" right-button="default"></dof-minibar>
      <dof-minibar title="标题" right-text="选择"></dof-minibar>
      <dof-minibar title="标题" left-text="取消" right-text="选择"></dof-minibar>
      <div class="title-box">
        <text class="title-text">带副标题</text>
      </div>
      <dof-minibar title="标题" subTitle="副标题"></dof-minibar>
      <dof-minibar title="标题标题标题标题标题标题标题标题标题标题标题标题" subTitle="副标题">></dof-minibar>
      <dof-minibar title="标题" right-button="default" subTitle="副标题">></dof-minibar>
      <dof-minibar
        title="标题标题标题标题标题标题标题标题标题标题标题标题"
        right-button="default"
        subTitle="副标题"
      ></dof-minibar>
      <dof-minibar title="标题" right-text="选择" subTitle="副标题">></dof-minibar>
      <div class="title-box">
        <text class="title-text">插件页首页</text>
      </div>
      <dof-minibar title="标题" right-button="default"> </dof-minibar>
      <dof-minibar title="标题" right-button="default">
        <dof-tab-page
          type="primary"
          slot="middle"
          :is-slot="true"
          ref="dof-tab-page"
          :tab-titles="navTabTitles"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
      </dof-minibar>
      <dof-minibar title="标题" right-button="default">
        <dof-tab-page
          type="primary"
          slot="middle"
          :is-slot="true"
          ref="dof-tab-page"
          :tab-titles="navTabTitles2"
          @dofTabSelected="tabChangeHandler"
        ></dof-tab-page>
      </dof-minibar>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #fff;
}
.title-box {
  padding: 32px;
  background-color: #e5e5e8;
}
.title-text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
  font-weight: 500;
}
.scroller {
  padding-bottom: 100px;
}

@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
}
</style>

<script>
import { DofMinibar, DofTabPage } from 'dolphin-weex-ui'
export default {
  components: { DofMinibar, DofTabPage },
  data: () => ({
    navTabTitles: [
      {
        title: '设备'
      },
      {
        title: '推荐'
      }
    ],
    navTabTitles2: [
      {
        title: '设备'
      },
      {
        title: '推荐'
      },
      {
        title: '推荐'
      }
    ]
  }),
  created() {}
}
</script>

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

# Attributes

Prop	Type	Required	Default	Description
title	`String`	`Y`	`-`	标题
left-button	`String`	`N`	`返回图标`	左侧 button icon
right-button	`String`	`N`	`-`	右侧 button icon，传'default'使用默认的三个点图标
right-text	`String`	`N`	`-`	右侧 button 文案，优先显示
left-text	`String`	`N`	`-`	左侧文案，优先显示
text-color	`String`	`N`	`rgba(255, 255, 255, 0.8)`	标题颜色
background-color	`String`	`N`	`#151617`	背景颜色
use-default-return	`Boolean`	`N`	`true`	是否使用默认的返回
show	`Boolean`	`N`	`true`	是否显示
bar-style	`Object`	`N`	`{}`	覆盖修改原有的样式
middle-text-style	`Object`	`N`	`{}`	`<slot name="middle"></slot>`中的样式
is-immersion	`Boolean`	`N`	`false`	是否沉浸/全屏显示

# Slot

当以上配置都不满足时候，你可以使用 slot 来自定义设置你的组件。

<slot name="left"></slot>：左边返回坑位
<slot name="middle"></slot>：中间标题坑位
<slot name="right"></slot>：右边坑位

# Events

事件名	说明	回调参数	备注
`dofMinibarLeftButtonClicked`	点击左边图标	-	有默认返回行为，可通过设置`use-default-return`属性为 `false` 取消默认返回行为
`dofMinibarRightButtonClicked`	点击右边图标	-	-

WARNING

⚠️ 注意：点击左侧返回图标默认带有返回上一级的行为，dofMinibarLeftButtonClicked点击事件中不需要重复写返回的代码逻辑，否则会出现向上返回两级的问题。如需取消该默认行为，请设置use-default-return属性为 false

点我扫二维码查看demo

← 2.2 首页背景（Background） 3.2 标签页（Tab） →