导航栏 NavBar

左侧渲染

  1. <za-nav-bar>
  2. <div slot="left">
  3. <za-icon theme="primary" type="arrow-left" @click="clickHandle"></za-icon>
  4. </div>
  5. <div slot="title">这是标题</div>
  6. <div slot="right"></div>
  7. </za-nav-bar>

右侧渲染

<za-nav-bar>
  <div slot="left"></div>
  <div slot="title">这是标题</div>
  <div slot="right">
    <za-icon theme="primary" type="question-round" @click="clickHandle"></za-icon>
  </div>
</za-nav-bar>

复数渲染

<za-nav-bar>
  <div slot="left">
    <za-icon theme="primary" type="arrow-left" @click="clickHandle"></za-icon>
  </div>
  <div slot="title">这是标题</div>
  <div slot="right">
    <za-icon theme="primary" type="add" @click="clickHandle"></za-icon>
    <za-icon theme="primary" type="question-round" @click="clickHandle"></za-icon>
  </div>
</za-nav-bar>

Vue Script

<script name="vue">
export default {
  data() {
    return {
    }
  },
  methods: {
    clickHandle() {
      alert('clickHandle');
    },
  },
};
</script>

API

NavBar Attributes

属性类型默认值可选值/参数说明
titlehtml导航栏标题渲染
slot="left"html导航栏左侧渲染
slot="right"html导航栏右侧渲染

NavBar 导航栏 - 图1