Mirrors
/
ant-design
mirror of https://github.com/ant-design/ant-design.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs: Traslation tabs (#2587)

Browse Source
pull/2600/head
Shawn Sit 9 years ago committed by Benjy Cui
parent 6f620b0e91
commit c04ba5b39b
13 changed files with 150 additions and 42 deletions
Show Stats Download Patch File Download Diff File

12
components/tabs/demo/basic.md
Unescape Escape View File

@ -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(
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
<TabPane tab="Tab 1" key="1">Conten of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Conten of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Conten of Tab Pane 2</TabPane>
</Tabs>
, mountNode);
````

11
components/tabs/demo/card-top.md
Unescape Escape View File

@ -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(
<div className="card-container">
<Tabs type="card">
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
<TabPane tab="Tab 1" key="1">Conten of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Conten of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Conten of Tab Pane 2</TabPane>
</Tabs>
</div>
, mountNode);

13
components/tabs/demo/card.md
Unescape Escape View File

@ -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(
<Tabs onChange={callback} type="card">
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
<TabPane tab="Tab 1" key="1">Conten of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Conten of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Conten of Tab Pane 2</TabPane>
</Tabs>
, mountNode);
````

14
components/tabs/demo/custom-add-trigger.md
Unescape Escape View File

@ -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 (
<div>
<div style={{ marginBottom: 16 }}>
<Button type="ghost" onClick={this.add}>新增</Button>
<Button type="ghost" onClick={this.add}>ADD</Button>
</div>
<Tabs
hideAdd

12
components/tabs/demo/disabled.md
Unescape Escape View File

@ -3,17 +3,23 @@ order: 1
title: 禁用
---
## zh-CN
禁用某一项。
## en-US
Disabled a tab.
````jsx
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
ReactDOM.render(
<Tabs defaultActiveKey="1">
<TabPane tab="选项卡一" key="1">选项卡一</TabPane>
<TabPane tab="选项卡二" disabled key="2">选项卡二</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三</TabPane>
<TabPane tab="Tab 1" key="1">Tab 1</TabPane>
<TabPane tab="Tab 2" disabled key="2">Tab 2</TabPane>
<TabPane tab="Tav 3" key="3">Tab 3</TabPane>
</Tabs>
, mountNode);
````

12
components/tabs/demo/editable-card.md
Unescape Escape View File

@ -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) {

15
components/tabs/demo/extra.md
Unescape Escape View File

@ -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 = <Button>额外操作</Button>;
const operations = <Button>Extra Action</Button>;
ReactDOM.render(
<Tabs tabBarExtraContent={operations}>
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
</Tabs>
, mountNode);
````

15
components/tabs/demo/icon.md
Unescape Escape View File

@ -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(
<Tabs defaultActiveKey="2">
<TabPane tab={<span><Icon type="apple" />选项卡一</span>} key="1">
选项卡一
<TabPane tab={<span><Icon type="apple" />Tab 1</span>} key="1">
Tab 1
</TabPane>
<TabPane tab={<span><Icon type="android" />选项卡二</span>} key="2">
选项卡二
<TabPane tab={<span><Icon type="android" />Tab 2</span>} key="2">
Tab 2
</TabPane>
</Tabs>
, mountNode);

12
components/tabs/demo/position.md
Unescape Escape View File

@ -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({
</Select>
</div>
<Tabs tabPosition={this.state.tabPosition}>
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
<TabPane tab="Tab 1" key="1">Content of Tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab 3</TabPane>
</Tabs>
</div>
);

12
components/tabs/demo/size.md
Unescape Escape View File

@ -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(
<Tabs defaultActiveKey="2" size="small">
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
</Tabs>
, mountNode);
````

24
components/tabs/demo/slide.md
Unescape Escape View File

@ -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(
<Tabs defaultActiveKey="1">
<TabPane tab="选项一" key="1">选项卡一</TabPane>
<TabPane tab="选项二" key="2">选项卡二</TabPane>
<TabPane tab="选项三" key="3">选项卡三</TabPane>
<TabPane tab="选项四" key="4">选项卡四</TabPane>
<TabPane tab="选项五" key="5">选项卡五</TabPane>
<TabPane tab="选项六" key="6">选项卡六</TabPane>
<TabPane tab="选项七" key="7">选项卡七</TabPane>
<TabPane tab="选项八" key="8">选项卡八</TabPane>
<TabPane tab="选项九" key="9">选项卡九</TabPane>
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
<TabPane tab="Tab 4" key="4">Content of tab 4</TabPane>
<TabPane tab="Tab 5" key="5">Content of tab 5</TabPane>
<TabPane tab="Tab 6" key="6">Content of tab 6</TabPane>
<TabPane tab="Tab 7" key="7">Content of tab 7</TabPane>
<TabPane tab="Tab 8" key="8">Content of tab 8</TabPane>
<TabPane tab="Tab 9" key="9">Content of tab 9</TabPane>
</Tabs>
, mountNode);
````

40
components/tabs/index.en-US.md
Unescape Escape View File

@ -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 | _ |

0
components/tabs/index.md → components/tabs/index.zh-CN.md
Unescape Escape View File

Write Preview
Loading…
Cancel
Save