NavBar 导航栏

引入

import Vue from 'vue';
import NavBar from '@ophiuchus/nav-bar';

Vue.use(NavBar);

代码演示

基础用法

<sf-nav-bar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

import Toast  from '@ophiuchus/toast';

export default {
  methods: {
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  },
};

使用插槽

通过插槽自定义导航栏两侧的内容。

<sf-nav-bar title="标题" left-text="返回" left-arrow>
  <template #right>
    <sf-icon name="search" size="18" />
  </template>
</sf-nav-bar>

API

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | title | 标题 | string | '' | | left-text | 左侧文案 | string | '' | | right-text | 右侧文案 | string | '' | | left-arrow | 是否显示左侧箭头 | boolean | false | | border | 是否显示下边框 | boolean | true | | fixed | 是否固定在顶部 | boolean | false | | placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | boolean | false | | z-index | 导航栏 z-index | number | string | 1 | | safe-area-inset-top | 是否开启顶部安全区适配 | boolean | false |

Slots

| 名称 | 说明 | | ----- | ------------------ | | title | 自定义标题 | | left | 自定义左侧区域内容 | | right | 自定义右侧区域内容 |

Events

| 事件名 | 说明 | 回调参数 | | ----------- | ------------------ | -------- | | click-left | 点击左侧按钮时触发 | - | | click-right | 点击右侧按钮时触发 | - |

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。

| 名称 | 默认值 | 描述 | | ------------------------- | --------------- | ---- | | @nav-bar-height | 46px | - | | @nav-bar-background-color | @white | - | | @nav-bar-arrow-size | 16px | - | | @nav-bar-icon-color | @blue | - | | @nav-bar-text-color | @blue | - | | @nav-bar-title-font-size | @font-size-lg | - | | @nav-bar-title-text-color | @text-color | - | | @nav-bar-z-index | 1 | - |