Mind UI Vue

# HeaderBar 自定义顶部

# 引入

import { HeaderBar } from 'mind-ui-vue';
Vue.use(HeaderBar);

# 示例

# 基础用法

<m-header-bar back title="标题内容" />

# 自定义背景

通过 title-color 设置字体颜色， bgcolor 设置背景颜色或背景图片。

<m-header-bar title-color="#ff9902" title="标题字体色" />

<m-header-bar bgcolor="#ff9902" title="自定义背景色" />

<m-header-bar bgcolor="linear-gradient(45deg, #9000ff, #5e00ff)" title="渐变背景色" />

<m-header-bar bg-image="https://note-file.ixook.com/FiDc9WTfG9DwiFrbYRl6E6ljShqF" title="自定义背景图" />

# 对齐方式

<m-header-bar title-align="center" title="标题居中对齐" />

# 加载状态

<m-header-bar loading title="加载中" />

# 自定义内容

通过 slot 插槽自定义标题区域内容。

<m-header-bar>
  <div class="custom-title">
    <div class="title">自定义 Header-bar</div>
    <div class="subtitle">副标题</div>
  </div>
</m-header-bar>

示例中自定义标题区域内容的样式。

.custom-title {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.title {
  font-size: 30px;
}

.subtitle {
  font-size: 24px;
  color: #aaa;
}

# Api

# Props

参数 说明 类型 可选值 默认值
visible 是否显示 Boolean — false
title 标题 String — —
loading 显示加载中 Boolean — false
color 标题颜色 String — #000000
align 标题对齐方式，默认 ios 系统居中对齐，Android 系统左对齐 String left center —
bgcolor 背景色，支持渐变值 String — #ffffff
bg-image 背景图片 String — —
back 是否显示返回按钮 Boolean — false
back-color 返回按钮颜色 String — #000000
delta $router.go() 的 delta 参数，当 back 为 true 的时候生效 Number — -1

# slots

名称 说明
— 自定义标题内容区域

← Navbar 选项卡 →