diff --git a/components/tabs/__tests__/__snapshots__/demo.test.web.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.web.js.snap index c60be2556f5..88a9b6c0a55 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.web.js.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.web.js.snap @@ -19,7 +19,7 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = ` class=" am-tabs-tab" role="tab" > - 选项卡一 + First Tab
- 选项卡二内容 + Content of Second Tab
- 选项0 + Option0
- 选项1 + Option1
- 选项2 + Option2
- 选项3 + Option3
- 选项4 + Option4
- 选项5 + Option5
- 选项6 + Option6
- 选项7 + Option7
- 选项8 + Option8
- 选项9 + Option9
- 选项10 + Option10
- 选项11 + Option11
@@ -261,7 +261,7 @@ exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
- 选项8内容 + content of option8
- 选项卡三内容 + Content of Third Tab
diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md index 13d8d234ddf..b61949e432a 100644 --- a/components/tabs/demo/basic.md +++ b/components/tabs/demo/basic.md @@ -1,11 +1,11 @@ --- order: 0 title: - zh-CN: 选项卡 - en-US: Tabs + zh-CN: 基本用法 + en-US: Basic Usage --- -多用于页面的内容区块，起着控制小范围内的大块内容的分组和隐藏，起着保持界面整洁的作用。 +Basic Usage. ````jsx @@ -22,19 +22,19 @@ function handleTabClick(key) { const TabExample = () => (
- +
- 选项卡一内容 + Content of First Tab
- +
- 选项卡二内容 + Content of Second Tab
- +
- 选项卡三内容 + Content of Third Tab
diff --git a/components/tabs/demo/mutlitabs.md b/components/tabs/demo/mutlitabs.md index 2a406eb523e..ee004c59495 100644 --- a/components/tabs/demo/mutlitabs.md +++ b/components/tabs/demo/mutlitabs.md @@ -5,7 +5,7 @@ title: en-US: 'overflow, more than 5 tabs' --- -可视区最多显示5个标签，点击两侧的标签后，滑动tabs +There are at most 5 tab panes in the visible area, click on the both sides of `Tabs` to scroll. ````jsx @@ -20,9 +20,9 @@ function handleTabClick(key) { console.log('onTabClick', key); } const makeTabPane = key => ( - +
- {`选项${key}内容`} + {`content of option${key}`}
); diff --git a/components/tabs/demo/noanim.md b/components/tabs/demo/noanim.md index 9ee3b666ded..b0069d80a27 100644 --- a/components/tabs/demo/noanim.md +++ b/components/tabs/demo/noanim.md @@ -5,7 +5,7 @@ title: en-US: 'No animation' --- -禁用切换动画效果 +Switch tabs without animation ````jsx import { Tabs, WhiteSpace } from 'antd-mobile'; @@ -23,19 +23,19 @@ const TabExample = () => (
- +
- 选项卡一内容 + Content of First Tab
- +
- 选项卡二内容 + Content of Second Tab
- +
- 选项卡三内容 + Content of Third Tab
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 00700f9d640..2049ad81a71 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -5,11 +5,12 @@ title: Tabs --- -用于让用户在不同的视图中进行切换。 +A `Tabs` is used to allow users to switch between different views. -### 规则 -- 标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。 -- 在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。 +### Rule + +- Generally a `Tabs` should have 2-4 tab pane, the title of each tab pane should be concise，normally has 2-4 words.. +- In the secondary page of iOS, it is not recommended to use left and right swipe to switch tab, which conflicts with back swipe gestrue in iOS. eg: tabs in details page. ## API @@ -20,29 +21,29 @@ Support WEB, React-Native. Properties | Descrition | Type | Default -----------|------------|------|-------- -| activeKey | 当前激活 tab 面板的 key | String | 无 | -| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | String | 第一个面板 | -| onChange | 切换面板的回调 | (key: string): void | 无 | -| onTabClick | tab 被点击的回调 | (key: string): void | 无 | -| animated | 是否动画 | boolean | `true` | -| swipeable | 是否可以滑动 tab 内容进行切换 | boolean | `true` | -| hammerOptions(`Web Only`) | 开启`swipeable`的时候可以对 [hammerjs](http://hammerjs.github.io/) 的 [pan](http://hammerjs.github.io/recognizer-pan/) 和 [swipe](http://hammerjs.github.io/recognizer-swipe/) 两种手势进行参数配置 | object | {} | -| tabBarPosition | tab 位置 top/bottom | string | `top` | -| destroyInactiveTabPane | 是否销毁掉不活动的 tabPane (优化使用) | boolean | false | -| underlineColor(`react-native only`) | 线条颜色 | string | `#ddd` | -| activeUnderlineColor(`react-native only`) | 选中线条颜色 | string | `#108ee9` | -| textColor(`react-native only`) | 文字颜色 | string | `#000` | -| activeTextColor(`react-native only`) | 选中文字颜色 | string | `#108ee9` | -| barStyle(`react-native only`) | style for tabs bar | object | `{}` | -| prefixCls(`web only`) | className 前缀 | string | `am-tabs` | -| className(`web only`) | 额外的 className | string | 无 | -| pageSize(`web only`) | 可视区显示的 tab 数量，可以看做一页 | number | 5 | -| speed(`web only`) | 多页模式下，TabBar 滑动的速度 | Number: 1 ~ 10 | 8 | -| tabBarhammerOptions(`web only`) | 同hammerOptions，对 TabBar 的滑动手势进行配置 | Obejct | {} | +| activeKey | Current TabPane's key | String | 无 | +| defaultActiveKey | Default actived tabPanel's key, if activeKey is not set. | String | first pane | +| onChange | Callback when tab is switched | (key: string): void | 无 | +| onTabClick | Callback when tab is clicked | (key: string): void | 无 | +| animated | Whether to change tabs with animation, | boolean | `true` | +| swipeable | Whether to switch tabs with swipe gestrue in the content | boolean | `true` | +| hammerOptions(`Web Only`) | The options of [pan](http://hammerjs.github.io/recognizer-pan/) and [swipe](http://hammerjs.github.io/recognizer-swipe/) gestrue in [hammerjs](http://hammerjs.github.io/) can be customized if `swipeable` is `true` | object | {} | +| tabBarPosition | Position of tabs. Options: top and bottom | string | `top` | +| destroyInactiveTabPane | Whether to destroy the inactive tabPane (for optimization) | boolean | false | +| underlineColor(`react-native only`) | Underline color of `Tabs` | string | `#ddd` | +| activeUnderlineColor(`react-native only`) | Underline color of active tabPane | string | `#108ee9` | +| textColor(`react-native only`) | color of text | string | `#000` | +| activeTextColor(`react-native only`) | color of text for active tabPanel | string | `#108ee9` | +| barStyle(`react-native only`) | style for tab's bar | object | `{}` | +| prefixCls(`web only`) | prefix className | string | `am-tabs` | +| className(`web only`) | className for `Tabs` | string | 无 | +| pageSize(`web only`) | The number of tab panes in the visible area, it can be seen as one page | number | 5 | +| speed(`web only`) | The scroll speed of `TabBar` in multiple page mode | Number: 1 ~ 10 | 8 | +| tabBarhammerOptions(`web only`) | same as `hammerOptions` which is used to custom swipe gestrue of `TabBar`| Obejct | {} | ### Tabs.TabPane Properties | Descrition | Type | Default -----------|------------|------|-------- -| key | 对应 activeKey | String | 无 | -| tab | 选项卡头显示文字 | React.Element or String | 无 | +| key | TabPane's key | String | | +| tab | Show text in TabPane's head | React.Element or String | |