mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
commit
a2f40306b8
15
CHANGELOG.md
15
CHANGELOG.md
@ -4,6 +4,21 @@
|
||||
|
||||
---
|
||||
|
||||
## 0.12.17
|
||||
|
||||
- 修复 FormItem 校验时表单项高度跳动的问题。[#1557](https://github.com/ant-design/ant-design/issues/1557)
|
||||
- 修复一个 Table 圆角样式的小问题。
|
||||
|
||||
## 0.12.16
|
||||
|
||||
- 修复 Collapse 在 safari 中切换动画异常的问题。[#1494](https://github.com/ant-design/ant-design/issues/1494)
|
||||
- 修复 Table 的 selectedRowKeys 在初次渲染时失效的问题。[#1501](https://github.com/ant-design/ant-design/issues/1501)
|
||||
- Table 现在点击选择框时将不再触发 `onRowClick`。[#1470](https://github.com/ant-design/ant-design/issues/1470)
|
||||
- 修复一个 Calender 服务端渲染时提示 `Option is not defined` 的问题。[#1521](https://github.com/ant-design/ant-design/issues/1521)
|
||||
- 修复 Menu 动态切换模式时的一些细节问题。
|
||||
- 优化了 export 导出图标。
|
||||
- 修复 Form 的一些样式细节。
|
||||
|
||||
## 0.12.15
|
||||
|
||||
- 升级 rc-collapse 修复一个性能问题。
|
||||
|
@ -83,7 +83,7 @@ export default class Button extends React.Component {
|
||||
Button.propTypes = {
|
||||
type: React.PropTypes.oneOf(['primary', 'ghost', 'dashed']),
|
||||
shape: React.PropTypes.oneOf(['circle', 'circle-outline']),
|
||||
size: React.PropTypes.oneOf(['large', 'small']),
|
||||
size: React.PropTypes.oneOf(['large', 'default', 'small']),
|
||||
htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']),
|
||||
onClick: React.PropTypes.func,
|
||||
loading: React.PropTypes.bool,
|
||||
|
@ -2,6 +2,7 @@ import React, { PropTypes, Component } from 'react';
|
||||
import { PREFIX_CLS } from './Constants';
|
||||
import Select from '../select';
|
||||
import { Group, Button } from '../radio';
|
||||
const Option = Select.Option;
|
||||
|
||||
function noop() {}
|
||||
|
||||
|
@ -9,6 +9,7 @@ function animate(node, show, transitionName, done) {
|
||||
function complete() {
|
||||
if (!ok) {
|
||||
ok = true;
|
||||
node.style.display = '';
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
@ -40,16 +40,16 @@ class FormItem extends React.Component {
|
||||
const props = this.props;
|
||||
const prefixCls = props.prefixCls;
|
||||
const help = this.getHelpMsg();
|
||||
return (
|
||||
<div className={!!help ? prefixClsFn(prefixCls, 'explain') : ''} key="help">
|
||||
{ help }
|
||||
return help ? (
|
||||
<div className={prefixClsFn(prefixCls, 'explain')} key="help">
|
||||
{help}
|
||||
</div>
|
||||
);
|
||||
) : null;
|
||||
}
|
||||
|
||||
renderExtra() {
|
||||
const { prefixCls, extra } = this.props;
|
||||
return <div className={prefixClsFn(prefixCls, 'extra')}>{extra}</div>;
|
||||
return <span className={prefixClsFn(prefixCls, 'extra')}>{extra}</span>;
|
||||
}
|
||||
|
||||
getValidateStatus() {
|
||||
|
65
components/menu/demo/switch-mode.md
Normal file
65
components/menu/demo/switch-mode.md
Normal file
@ -0,0 +1,65 @@
|
||||
# 切换
|
||||
|
||||
- order: 5
|
||||
|
||||
展示动态切换模式。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { Menu, Icon, Switch } from 'antd';
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
|
||||
const Sider = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
mode: 'inline',
|
||||
};
|
||||
},
|
||||
changeMode(value) {
|
||||
this.setState({
|
||||
mode: value ? 'vertical' : 'inline',
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Switch onChange={this.changeMode} />
|
||||
<br />
|
||||
<br />
|
||||
<Menu
|
||||
style={{ width: 240 }}
|
||||
defaultOpenKeys={['sub1']}
|
||||
mode={this.state.mode}>
|
||||
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
||||
<MenuItemGroup title="分组1">
|
||||
<Menu.Item key="1">选项1</Menu.Item>
|
||||
<Menu.Item key="2">选项2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup title="分组2">
|
||||
<Menu.Item key="3">选项3</Menu.Item>
|
||||
<Menu.Item key="4">选项4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub2" title={<span><Icon type="appstore" /><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><Icon type="setting" /><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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
ReactDOM.render(<Sider />, mountNode);
|
||||
````
|
@ -21,6 +21,12 @@ const AntMenu = React.createClass({
|
||||
openKeys: []
|
||||
};
|
||||
},
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.props.mode === 'inline' &&
|
||||
nextProps.mode !== 'inline') {
|
||||
this.switchModeFromInline = true;
|
||||
}
|
||||
},
|
||||
handleClick(e) {
|
||||
this.setState({
|
||||
openKeys: []
|
||||
@ -47,7 +53,14 @@ const AntMenu = React.createClass({
|
||||
openAnimation = 'slide-up';
|
||||
break;
|
||||
case 'vertical':
|
||||
// When mode switch from inline
|
||||
// submenu should hide without animation
|
||||
if (this.switchModeFromInline) {
|
||||
openAnimation = '';
|
||||
this.switchModeFromInline = false;
|
||||
} else {
|
||||
openAnimation = 'zoom-big';
|
||||
}
|
||||
break;
|
||||
case 'inline':
|
||||
openAnimation = animation;
|
||||
|
@ -31,7 +31,7 @@
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|----------------|----------|--------------|
|
||||
| theme | 主题颜色 | enum: `light` `dark` | 'light' |
|
||||
| mode | 菜单类型 | enum: `vertical` `horizontal` `inline` | vertical |
|
||||
| mode | 菜单类型,现在支持垂直、水平、和内嵌模式三种 | enum: `vertical` `horizontal` `inline` | vertical |
|
||||
| selectedKeys | 当前选中的菜单项 key 数组 | | |
|
||||
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | | |
|
||||
| openKeys | 当前展开的菜单项 key 数组 | | |
|
||||
|
@ -38,7 +38,7 @@
|
||||
|
||||
我们将常见的导航模式分为:侧栏导航和顶部导航,两者各有优缺点,设计者可以根据各自的业务需求进行选择。
|
||||
|
||||
前端实现代码可以参考 [常用布局](/docs/spec/layout#layout-demo-top)。
|
||||
前端实现代码可以参考 [常用布局](/docs/spec/layout/#layout-demo-top)。
|
||||
|
||||
## 侧栏导航
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "0.12.15",
|
||||
"version": "0.12.17",
|
||||
"title": "Ant Design",
|
||||
"description": "一个 UI 设计语言",
|
||||
"homepage": "http://ant.design/",
|
||||
@ -58,7 +58,7 @@
|
||||
"rc-slider": "~3.3.0",
|
||||
"rc-steps": "~1.4.1",
|
||||
"rc-switch": "~1.3.2",
|
||||
"rc-table": "~3.11.1",
|
||||
"rc-table": "~3.11.4",
|
||||
"rc-tabs": "~5.8.0",
|
||||
"rc-time-picker": "~1.1.0",
|
||||
"rc-tooltip": "~3.3.1",
|
||||
|
@ -77,7 +77,7 @@ input[type="checkbox"] {
|
||||
}
|
||||
|
||||
&.@{css-prefix}form-item-with-help {
|
||||
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
|
||||
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - 3;
|
||||
}
|
||||
|
||||
> label {
|
||||
@ -367,7 +367,7 @@ form {
|
||||
}
|
||||
|
||||
// ant-timepicker
|
||||
.@{timepicker-prefix-cls}-picker-icon:after {
|
||||
.@{timepicker-prefix-cls}-icon:after {
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
|
@ -87,6 +87,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical &-sub {
|
||||
border-right: 0;
|
||||
.@{menu-prefix-cls}-item {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-inline {
|
||||
.@{menu-prefix-cls}-selected,
|
||||
.@{menu-prefix-cls}-item-selected {
|
||||
|
@ -19,6 +19,8 @@
|
||||
max-width: 100%;
|
||||
border-collapse: separate;
|
||||
text-align: left;
|
||||
border-radius: @border-radius-base;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
th {
|
||||
@ -71,6 +73,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.@{table-prefix-cls}-bordered tfoot tr {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
tr.@{table-prefix-cls}-row-selected {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user