提交 c1039185 编写于 作者: A afc163

Add simple breadcrumb

上级 65f72a5e
# 基本
- order: 0
最简单的用法。
---
````jsx
var Breadcrumb = antd.Breadcrumb;
React.render(
<Breadcrumb>
<Breadcrumb.Item href="">首页</Breadcrumb.Item>
<Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
<Breadcrumb.Item>应用</Breadcrumb.Item>
</Breadcrumb>
, document.getElementById('components-breadcrumb-demo-basic'));
````
'use strict';
import React from 'react';
let prefixCls = 'ant-breadcrumb';
let BreadcrumbItem = React.createClass({
render() {
var link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
var slash = <span className={prefixCls + '-slash'}>/</span>;
if (typeof this.props.href === 'undefined') {
slash = '';
link = <span className={prefixCls + '-link'} {...this.props}>{this.props.children}</span>;
}
return (
<span>
{link}
{slash}
</span>
);
}
});
let Breadcrumb = React.createClass({
render() {
return (
<div className={prefixCls}>
{this.props.children}
</div>
);
}
});
Breadcrumb.Item = BreadcrumbItem;
export default Breadcrumb;
# BreadCrumb
- category: CSS
- category: Components
- chinese: 面包屑
---
......
......@@ -10,6 +10,7 @@ var antd = {
Progress: require('./components/progress'),
Popover: require('./components/popover'),
Select: require('./components/select'),
Breadcrumb: require('./components/breadcrumb'),
Popconfirm: require('./components/popconfirm'),
confirm: require('./components/modal/confirm'),
Steps: require('./components/steps')
......
@breadcrumbPrefixCls: ant-breadcrumb;
.@{breadcrumbPrefixCls} {
color: #999;
font-size: 12px;
a&-link {
color: #666;
}
> span:last-child {
font-weight: bold;
color: #666;
}
&-slash {
margin: 0 8px;
color: #d9d9d9;
}
}
......@@ -11,4 +11,5 @@
@import "form";
@import "loading";
@import "progress";
@import "steps";
\ No newline at end of file
@import "steps";
@import "breadcrumb";
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册