weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
60 lines (40 loc) • 7.56 kB
Markdown
- category: UI
- chinese: Tab切换
- type: UI Component
---
tab toggle, commonly used in the entire layout framework of the business.
| Props | Description | Type | Default |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------- |
| itemStyle | customized tabbar-item style, will override the default style, through this field, you can customize the width, height and layout of the tab navigation bar | object | false |
| style | Customize the style of the tabbar container and override the default style | object | false |
| navTop | The position of the navigation, default value is bottom, also can be adjusted to the top | boolean | false |
| navStyle | custom tab title bar styles need to be imported{active: {style...}, inactive: {style...}} active corresponding selection styles, inactive unchecks the style | object | false |
| navScrollable | navigation scrolls? If it can scroll, you don't limit the tab width and scroll horizontally. If it can't scroll, each child element flex =1 is equal to the parent container width | boolean | false |
| iconBar | with icon | boolean | false |
| activeKey | (Necessary) used to open and switch to the specified tab and receive the tab value | string | false |
| asFramework | use this as a framework to start this item. It needs the business side to control the shouldComponentUpdate event so that it will be optimized. Otherwise, it will be used as a simple container component, so that `props` change will be filtration controled. | boolean | false |
| onChange（embed mode invalid） | prevTab and nextTab are thrown when tab is switched, and props is not triggered manually | funtion | false customChange（embed mode invalid） | Defines the injection method name of the built-in switch tab, which defaults to changeTo, in tabContent call this.changeTo('tab 的key') directly. | string | false |
| customFocus（embed mode invalid） | Defining the intersection point of hook. This method is implemented when tabbar is switched, default method is `onFoucs`. The `changeTo` can be defined directly in tabContent. When tab is switched, `true` is cut into `false`. | string | false |
**Watching**
- **Change state, props does not take effect** Default setting of `asFramework`is `false` and non tabbar state changes will be filtered, in order to improve the performance of the effect. If the user needs to control the component through state changes, set it to `true`.
- **embed mode** When `Tabbar.item` sets the SRC property, the embed mode is enabled. The mode H5 shows the use of iframe loading pages. Native shows the ability to load modules with embed loaded with jsBundle. But not all app supported embed mode, so please fully self-test before use.
| Props | Description | Type | Default |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| render | Custom rendering function, `item` will be imported whether the current belongs to the active state of status, the current `tabkey` as the parameter | function | null |
| tabKey | （necessary）define the key of this tabbar | string | null |
| preventDefaultEvent | defines whether to disable default events | boolean | null |
| num | the numbers revealed, follow the title of tab, show way: title(num) | string | null |
| onPress | handler event after clicking | function | null |
| title | revealing copy | string | null |
| icon | if `tabbar` sets iconbar=true, so it valids here, {src: 'xxx',selected:'xxx',size:'small/medium/large',style:{}} | object | null |
| src(enable embed mode) | define being loaded jsbundle url | string | null |
**1.0.0 later, tabbar remove the scrollable effect** if still need, please refer `nuke-biz-ep-tabbar`.
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group
<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />