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: add(translation)component/breadcrumb (#1969)

Browse Source
This commit is contained in:
The Rock 2016-06-19 11:14:21 +08:00 committed by Benjy Cui
parent 5a4805d691
commit 05b63147ad
6 changed files with 87 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/breadcrumb/demo/basic.md
View File

@ -1,19 +1,27 @@
---
order: 0
title: 基本
title:
zh-CN: 基本
en-US: Basic Usage
---
## zh-CN
最简单的用法。
## en-US
The simplest use
````jsx
import { Breadcrumb } from 'antd';
ReactDOM.render(
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item><a href="">应用中心</a></Breadcrumb.Item>
<Breadcrumb.Item><a href="">应用列表</a></Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
<Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>
, mountNode);
````

28
components/breadcrumb/demo/router.md
View File

@ -1,11 +1,19 @@
---
order: 2
iframe: true
title: 路由
title:
zh-CN: 路由
en-US: React Router Integration
---
## zh-CN
和 `react-router@2.x` 进行结合使用。
## en-US
Used together with `react-router@2.x`.
````jsx
import { Router, Route, Link, hashHistory } from 'react-router';
import { Breadcrumb } from 'antd';
@ -13,10 +21,10 @@ import { Breadcrumb } from 'antd';
const Apps = () => (
<ul className="app-list">
<li>
<Link to="/apps/1">应用1</Link>：<Link to="/apps/1/detail">详情</Link>
<Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
</li>
<li>
<Link to="/apps/2">应用2</Link>：<Link to="/apps/2/detail">详情</Link>
<Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
</li>
</ul>
);
@ -24,8 +32,8 @@ const Apps = () => (
const Home = (props) => (
<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
<Link to="/">Home</Link>
<Link to="/apps">Application List</Link>
</div>
{props.children || 'Home'}
<div
@ -36,7 +44,7 @@ const Home = (props) => (
borderBottom: '1px dashed #ccc',
}}
>
点击上面的导航切换页面，面包屑在下面：
Click the navigation above to switch the page,breadcrumb is right here:
</div>
<Breadcrumb {...props} />
</div>
@ -44,10 +52,10 @@ const Home = (props) => (
ReactDOM.render(
<Router history={hashHistory}>
<Route name="home" breadcrumbName="首页" path="/" component={Home}>
<Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
<Route name="app" breadcrumbName="应用:id" path=":id">
<Route name="detail" breadcrumbName="详情" path="detail" />
<Route name="home" breadcrumbName="Home" path="/" component={Home}>
<Route name="apps" breadcrumbName="Application List" path="apps" component={Apps}>
<Route name="app" breadcrumbName="Application:id" path=":id">
<Route name="detail" breadcrumbName="Detail" path="detail" />
</Route>
</Route>
</Route>

18
components/breadcrumb/demo/separator.md
View File

@ -1,19 +1,27 @@
---
order: 3
title: 分隔符
title:
zh-CN: 分隔符
en-US: Configuring the Separator
---
## zh-CN
使用 `separator=">"` 可以自定义分隔符。
## en-US
The separator can be customized by setting the separator property: separator=">"
````jsx
import { Breadcrumb } from 'antd';
ReactDOM.render(
<Breadcrumb separator=">">
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
<Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
<Breadcrumb.Item href="">Application List</Breadcrumb.Item>
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>
, mountNode);
````

14
components/breadcrumb/demo/withIcon.md
View File

@ -1,10 +1,18 @@
---
order: 1
title: 带有图标的
title:
zh-CN: 带有图标的
en-US: With an Icon
---
## zh-CN
图标放在文字前面。
## en-US
The icon should be placed in front of the text.
````jsx
import { Breadcrumb, Icon } from 'antd';
@ -15,10 +23,10 @@ ReactDOM.render(
</Breadcrumb.Item>
<Breadcrumb.Item href="">
<Icon type="user" />
应用列表
Application List
</Breadcrumb.Item>
<Breadcrumb.Item>
应用
Application
</Breadcrumb.Item>
</Breadcrumb>
, mountNode);

32
components/breadcrumb/index.en-US.md Normal file
View File

@ -0,0 +1,32 @@
---
category: Components
type: Navigation
title: Breadcrumb
---
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up within the hierarchy.
## When to use
- When the system has more than two layers in a hierarchy.
- When you need to inform the user of where they are.
- When the user may need to navigate back to a higher level When the application has multi-layer architecture.
## API
```html
<Breadcrumb>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Application Center</Breadcrumb.Item>
<Breadcrumb.Item>Application List</Breadcrumb.Item>
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>
```
| Property | Description | Type | Optional | Default |
|-----------|-----------------------------------|-----------------|---------|--------|
| routes | The routing stack information of router | Array | | - |
| params | Routing parameter | Object | | - |
| separator | Custom separator | String or Element | | '/' |
| linkRender | Custom link function，and react-router configuration | Function(href, name) | | - |
| nameRender | Custom link function，and react-router configuration | Function(name) | | - |

0
components/breadcrumb/index.md → components/breadcrumb/index.zh-CN.md
View File