wxc-minibar

Weex 顶部导航栏组件

规则

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

Demo

使用方法

  1. <template>
    2.   <div class="container" :style="{ height: height }">
    3.     <div class="demo">
    4.       <text class="text">配置颜色</text>
    5.       <wxc-minibar title="标题"
    6.                    background-color="#009ff0"
    7.                    text-color="#FFFFFF"
    8.                    right-text="更多"
    9.                    @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
    10.                    @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
    11.     </div>
    12.   </div>
    13. </template>
    14.   15. <script>
    16.   import { WxcMinibar } from 'weex-ui';
    17.   const modal = weex.requireModule('modal');
    18.   19.   export default {
    20.     components: { WxcMinibar },
    21.     methods: {
    22.       minibarLeftButtonClick () {
    23.       },
    24.       minibarRightButtonClick () {
    25.         modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
    26.       }
    27.     }
    28.   };
    29. </script>Click to copy

更详细代码可以参考 demo

可配置参数

Prop	Type	Required	Default	Description
title	String	Y	-	标题
right-button	String	N	-	右侧button icon
right-text	String	N	-	右侧button文案，优先显示
left-button	String	N	返回图标	左侧 button icon
left-text	String	N	``	左侧文案，优先显示
text-color	String	N	#333333	标题颜色
background-color	String	N	#ffffff	背景颜色
use-default-return	Boolean	N	true	是否使用默认的返回
show	Boolean	N	true	是否显示
### Slot
当以上配置都不满足时候，你可以使用 slot 来自定义设置你的组件。 weex-ui >= 0.3.9
* ：左边返回坑位
* ：中间标题坑位
* ：右边坑位

  1. <wxc-minibar background-color="#FFF3CD">
    2.   <image src="https://img.alicdn.com/tfs/TB1QN8pdlHH8KJjy0FbXXcqlpXa-220-80.png"
    3.          slot="left"
    4.          style="height: 32px;width: 88px;"></image>
    5.   <text style="font-size: 40px;" slot="middle">Customize this component</text>
    6.   <image slot="right"
    7.          src="https://img.alicdn.com/tfs/TB1j39Uc0fJ8KJjy0FeXXXKEXXa-160-128.png"
    8.          style="height: 32px;width: 40px"></image>
    9. </wxc-minibar>Click to copy

事件回调

  1. // @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
    2. // @wxcMinibarRightButtonClicked="minibarRightButtonClick"Click to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-minibar/