diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md index b2bb1e1e48..0c5563f1e0 100644 --- a/components/tabs/demo/basic.md +++ b/components/tabs/demo/basic.md @@ -3,8 +3,14 @@ order: 0 title: 基本 --- +## zh-CN + 默认选中第一项。 +## en-US + +Default activate first tab. + ````jsx import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; @@ -15,9 +21,9 @@ function callback(key) { ReactDOM.render( - 选项卡一内容 - 选项卡二内容 - 选项卡三内容 + Conten of Tab Pane 1 + Conten of Tab Pane 2 + Conten of Tab Pane 2 , mountNode); ```` diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md index 112998f093..175e4a86bf 100644 --- a/components/tabs/demo/card-top.md +++ b/components/tabs/demo/card-top.md @@ -2,9 +2,14 @@ order: 10 title: 卡片式页签容器 --- +## zh-CN 用于容器顶部，需要一点额外的样式覆盖。 +## en-US + +Should be used at the top of container, needs to override styles. + ````jsx import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; @@ -12,9 +17,9 @@ const TabPane = Tabs.TabPane; ReactDOM.render(
- 选项卡一内容 - 选项卡二内容 - 选项卡三内容 + Conten of Tab Pane 1 + Conten of Tab Pane 2 + Conten of Tab Pane 2
, mountNode); diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md index b10af1439a..0522273d4c 100644 --- a/components/tabs/demo/card.md +++ b/components/tabs/demo/card.md @@ -3,8 +3,15 @@ order: 8 title: 卡片式页签 --- +## zh-CN + 另一种样式的页签，不提供对应的垂直样式。 +## en-US + +Another type Tabs, which doesn't support vertical mode. + + ````jsx import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; @@ -15,9 +22,9 @@ function callback(key) { ReactDOM.render( - 选项卡一内容 - 选项卡二内容 - 选项卡三内容 + Conten of Tab Pane 1 + Conten of Tab Pane 2 + Conten of Tab Pane 2 , mountNode); ```` diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md index b84ed3b070..00bdb92df3 100644 --- a/components/tabs/demo/custom-add-trigger.md +++ b/components/tabs/demo/custom-add-trigger.md @@ -2,9 +2,15 @@ order: 11 title: 自定义新增页签触发器 --- +## zh-CN 隐藏默认的页签增加图标，给自定义触发器绑定事件。 +## en-US + +Hide default plus icon, and bind event for customized trigger. + + ````jsx import { Tabs, Button } from 'antd'; const TabPane = Tabs.TabPane; @@ -13,8 +19,8 @@ const Demo = React.createClass({ getInitialState() { this.newTabIndex = 0; const panes = [ - { title: '选项卡', content: '选项卡一内容', key: '1' }, - { title: '选项卡', content: '选项卡二内容', key: '2' }, + { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' }, + { title: 'Tab 2', content: 'Content of Tab Pane', key: '2' }, ]; return { activeKey: panes[0].key, @@ -30,7 +36,7 @@ const Demo = React.createClass({ add() { const panes = this.state.panes; const activeKey = `newTab${this.newTabIndex++}`; - panes.push({ title: '新建页签', content: '新页面', key: activeKey }); + panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey }); this.setState({ panes, activeKey }); }, remove(targetKey) { @@ -51,7 +57,7 @@ const Demo = React.createClass({ return (
- +
- 选项卡一 - 选项卡二 - 选项卡三 + Tab 1 + Tab 2 + Tab 3 , mountNode); ```` diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md index f685d9d734..b29f3be5ae 100644 --- a/components/tabs/demo/editable-card.md +++ b/components/tabs/demo/editable-card.md @@ -3,8 +3,14 @@ order: 9 title: 新增和关闭页签 --- +## zh-CN + 只有卡片样式的页签支持新增和关闭选项。 +## en-US + +Only card type Tabs support adding & closeable. + ````jsx import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; @@ -13,8 +19,8 @@ const Demo = React.createClass({ getInitialState() { this.newTabIndex = 0; const panes = [ - { title: '选项卡', content: '选项卡一内容', key: '1' }, - { title: '选项卡', content: '选项卡二内容', key: '2' }, + { title: 'Tab 1', content: 'Content of Tab 1', key: '1' }, + { title: 'Tab 2', content: 'Content of Tab 2', key: '2' }, ]; return { activeKey: panes[0].key, @@ -30,7 +36,7 @@ const Demo = React.createClass({ add() { const panes = this.state.panes; const activeKey = `newTab${this.newTabIndex++}`; - panes.push({ title: '新建页签', content: '新页面', key: activeKey }); + panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey }); this.setState({ panes, activeKey }); }, remove(targetKey) { diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md index 058403ecb4..dd4eec5309 100644 --- a/components/tabs/demo/extra.md +++ b/components/tabs/demo/extra.md @@ -3,19 +3,26 @@ order: 4 title: 附加内容 --- +## zh-CN + 可以在页签右边添加附加操作。 +## en-US + +You can add extra actions to the right of Tabs. + + ````jsx import { Tabs, Button } from 'antd'; const TabPane = Tabs.TabPane; -const operations = ; +const operations = ; ReactDOM.render( - 选项卡一内容 - 选项卡二内容 - 选项卡三内容 + Content of tab 1 + Content of tab 2 + Content of tab 3 , mountNode); ```` diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md index 3f620a74c0..3d98f22b06 100644 --- a/components/tabs/demo/icon.md +++ b/components/tabs/demo/icon.md @@ -3,19 +3,26 @@ order: 2 title: 图标 --- +## zh-CN + 有图标的标签。 +## en-US + +The Tab with Icon. + + ````jsx import { Tabs, Icon } from 'antd'; const TabPane = Tabs.TabPane; ReactDOM.render( - 选项卡一} key="1"> - 选项卡一 + Tab 1} key="1"> + Tab 1 - 选项卡二} key="2"> - 选项卡二 + Tab 2} key="2"> + Tab 2 , mountNode); diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md index 8ba2eddf4e..06e734e927 100644 --- a/components/tabs/demo/position.md +++ b/components/tabs/demo/position.md @@ -3,8 +3,14 @@ order: 6 title: 位置 --- +## zh-CN + 有四个位置，`tabPosition="left|right|top|bottom"`。 +## en-US + +Tab's position: left, right, top or bottom. + ````jsx import { Tabs, Select } from 'antd'; const TabPane = Tabs.TabPane; @@ -34,9 +40,9 @@ const Demo = React.createClass({
- 选项卡一内容 - 选项卡二内容 - 选项卡三内容 + Content of Tab 1 + Content of Tab 2 + Content of Tab 3 ); diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md index 19e455e4fb..bb079f93f4 100644 --- a/components/tabs/demo/size.md +++ b/components/tabs/demo/size.md @@ -3,17 +3,23 @@ order: 5 title: 迷你型 --- +## zh-CN + 用在弹出框等较狭窄的容器内。 +## en-US + +Small size can be uesed in Modal. + ````jsx import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; ReactDOM.render( - 选项卡一内容 - 选项卡二内容 - 选项卡三内容 + Content of tab 1 + Content of tab 2 + Content of tab 3 , mountNode); ```` diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md index 1439e4d9ac..e04f49b6e2 100644 --- a/components/tabs/demo/slide.md +++ b/components/tabs/demo/slide.md @@ -3,23 +3,29 @@ order: 3 title: 滑动 --- +## zh-CN + 可以左右滑动，容纳更多标签。 +## en-US + +Tab can be slide to left or right, which is used for a lot of tabs. + ````jsx import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; ReactDOM.render( - 选项卡一 - 选项卡二 - 选项卡三 - 选项卡四 - 选项卡五 - 选项卡六 - 选项卡七 - 选项卡八 - 选项卡九 + Content of tab 1 + Content of tab 2 + Content of tab 3 + Content of tab 4 + Content of tab 5 + Content of tab 6 + Content of tab 7 + Content of tab 8 + Content of tab 9 , mountNode); ```` diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md new file mode 100644 index 0000000000..9a58df0157 --- /dev/null +++ b/components/tabs/index.en-US.md @@ -0,0 +1,40 @@ +--- +category: Components +type: Navigation +english: Tabs +--- + +Tabs make it easy to switch between different views. + +### When to use + +Ant Design has 3 types Tabs for different situation. + +- Card Tabs: for managing too many closeable views. + +- Normall Tabs: for functional aspects of a page. + +- RadioButton: for secondary tabs. + +## API + +### Tabs + +| Property | Description | Type | Default | +|--------------|-----------------------|----------|--------------| +| activeKey | Current TabPane's key| String | _ | +| defaultActiveKey | Default actived tabPanel's key, if activeKey is not setted. | - | +| onChange | Callback when tab is switched | Function | - | +| onTabClick | Callback when tab is clicked | Function | - | +| tabBarExtraContent | Extra element in tab bar | React Node | - | +| type | Basic style of tabs. Options: line, card & editable-card | String | line | +| size | Tab bar size. Options: default, small | String | default | +| tabPosition | Position of tabs. Options: top, right, bottom & left | String | top | +| onEdit | Callback when tab is added or removed, which is executing when set type as editable-card | Function(targetKey, action) | - | +| hideAdd | Hide plus icon or not, which is effective when set type as editable-card | Boolean | false | + +### Tabs.TabPane +| Property | Description | Type | Default | +|--------------|-----------------------|----------|--------------| +| key | TabPane's key | String | _ | +| tab | Show text in TabPane's head | React.Element or String | _ | \ No newline at end of file diff --git a/components/tabs/index.md b/components/tabs/index.zh-CN.md similarity index 100% rename from components/tabs/index.md rename to components/tabs/index.zh-CN.md