mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

docs: Traslation tabs (#2587)

Browse Source
This commit is contained in:
Shawn Sit 2016-08-02 21:39:20 -05:00 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 Expand all files Collapse all files

12
components/tabs/demo/basic.md
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
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
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
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
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
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
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
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
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
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
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 Normal file
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
View File