<wxc-tabbar>
0.5 cn
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 isvisible
.
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>