# 3.1 标题栏（Minibar）

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

# 设计原则

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

# dof-minibar 顶部导航栏组件

顶部导航栏组件

# 实例

# 规则

优先使用 Native 自带的 Navigator Bar (opens new window)
假如你想隐藏左边返回按钮，直接传入leftButton=""即可

# 基础用法

<template>
  <div class="dof-demo">
    <dof-minibar :left-button="leftButton" title="导航栏" text-color="#ffffff" background-color="#00A4F2">
    </dof-minibar>
    <scroller class="scroller">
      <title title="dof-minibar"></title>
      <dof-catalog title="基础样式" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <div>
        <div class="demo">
          <dof-minibar title="标题" @dofMinibarRightButtonClicked="rightButtonClickedHandler"></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="标题标题标题标题标题标题标题标题标题标题标题标题"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar @dofMinibarRightButtonClicked="rightButtonClickedHandler" :right-button="moreIcon"></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="标题标题标题标题标题标题标题标题标题标题标题标题"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
            :right-button="moreIcon"
          ></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar right-text="选择" @dofMinibarRightButtonClicked="rightButtonClickedHandler"></dof-minibar>
        </div>

        <div class="demo">
          <dof-minibar
            title="标题标题标题标题标题标题标题标题标题标题标题标题"
            right-text="选择"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <dof-catalog title="带副标题" background-color="#daf9ca" :has-margin="true"></dof-catalog>
        <div class="demo">
          <dof-minibar
            title="家电安装"
            sub-title="2台设备"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="家电安装"
            sub-title="2台设备"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
            :right-button="moreIcon"
          >
          </dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="家电安装家电安装家电安装家电安装家电安装家电安装"
            sub-title="2台设备"
            right-text="选择"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="家电安装家电安装家电安装家电安装家电安装家电安装"
            sub-title="2台设备"
            :right-button="shareIcon"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <dof-catalog title="全部自定义化" background-color="#daf9ca" :has-margin="true"></dof-catalog>
        <div class="demo">
          <dof-minibar
            :left-button="leftButton"
            title="标题"
            right-text="选择"
            text-color="#ffffff"
            background-color="#1E2E37"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>

        <div class="demo">
          <dof-minibar
            :left-button="leftButton"
            title="标题"
            right-text="选择"
            text-color="#ffffff"
            background-color="#00A4F2"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
      </div>
      <div class="demo">
        <dof-minibar
          background-color="#00A4F2"
          @dofMinibarLeftButtonClicked="minibarLeftButtonClick"
          @dofMinibarRightButtonClicked="minibarRightButtonClick"
        >
          <image
            src="http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png"
            slot="left"
            style="width: 58px;height: 58px;"
          ></image>
          <div class="middle-title" slot="middle">
            <text style="font-size: 32px;color:#ffffff;">全部自定义化</text>
          </div>
          <image
            slot="right"
            src="http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_help_white@3x.png"
            style="width: 58px;height: 58px;"
          ></image>
        </dof-minibar>
      </div>
      <dof-catalog title="无障碍示例" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <div class="demo">
        <dof-minibar title="无障碍标题">
          <div slot="right" aria-label="更多。按钮">
            <!-- 新增@click，image标签会语音成"xx按钮" -->
            <image :src="moreIcon" style="height: 48px;width: 48px;" @click="showPop" aria-label="更多"></image>
          </div>
        </dof-minibar>
      </div>
      <div class="h-100"></div>
    </scroller>
  </div>
</template>

<style scoped>
.dof-demo {
  background-color: #ffffff;
}

.right-img-wrapper {
  padding: 15px 15px;
}

.scroller {
  flex: 1;
}

.demo {
  width: 750px;
  height: 180px;
  align-items: flex-start;
}
.middle-title {
  justify-content: center;
}
.h-100 {
  width: 750px;
  height: 100px;
}
</style>

<script>
import { DofMinibar, Core, DofCatalog } from 'dolphin-intl-ui'
const modal = weex.requireModule('modal')

export default {
  components: { DofMinibar, DofCatalog },
  data: () => ({
    leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
    moreIcon:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAACEElEQVR4Ae3YTUrDQBjG8UncuxERwQ+8QBei5iJFwTt4rS7Ei1Qli+LCnai4EHHjAYzvW9JaKCbNM0E68B8oxM48805+pO2MIdAQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEDABbIeGfL9QXGeheoyVNmJzbwVqvAZsuq+CtnodTK+tlrfPdVb21q9gB4Ozo4M7cawjhvASsMePk9unxrGtHate61oUL9BUxgb6HabhoF+2JhCRU2hVt6G0NKf+5O5CqbP4+N8vF0qdZOotdEC1tht35kX9ohfNQ5a7tzd3Nl7/Hp/e1ju+vudVGopT8r8rqc/QPO/Vr9QckrGV6TklMysVhTo9Nd8dcffkb4L6NqUjNdQckqmrhUH6lsjpSk5JeNrU3JKpq4VB+r7TKUpOSXja1NySqauFQdqm3bF0zf7nXNKxosoOSVT14oCtS3QqDOMBZSckvG1KTklM6sVu7HPDwbFnU3WdELyWoutfJmMT+2NrsfQJGpFPaGOYluMob38BNTafJyPt4FdMX3uJGrFgob6GFnYDZd+1w3N++Vjp8+bQq3Yj/yi39r+B2hxkcL1f96XsDwiCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIJCTwA3H+EgWgGDY+AAAAAElFTkSuQmCC',
    backIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/ico_back_black@3x.png',
    shareIcon: '../../assets/image/header/icon_share_black.png'
  }),
  created() {},
  methods: {
    minibarLeftButtonClick() {},
    minibarRightButtonClick() {
      Core.reload()
    },
    rightButtonClickedHandler() {
      this.$toast('minibar right clicked!')
    },
    showPop() {}
  }
}
</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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

# Attributes

Prop	Type	Required	Default	Description
title	`String`	`N`	`''`	标题
left-button	`String`	`N`	`''`	左侧 button icon；未设置时使用默认返回图标
right-button	`String`	`N`	`""`	右侧 button icon
right-text	`String`	`N`	`""`	右侧 button 文案，优先显示
left-text	`String`	`N`	`""`	左侧文案，优先显示
text-color	`String`	`N`	`''`	标题和左右文字颜色
background-color	`String`	`N`	`''`	背景颜色；未设置时使用主题默认值
use-default-return	`Boolean`	`N`	`true`	是否使用默认的返回
show	`Boolean`	`N`	`true`	是否显示
bar-style	`Object`	`N`	`undefined`	覆盖修改原有的样式
middle-text-style	`Object`	`N`	`undefined`	中间标题与副标题样式
is-immersion	`Boolean`	`N`	`true`	是否沉浸/全屏显示
`isRTL`	`Boolean`	`N`	`false`	是否启用 RTL（从右到左）布局；默认关闭
need-dark-mode	`Boolean`	`N`	`false`	是否启用 M-dark/T-dark 内置暗黑适配
`is-fixed`	`Boolean`	`N`	`false`	是否固定定位
`has-bottom-border`	`Boolean`	`N`	`false`	是否有下边框
`sub-title`	`String`	`N`	`""`	副标题
`right-wrap-style`	`Object`	`N`	`{}`	右侧包裹容器样式
`left-wrap-style`	`Object`	`N`	`{}`	左侧包裹容器样式

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

# 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

← 2.5 列（Col） 3.2 标签页（Tab Page） →