Tabbar

• category: UI
• chinese: Tab切换
• type: UI Component

Usage

tab toggle, commonly used in the entire layout framework of the business.

API

Tabbar

| 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 asFrameworkis 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.

Tabbar.Item

| 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.

The Other

• Chat with @翊晨[yichen] in Dingtalk desktop App Download
• DingTalk Group