title: type: references order: 2.17 version: 0.10

<wxc-tabbar>

The wxc-tabbar is a custom component, which belongs to the weex-components node package, implements a specialized component that corresponds to the radio-style selection. It displays tabs at the bottom of the window for switching between different tab pages.

Usage: You can use this component by a require statement, require('weex-components');, in the script tag. e.g.

<template>
  <div style="flex-direction: column;">
    <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
  </div>
</template>

<script>
  require('weex-components');
  // Other javascript statements.
</script>

Before requiring weex-components', you need to specify weex-components dependency in your project's package.json file. e.g.

"dependencies": {
  "weex-components": "^0.2.0"
}

Child Components

wxc-tabbar has no child components.

Attributes

  • selected-index : <number> default value is 0
  • selected-color: <color> The color of the title when it is selected. Default is red color.
  • unselected-color: <color> The color of the title when it is unselected. Default is black color.
  • tab-items This attribute accepts an array of tabitem objects, each of which corresponds to the tab pages. And the order of the items equals to the order of the tab pages onscreen. You can configure the appearance of tabbar by setting the tabitem object's properties. Each tabitem properties are listed as below:
    • index: <integer> This attribute is required, and it specifies the order of the item.
    • title: <string> The item’s title. and it is optional. The tile will not be displayed if empty or not provided.
    • titleColor: <color>The item’s titleColor. Default is black color.
    • image: <string>The icon displayed when the tabitem is unselected. The image will not be displayed if empty or not provided.
    • selectedImage : <string>The icon displayed when the tabitem is selected. The icon will not be displayed if empty or not provided.
    • src : <string> The weex page for the tab page.
    • visibility: <string>visible | hidden. This attribute specifies display status of the tab page. Default value is visible.

Other attributes please check out the common attributes.

Styles

common styles: check out common styles for components

  • support flexbox related styles
  • support box model related styles
  • support position related styles
  • support opacity, background-color etc.

Events

  • tabBar.onClick: triggered when the tabitem is selected. You need to register the observer in ready or create block. e.g.
<template&gt;
  <div style="flex-direction: column;"&gt;
    <wxc-tabbar tab-items = {{tabItems}}&gt;</wxc-tabbar&gt;
  </div&gt;
</template&gt;

<script>
  require('weex-components');
  module.exports = {
    data: {
      },
    methods: {
      ready: function (e) {
        var vm = this;
        vm.$on('tabBar.onClick',function(e){
          var index = e.detail.index;
        });
      },
    }
  }
</script>

Example

You should checkout the playground's tabbar example.