mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
羽航
commit
89c34ebceb
@ -2,13 +2,12 @@
|
||||
|
||||
- order: 2
|
||||
|
||||
和 `react-router@1.0.0-beta3` 进行结合使用。
|
||||
和 `react-router@1.x` 进行结合使用。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var ReactRouter = require('react-router');
|
||||
var history = require('react-router/lib/HashHistory').history;
|
||||
var Router = ReactRouter.Router;
|
||||
var Route = ReactRouter.Route;
|
||||
var Link = ReactRouter.Link;
|
||||
@ -37,13 +36,13 @@ var Home = React.createClass({
|
||||
paddingBottom: 15,
|
||||
borderBottom: '1px dashed #ccc'
|
||||
}}>点击上面的导航切换页面，面包屑在下面：</div>
|
||||
<Breadcrumb router={ReactRouter} />
|
||||
<Breadcrumb {...this.props} router={ReactRouter} />
|
||||
</div>);
|
||||
}
|
||||
});
|
||||
|
||||
React.render((
|
||||
<Router history={history}>
|
||||
<Router>
|
||||
<Route name="home" breadcrumbName="首页" path="/" component={Home} ignoreScrollBehavior>
|
||||
<Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
|
||||
<Route name="app" breadcrumbName="应用:id" path=":id" />
|
||||
|
||||
@ -18,27 +18,27 @@ let BreadcrumbItem = React.createClass({
|
||||
|
||||
let Breadcrumb = React.createClass({
|
||||
propTypes: {
|
||||
router: React.PropTypes.object
|
||||
},
|
||||
contextTypes: {
|
||||
router: React.PropTypes.object
|
||||
router: React.PropTypes.object,
|
||||
routes: React.PropTypes.array,
|
||||
params: React.PropTypes.object
|
||||
},
|
||||
render() {
|
||||
let crumbs, routes, params;
|
||||
let crumbs;
|
||||
let ReactRouter = this.props.router;
|
||||
if (this.context.router && ReactRouter) {
|
||||
let routes = this.props.routes;
|
||||
let params = this.props.params;
|
||||
if (routes && routes.length > 0 && ReactRouter) {
|
||||
let Link = ReactRouter.Link;
|
||||
routes = this.context.router.state.branch;
|
||||
params = this.context.router.state.params;
|
||||
crumbs = routes.map(function(route, i) {
|
||||
let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
|
||||
return params[key] || replacement;
|
||||
});
|
||||
let link;
|
||||
let path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
|
||||
if (i === routes.length - 1) {
|
||||
link = <span>{name}</span>;
|
||||
} else {
|
||||
link = <Link to={route.path} params={params}>{name}</Link>;
|
||||
link = <Link to={path} params={params}>{name}</Link>;
|
||||
}
|
||||
return <BreadcrumbItem key={name}>{link}</BreadcrumbItem>;
|
||||
});
|
||||
|
||||
@ -13,3 +13,28 @@
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
- 当需要告知用户“你在哪里”时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
## API
|
||||
|
||||
```html
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
```
|
||||
|
||||
### Breadcrumb
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------|------------------------------------------|------------|---------|--------|
|
||||
| router | 可传入 react-router 的实例 | Object | | - |
|
||||
| routes | router 的路由栈信息 | Array | | - |
|
||||
| params | 路由的参数 | Object | | - |
|
||||
|
||||
### Breadcrumb.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------|------------------------------------------|------------|---------|--------|
|
||||
| href | 链接，如不传则不可点击 | string | | - |
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
# 默认
|
||||
# 进场和离场
|
||||
|
||||
- order: 0
|
||||
|
||||
默认子节点进场动画。
|
||||
- order: 1
|
||||
|
||||
自动。
|
||||
|
||||
---
|
||||
|
||||
@ -13,12 +12,12 @@ var EnterAnimation = antd.EnterAnimation;
|
||||
var Test = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
show:true,
|
||||
show: true
|
||||
}
|
||||
},
|
||||
onClick() {
|
||||
this.setState({
|
||||
show:!this.state.show,
|
||||
show: !this.state.show
|
||||
})
|
||||
},
|
||||
render() {
|
||||
@ -28,22 +27,8 @@ var Test = React.createClass({
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
|
||||
</div>
|
||||
<EnterAnimation>
|
||||
{this.state.show ? <div key='a'>
|
||||
<div className="demo-header">
|
||||
<div className="logo">
|
||||
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
|
||||
<span>logo</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="demo-content" >
|
||||
<div className="demo-title">我是标题</div>
|
||||
{this.state.show ?
|
||||
<div className="demo-content" key='a'>
|
||||
<div className="demo-kp">
|
||||
<ul>
|
||||
<li></li>
|
||||
@ -51,7 +36,6 @@ var Test = React.createClass({
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="demo-title">我是标题</div>
|
||||
<div className="demo-listBox">
|
||||
<div className="demo-list">
|
||||
<div className="title"></div>
|
||||
@ -59,13 +43,9 @@ var Test = React.createClass({
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="demo-footer"></div>
|
||||
</div> : null}
|
||||
</EnterAnimation>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 指定节点动画进出场
|
||||
|
||||
- order: 2
|
||||
- order: 3
|
||||
|
||||
通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。
|
||||
|
||||
@ -18,6 +18,7 @@ var Test = React.createClass({
|
||||
interval: .1,
|
||||
},
|
||||
leave: {
|
||||
type:'left',
|
||||
interval: 0.03
|
||||
},
|
||||
show: true
|
||||
@ -37,7 +38,6 @@ var Test = React.createClass({
|
||||
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
|
||||
{this.state.show ? <div key='enter-data'>
|
||||
<div className="demo-content">
|
||||
<div className="demo-title" enter-data={{type: 'alpha'}}>我是标题</div>
|
||||
<div className="demo-kp">
|
||||
<ul>
|
||||
<li enter-data></li>
|
||||
@ -45,7 +45,6 @@ var Test = React.createClass({
|
||||
<li enter-data></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="demo-title" enter-data={{type: 'alpha', queueId: 1, delay: 0.8}} leave-data={{delay: 0.1}}>我是标题</div>
|
||||
<div className="demo-listBox">
|
||||
<div className="demo-list">
|
||||
<div className="title" enter-data={{type: 'bottom', queueId: 1}}></div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 配置进出场的样式
|
||||
|
||||
- order: 1
|
||||
- order: 2
|
||||
|
||||
配置进出场动画样式。
|
||||
|
||||
@ -43,22 +43,8 @@ var Test = React.createClass({
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
|
||||
</div>
|
||||
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
|
||||
{this.state.show ? <div key='a'>
|
||||
<div className="demo-header">
|
||||
<div className="logo">
|
||||
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
|
||||
<span>logo</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="demo-content" >
|
||||
<div className="demo-title">我是标题</div>
|
||||
{this.state.show ?
|
||||
<div className="demo-content" key='demo'>
|
||||
<div className="demo-kp">
|
||||
<ul>
|
||||
<li></li>
|
||||
@ -66,7 +52,6 @@ var Test = React.createClass({
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="demo-title">我是标题</div>
|
||||
<div className="demo-listBox">
|
||||
<div className="demo-list">
|
||||
<div className="title"></div>
|
||||
@ -74,13 +59,9 @@ var Test = React.createClass({
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="demo-footer"></div>
|
||||
</div> : null}
|
||||
</EnterAnimation>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 表单动画进出场
|
||||
|
||||
- order: 4
|
||||
- order: 6
|
||||
|
||||
表单组合的进场与出场动画。
|
||||
|
||||
@ -26,6 +26,7 @@ var Test = React.createClass({
|
||||
type: 'left',
|
||||
reverse: true,
|
||||
interval: 0.05,
|
||||
ease:'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
|
||||
callback: ()=> {
|
||||
console.log('出场结束')
|
||||
}
|
||||
|
||||
95
components/enter-animation/demo/page.md
Normal file
95
components/enter-animation/demo/page.md
Normal file
@ -0,0 +1,95 @@
|
||||
# 页面的进场和离场
|
||||
|
||||
- order: 5
|
||||
|
||||
页面的进场和离场。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var EnterAnimation = antd.EnterAnimation;
|
||||
|
||||
var Test = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
show: true,
|
||||
enter:{
|
||||
type:'right',
|
||||
ease:'cubic-bezier(0.19, 1, 0.22, 1)'
|
||||
},
|
||||
leave:{
|
||||
type:'left',
|
||||
ease:'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
|
||||
reverse:true,
|
||||
interval:0.05
|
||||
}
|
||||
}
|
||||
},
|
||||
onClick() {
|
||||
this.setState({
|
||||
show: !this.state.show
|
||||
})
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div style={{marginBottom: 20}}>
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
|
||||
</div>
|
||||
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
|
||||
{this.state.show ? <div key='a'>
|
||||
<div className="demo-header" enter-data leave-data={{type:'alpha'}}>
|
||||
<div className="logo" leave-data={{type:'left'}}>
|
||||
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
|
||||
<span>logo</span>
|
||||
</div>
|
||||
<ul >
|
||||
<li enter-data leave-data={{type:'right'}}></li>
|
||||
<li enter-data leave-data={{type:'right'}}></li>
|
||||
<li enter-data leave-data={{type:'right'}}></li>
|
||||
<li enter-data leave-data={{type:'right'}}></li>
|
||||
<li enter-data leave-data={{type:'right'}}></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="demo-content" >
|
||||
<div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:1}}>我是标题</div>
|
||||
<div className="demo-kp">
|
||||
<ul>
|
||||
<li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
|
||||
<li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
|
||||
<li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1,delay:0.2}}></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:2}}>我是标题</div>
|
||||
<div className="demo-listBox">
|
||||
<div className="demo-list">
|
||||
<div className="title" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
|
||||
<ul>
|
||||
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
|
||||
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
|
||||
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
|
||||
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
|
||||
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="demo-footer" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
|
||||
</div> : null}
|
||||
</EnterAnimation>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<Test />
|
||||
, document.getElementById('components-enter-animation-demo-page'));
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-enter-animation-demo-page {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
# Router 默认进出场
|
||||
|
||||
- order: 5
|
||||
- order: 7
|
||||
|
||||
router 组合的进场与出场动画。
|
||||
|
||||
@ -8,7 +8,6 @@ router 组合的进场与出场动画。
|
||||
|
||||
````jsx
|
||||
var ReactRouter = require('react-router');
|
||||
var history = require('react-router/lib/HashHistory').history;
|
||||
var Router = ReactRouter.Router;
|
||||
var Route = ReactRouter.Route;
|
||||
var Link = ReactRouter.Link;
|
||||
@ -30,6 +29,9 @@ var App = React.createClass({
|
||||
return (
|
||||
<div>
|
||||
<Menu style={{marginBottom: 20}} mode="horizontal">
|
||||
<Menu.Item key='home'>
|
||||
<Link to="/" onClick={this.clickPage}>首页</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key='page1'>
|
||||
<Link to="/page1" onClick={this.clickPage}>Page 1</Link>
|
||||
</Menu.Item>
|
||||
@ -72,7 +74,7 @@ var Page2 = React.createClass({
|
||||
}
|
||||
});
|
||||
React.render((
|
||||
<Router history={history}>
|
||||
<Router>
|
||||
<Route path="/" component={App} ignoreScrollBehavior>
|
||||
<Route path="page1" component={Page1} />
|
||||
<Route path="page2" component={Page2} />
|
||||
|
||||
27
components/enter-animation/demo/simple.md
Normal file
27
components/enter-animation/demo/simple.md
Normal file
@ -0,0 +1,27 @@
|
||||
# 默认
|
||||
|
||||
- order: 0
|
||||
|
||||
最简单的进场例子。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var EnterAnimation = antd.EnterAnimation;
|
||||
|
||||
React.render(
|
||||
<EnterAnimation>
|
||||
<ul key="key">
|
||||
<li>依次进场</li>
|
||||
<li>依次进场</li>
|
||||
<li>依次进场</li>
|
||||
<li>依次进场</li>
|
||||
<li>依次进场</li>
|
||||
<li>依次进场</li>
|
||||
<li>依次进场</li>
|
||||
<li>依次进场</li>
|
||||
</ul>
|
||||
</EnterAnimation>
|
||||
, document.getElementById('components-enter-animation-demo-simple'));
|
||||
````
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# style 自定义样式动画进出场
|
||||
|
||||
- order: 3
|
||||
- order: 4
|
||||
|
||||
通过加上属性里的 `style` 来自定义 CSS 动画进出场。
|
||||
|
||||
@ -40,7 +40,6 @@ var Test = React.createClass({
|
||||
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
|
||||
{this.state.show ? <div key='enter-data'>
|
||||
<div className="demo-content">
|
||||
<div className="demo-title" enter-data={{style: {opacity: 0}}}>我是标题</div>
|
||||
<div className="demo-kp">
|
||||
<ul>
|
||||
<li enter-data></li>
|
||||
@ -48,7 +47,6 @@ var Test = React.createClass({
|
||||
<li enter-data></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="demo-title" enter-data={{style: {opacity: 0}, queueId: 1, delay: 0.8}} leave-data={{delay: 0.1}}>我是标题</div>
|
||||
<div className="demo-listBox">
|
||||
<div className="demo-list">
|
||||
<div className="title" enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></div>
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。
|
||||
|
||||
```html
|
||||
<EnterAnimation type="left" delay={2}>
|
||||
<EnterAnimation enter={type:'left',delay:2}>
|
||||
<div key='demo'>
|
||||
<div>
|
||||
<div enter-data>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<meta http-equiv="refresh" content="0; url=/components/button" />
|
||||
64
components/menu/demo/sider-current.md
Normal file
64
components/menu/demo/sider-current.md
Normal file
@ -0,0 +1,64 @@
|
||||
# 只展开当前父级菜单
|
||||
|
||||
- order: 2
|
||||
|
||||
点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Menu = antd.Menu;
|
||||
var SubMenu = Menu.SubMenu;
|
||||
|
||||
var Sider = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
current: '1',
|
||||
openKeys: []
|
||||
}
|
||||
},
|
||||
handleClick(e) {
|
||||
console.log('click ', e);
|
||||
this.setState({
|
||||
current: e.key,
|
||||
openKeys: e.keyPath.slice(1)
|
||||
});
|
||||
},
|
||||
onToggle(info){
|
||||
this.setState({
|
||||
openKeys: info.openKeys
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return <Menu onClick={this.handleClick}
|
||||
style={{width:240}}
|
||||
openKeys={this.state.openKeys}
|
||||
onOpen={this.onToggle}
|
||||
onClose={this.onToggle}
|
||||
selectedKeys={[this.state.current]}
|
||||
mode="inline">
|
||||
<SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
|
||||
<Menu.Item key="1">选项1</Menu.Item>
|
||||
<Menu.Item key="2">选项2</Menu.Item>
|
||||
<Menu.Item key="3">选项3</Menu.Item>
|
||||
<Menu.Item key="4">选项4</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
|
||||
<Menu.Item key="5">选项5</Menu.Item>
|
||||
<Menu.Item key="6">选项6</Menu.Item>
|
||||
<SubMenu key="sub3" title="三级导航">
|
||||
<Menu.Item key="7">选项7</Menu.Item>
|
||||
<Menu.Item key="8">选项8</Menu.Item>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
|
||||
<Menu.Item key="9">选项9</Menu.Item>
|
||||
<Menu.Item key="10">选项10</Menu.Item>
|
||||
<Menu.Item key="11">选项11</Menu.Item>
|
||||
<Menu.Item key="12">选项12</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>;
|
||||
}
|
||||
});
|
||||
React.render(<Sider />, document.getElementById('components-menu-demo-sider-current'));
|
||||
````
|
||||
@ -1,6 +1,6 @@
|
||||
# 垂直菜单
|
||||
|
||||
- order: 2
|
||||
- order: 3
|
||||
|
||||
子菜单是弹出的形式。
|
||||
|
||||
|
||||
@ -473,12 +473,14 @@ let AntTable = React.createClass({
|
||||
return column;
|
||||
});
|
||||
let emptyText;
|
||||
let emptyClass = '';
|
||||
if (!data || data.length === 0) {
|
||||
emptyText = <div className="ant-table-empty">
|
||||
emptyText = <div className="ant-table-placeholder">
|
||||
<i className="anticon anticon-frown"></i>暂无数据
|
||||
</div>;
|
||||
emptyClass = ' ant-table-empty';
|
||||
}
|
||||
return <div className="clearfix">
|
||||
return <div className={'clearfix' + emptyClass}>
|
||||
<Table
|
||||
{...this.props}
|
||||
data={data}
|
||||
|
||||
@ -5,7 +5,48 @@
|
||||
|
||||
---
|
||||
|
||||
可以直接下载文件或使用 npm 进行安装。
|
||||
可以使用 npm 进行安装或直接下载文件。
|
||||
|
||||
## 从 npm 安装
|
||||
|
||||
**我们推荐使用 npm 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
|
||||
|
||||
可以通过 npm 直接安装到本地，使用 `require` 或 `import` 进行引用。
|
||||
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
|
||||
```bash
|
||||
$ npm install antd --save
|
||||
```
|
||||
|
||||
安装最新的开发版本：
|
||||
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
|
||||
```bash
|
||||
$ npm install antd@beta --save
|
||||
```
|
||||
|
||||
### 开发工具
|
||||
|
||||
我们提供了开发构建的命令行工具，可以安装到全局直接使用。
|
||||
|
||||
```bash
|
||||
$ npm install antd-bin -g
|
||||
```
|
||||
|
||||
或者安装到仓库下，使用 `package.json` 的 `scripts` 字段来配置命令：
|
||||
|
||||
```bash
|
||||
$ npm install antd-bin --save-dev
|
||||
```
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"dev": "antd server",
|
||||
"build": "antd build"
|
||||
}
|
||||
```
|
||||
|
||||
## 直接下载
|
||||
|
||||
@ -34,47 +75,6 @@
|
||||
|
||||
- **历史版本**：https://github.com/ant-design/ant-design/releases
|
||||
|
||||
## npm
|
||||
|
||||
**我们推荐使用 npm 的方式进行开发**，这样可以享受整个生态圈和工具链带来的诸多好处。
|
||||
|
||||
可以通过 npm 直接安装到本地，使用 `require` 或 `import` 进行引用。
|
||||
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
|
||||
```bash
|
||||
$ npm install antd --save
|
||||
```
|
||||
|
||||
安装最新的开发版本：
|
||||
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
|
||||
```bash
|
||||
$ npm install antd@beta --save
|
||||
```
|
||||
|
||||
## 开发工具
|
||||
|
||||
我们提供了开发构建的命令行工具，可以安装到全局直接使用：
|
||||
|
||||
```bash
|
||||
$ npm install antd-bin -g
|
||||
```
|
||||
|
||||
或者安装到仓库下，使用 `package.json` 的 `scripts` 字段来配置命令：
|
||||
|
||||
```bash
|
||||
$ npm install antd-bin --save-dev
|
||||
```
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"dev": "antd server",
|
||||
"build": "antd build"
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
.versions {
|
||||
font-weight: bold;
|
||||
|
||||
10
package.json
10
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "0.9.1-beta1",
|
||||
"version": "0.9.1-beta4",
|
||||
"stableVersion": "0.9.0",
|
||||
"title": "Ant Design",
|
||||
"description": "一个 UI 设计语言",
|
||||
@ -33,7 +33,7 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"css-animation": "~1.1.0",
|
||||
"enter-animation": "~0.4.9",
|
||||
"enter-animation": "~0.5.0",
|
||||
"gregorian-calendar": "~3.0.0",
|
||||
"gregorian-calendar-format": "~3.0.1",
|
||||
"object-assign": "~4.0.1",
|
||||
@ -45,7 +45,7 @@
|
||||
"rc-dropdown": "~1.3.3",
|
||||
"rc-form-validation": "~2.4.7",
|
||||
"rc-input-number": "~2.0.1",
|
||||
"rc-menu": "~4.4.2",
|
||||
"rc-menu": "~4.6.0",
|
||||
"rc-notification": "~1.1.0",
|
||||
"rc-pagination": "~1.1.0",
|
||||
"rc-progress": "~1.0.0",
|
||||
@ -66,7 +66,7 @@
|
||||
"velocity-animate": "~1.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer-loader": "^2.0.0",
|
||||
"autoprefixer-loader": "^3.1.0",
|
||||
"babel": "^5.8.12",
|
||||
"babel-core": "^5.8.12",
|
||||
"babel-eslint": "^4.1.0",
|
||||
@ -87,7 +87,7 @@
|
||||
"lodash": "^3.10.0",
|
||||
"nico-jsx": "~0.5.8",
|
||||
"precommit-hook": "^1.0.7",
|
||||
"react-router": "1.0.0-beta3",
|
||||
"react-router": "1.0.0-rc1",
|
||||
"webpack": "^1.10.1",
|
||||
"webpack-dev-middleware": "^1.2.0"
|
||||
},
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
window['css-animation'] = require('css-animation');
|
||||
window['react-router'] = require('react-router');
|
||||
window['react-router']['HashHistory'] = require('react-router/lib/HashHistory');
|
||||
var antd = require('antd');
|
||||
|
||||
var $ = require('jquery');
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
|
||||
- category: 动画
|
||||
- order: 0
|
||||
- noinstant: true
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
outline: none;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-decade-panel-hidden {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
outline: none;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-month-panel-hidden {
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
position: absolute;
|
||||
outline: none;
|
||||
border-radius: 6px;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-time-panel-header {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
outline: none;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-year-panel-hidden {
|
||||
|
||||
@ -17,35 +17,4 @@
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
|
||||
&-wrap-hidden > &-mask&-fade-enter,
|
||||
&-wrap-hidden > &-mask&-fade-leave {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fade-effect() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: @ease-in;
|
||||
}
|
||||
|
||||
&-fade-enter {
|
||||
opacity: 0;
|
||||
.fade-effect();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-leave {
|
||||
.fade-effect();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-enter&-fade-enter-active {
|
||||
animation-name: fadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-fade-leave&-fade-leave-active {
|
||||
animation-name: fadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,6 +67,7 @@ input[type="checkbox"] {
|
||||
// Form items
|
||||
// You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
|
||||
.@{css-prefix}form-item {
|
||||
font-size: @font-size-base;
|
||||
margin-bottom: @form-item-margin-bottom;
|
||||
color: #666;
|
||||
|
||||
@ -111,10 +112,6 @@ input[type="checkbox"] {
|
||||
|
||||
// 表单下的输入框尺寸唯一: 大尺寸
|
||||
form {
|
||||
* {
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
.has-feedback {
|
||||
.@{iconfont-css-prefix} {
|
||||
.square(@input-height-lg);
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
box-shadow: @overlay-shadow;
|
||||
border-radius: @border-radius-base;
|
||||
color: @text-color;
|
||||
background: #fff;
|
||||
|
||||
&-item-group-list {
|
||||
margin: 0;
|
||||
|
||||
@ -7,7 +7,10 @@
|
||||
.@{table-prefix-cls} {
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&-body {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
@ -77,10 +80,10 @@
|
||||
}
|
||||
|
||||
&-loading {
|
||||
.ant-table-body {
|
||||
position: relative;
|
||||
.@{table-prefix-cls}-body {
|
||||
opacity: 0.42;
|
||||
}
|
||||
position: relative;
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
@ -179,13 +182,25 @@
|
||||
}
|
||||
|
||||
&-empty {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&-empty &-body {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
margin-bottom: 16px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
.anticon {
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
@ -239,7 +254,7 @@
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 15px;
|
||||
border: 1px solid #E9E9E9;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
@ -1,27 +1,18 @@
|
||||
.fade-enter, .fade-appear {
|
||||
opacity: 0;
|
||||
.motion-common();
|
||||
animation-timing-function: linear;
|
||||
animation-play-state: paused;
|
||||
.fade-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
opacity: 0;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
.@{className}-leave {
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-leave {
|
||||
.motion-common();
|
||||
animation-timing-function: linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.fade-motion(fade, antFade);
|
||||
.fade-motion(ant-modal-fade, antFade);
|
||||
|
||||
.fade-enter.fade-enter-active, .fade-appear.fade-appear-active {
|
||||
animation-name: fadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.fade-leave.fade-leave-active {
|
||||
animation-name: fadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@keyframes antFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -30,7 +21,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
@keyframes antFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -9,12 +9,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.move-motion(move-up, moveUp);
|
||||
.move-motion(move-down, moveDown);
|
||||
.move-motion(move-left, moveLeft);
|
||||
.move-motion(move-right, moveRight);
|
||||
.move-motion(move-up, antMoveUp);
|
||||
.move-motion(move-down, antMoveDown);
|
||||
.move-motion(move-left, antMoveLeft);
|
||||
.move-motion(move-right, antMoveRight);
|
||||
|
||||
@keyframes moveDownIn {
|
||||
@keyframes antMoveDownIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(100%);
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveDownOut {
|
||||
@keyframes antMoveDownOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLeftIn {
|
||||
@keyframes antMoveLeftIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(-100%);
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLeftOut {
|
||||
@keyframes antMoveLeftOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveRightIn {
|
||||
@keyframes antMoveRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0 0;
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveRightOut {
|
||||
@keyframes antMoveRightOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0%);
|
||||
@ -92,7 +92,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveUpIn {
|
||||
@keyframes antMoveUpIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(-100%);
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveUpOut {
|
||||
@keyframes antMoveUpOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(0%);
|
||||
|
||||
@ -9,12 +9,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.slide-motion(slide-up, slideUp);
|
||||
.slide-motion(slide-down, slideDown);
|
||||
.slide-motion(slide-left, slideLeft);
|
||||
.slide-motion(slide-right, slideRight);
|
||||
.slide-motion(slide-up, antSlideUp);
|
||||
.slide-motion(slide-down, antSlideDown);
|
||||
.slide-motion(slide-left, antSlideLeft);
|
||||
.slide-motion(slide-right, antSlideRight);
|
||||
|
||||
@keyframes slideUpIn {
|
||||
@keyframes antSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUpOut {
|
||||
@keyframes antSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownIn {
|
||||
@keyframes antSlideDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 100%;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownOut {
|
||||
@keyframes antSlideDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 100%;
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeftIn {
|
||||
@keyframes antSlideLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeftOut {
|
||||
@keyframes antSlideLeftOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
@ -92,7 +92,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRightIn {
|
||||
@keyframes antSlideRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRightOut {
|
||||
@keyframes antSlideRightOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 0%;
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.swing-motion(swing, swing);
|
||||
.swing-motion(swing, antSwing);
|
||||
|
||||
@keyframes swingIn {
|
||||
@keyframes antSwingIn {
|
||||
0%, 100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
@ -9,14 +9,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-motion(zoom, zoom);
|
||||
.zoom-motion(zoom-big, zoomBig);
|
||||
.zoom-motion(zoom-up, zoomUp);
|
||||
.zoom-motion(zoom-down, zoomDown);
|
||||
.zoom-motion(zoom-left, zoomLeft);
|
||||
.zoom-motion(zoom-right, zoomRight);
|
||||
.zoom-motion(zoom, antZoom);
|
||||
.zoom-motion(zoom-big, antZoomBig);
|
||||
.zoom-motion(zoom-up, antZoomUp);
|
||||
.zoom-motion(zoom-down, antZoomDown);
|
||||
.zoom-motion(zoom-left, antZoomLeft);
|
||||
.zoom-motion(zoom-right, antZoomRight);
|
||||
|
||||
@keyframes zoomIn {
|
||||
@keyframes antZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomOut {
|
||||
@keyframes antZoomOut {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@keyframes zoomBigIn {
|
||||
@keyframes antZoomBigIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.8);
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomBigOut {
|
||||
@keyframes antZoomBigOut {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomUpIn {
|
||||
@keyframes antZoomUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 0%;
|
||||
@ -67,7 +67,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomUpOut {
|
||||
@keyframes antZoomUpOut {
|
||||
0% {
|
||||
transform-origin: 50% 0%;
|
||||
transform: scale(1);
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomLeftIn {
|
||||
@keyframes antZoomLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 50%;
|
||||
@ -91,7 +91,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomLeftOut {
|
||||
@keyframes antZoomLeftOut {
|
||||
0% {
|
||||
transform-origin: 0% 50%;
|
||||
transform: scale(1);
|
||||
@ -103,7 +103,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomRightIn {
|
||||
@keyframes antZoomRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 50%;
|
||||
@ -115,7 +115,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomRightOut {
|
||||
@keyframes antZoomRightOut {
|
||||
0% {
|
||||
transform-origin: 100% 50%;
|
||||
transform: scale(1);
|
||||
@ -127,7 +127,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomDownIn {
|
||||
@keyframes antZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
@ -139,7 +139,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomDownOut {
|
||||
@keyframes antZoomDownOut {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user