1.5.4.16 wxc-tabbar

<wxc-tabbar>

0.5

Summary

The "wxc-tabbar" tag implements a specialized component that corresponds to the radio-style selection. It displays tabs at the bottom of the window for selecting between the different modes and for displaying different weex pages for that mode.

Child Components

This component supports no child components.

Attributes

tab-items: This attribute contains an array of tabitem objects, each of which corresponds to the radio-style selection. The order of the items in this attribute corresponds to the order of the items onscreen. You can configure the appearance of tabbar by setting tabitem. Each tabitem properties can be described as follows.
- index: <integer> This attribute must be set to identify the order of the item.
- title: <string> The item’s title. If null, a title is not displayed.
- titleColor: <color>The item’s titleColor. Default is black color.
- image: <string>The icon displayed when the tabitem is unselected. If null, the icon is not displayed.
- selectedImage: <string>The icon displayed when the tabitem is selected. If null, the icon is not displayed.
- src: <string>The custom weex page to display.
- icon: <string>This is a special attribute. Be careful, You need to set the property even if it is empty.
- visibility: <string>visible | hidden. This attribute must be set to identify the display status. Default value is visible.
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.

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.

Example

require('weex-components') should be used with webpack, see example for more detail.

<template> <div style="flex-direction: column;"> <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar> </div> </template> <script> require('weex-components'); module.exports = {
    data: {
      tabItems: [
        {
          index: 0,
          title: '...',
          titleColor: '#000000',
          icon: '',
          image: '...',
          selectedImage: '...',
          src: '...',
          visibility: 'visible',
        },
        {
          index: 1,
          title: '...',
          titleColor: '#000000',
          icon: '',
          image: '...',
          selectedImage: '...',
          src: '...',
          visibility: 'hidden',
        }
      ],
    },
    methods: {
      ready: function (e) { var vm = this;
        vm.$on('tabBar.onClick',function(e){ var index = e.detail.index;
             ....
        });
      },
    }
  } </script>