home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-23 03:36:30 +10:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Benjy Cui
2015-12-25 15:55:38 +08:00
parent 8c81900e5a
commit 150cca1da6
76 changed files with 731 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changelog.html
+96 -2
View File
@@ -197,7 +197,7 @@
<script src="./static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
@@ -563,7 +563,101 @@
<section class="main-container">
<article class="markdown">
<h1>更新日志 </h1>
<h2 id="0-10-4-2015-11-30">0.10.4 <code>2015-11-30</code><a href="#0-10-4-2015-11-30" class="anchor">#</a> </h2><ul>
<h2 id="0-11-0-2015-12-25">0.11.0 <code>2015-12-25</code><a href="#0-11-0-2015-12-25" class="anchor">#</a> </h2><ul>
<li>移除默认加载的样式文件，样式现在需要独立加载。</li>
<li>Modal、Popconfirm、Table、TimePicker 支持国际化配置。</li>
<li>按钮圆角调整为 <code>6px</code>。</li>
<li>新增虚线型按钮。</li>
<li>新增 <a href="http://ant.design/components/form/#demo-search-input">通用搜索框</a> 样式。</li>
<li>新增图片上传列表样式<a href="http://ant.design/components/upload/#demo-picture-style">演示</a>。</li>
<li>部分设计资源开放 <a href="http://ant.design/spec/tools">下载</a>。</li>
<li>新增 <a href="http://ant.design/spec/layout/#demo-ceiling">吊顶规范</a>。</li>
<li>新增穿梭框 <a href="http://ant.design/components/transfer/">Transfer</a> 组件。</li>
<li>新增小尺寸的 Switch 开关组件。</li>
<li>增加更多的图标。<a href="https://github.com/ant-design/ant-design/commit/087c64649d73206a4d62e52f9b3f6042c1d28608#diff-dc1a1f4794c1c4ee3b083381d4c50c47R180">#</a></li>
<li>调整警告和错误状态色。</li>
<li>Tree 节点标签增加 2px 圆角。</li>
<li>Select<ul>
<li>选中样式进行了调整。</li>
<li>在标签/多选模式下，选中或删除选项增加了动画效果。</li>
</ul>
</li>
<li>Pagination 的 <code>pageSize</code> 选择器样式与 Select 样式统一。</li>
<li>Alert<ul>
<li>默认样式不展示图标。</li>
<li>带描述的警告框图标改为描线图标。</li>
<li><code>type=&quot;warn&quot;</code> 图标修改。</li>
</ul>
</li>
<li>Dropdown 新增带菜单触发的按钮 <code>Dropdown.Button</code>。<a href="http://ant.design/components/dropdown/#demo-dropdown-button">演示</a></li>
<li>Menu 新增 <code>Menu.ItemGroup</code> 用于把菜单项分组。</li>
<li>Badge<ul>
<li>徽章可以独立使用。<a href="http://ant.design/components/badge/#demo-no-wrapper">演示</a></li>
<li>支持设置封顶的 <code>99+</code> 的数字。<a href="http://ant.design/components/badge/#demo-overflow">演示</a></li>
</ul>
</li>
<li>Slider<ul>
<li>增加 <code>onAfterChange</code> 事件。<a href="http://ant.design/components/slider/#demo-event">演示</a></li>
<li>现在设置 <code>tipFormatter={null}</code> 可以隐藏 <code>Tooltip</code>。</li>
<li>双滑块拖动体验优化，一个滑块在拖动时可以直接跨过另一滑块。</li>
</ul>
</li>
<li>Breadcrumb 可以自定义分隔符。<a href="http://ant.design/components/breadcrumb/#demo-separator">演示</a></li>
<li>Popconfirm 添加 <code>visible</code> 属性，使其可以控制是否显示。<a href="http://ant.design/components/popconfirm/#demo-dynamic-trigger">演示</a></li>
<li>修复 Icon <code>ref</code> 引起的报错。</li>
<li>Tabs<ul>
<li>新增 <a href="http://ant.design/components/tabs/#demo-card">卡片式页签</a>。</li>
<li>调整 <a href="http://ant.design/components/tabs/#demo-editable-card">新增和关闭页签</a> 的样式。</li>
<li>现在支持页签的四个位置 <code>tabPosition=&quot;top|right|bottom|left&quot;</code>。</li>
<li>移除 <code>animation</code> 属性，并在 <code>tabPosition=&quot;top|bottom&quot;</code> 时默认启用切换动画。</li>
</ul>
</li>
<li>Timepicker<ul>
<li>重命名为 TimePicker。</li>
<li>新增 <code>value</code> 属性。</li>
<li>新增属性 <code>disabledHours</code> <code>disabledMinutes</code> <code>disabledSeconds</code>。<a href="http://ant.design/components/time-picker/#picker-demo-disable-options">演示</a></li>
<li>移除 <code>hourOptions</code> <code>minuteOptions</code> <code>secondOptions</code>，新增 <code>hideDisabled</code> 属性用于替代。</li>
</ul>
</li>
<li>Datepicker<ul>
<li>重命名为 DatePicker。</li>
<li>修改 <code>showTime</code> 的交互。<a href="http://ant.design/components/date-picker/#picker-demo-time">演示</a></li>
<li>新增 <a href="http://ant.design/components/date-picker/#picker-demo-range">日期范围选择控件</a>。</li>
<li>修正为受控组件。</li>
</ul>
</li>
<li>Table<ul>
<li>新增 <a href="http://ant.design/components/table/#demo-size">紧凑型表格</a>。</li>
<li>允许监听分页的 <code>onShowSizeChange</code>。<a href="http://ant.design/components/table/#demo-paging">演示</a></li>
<li>移除 <code>dataSource</code> 的远程模式。</li>
<li>优化表格对树形数据的显示。<a href="TODO">演示</a></li>
<li>优化了筛选菜单的样式，并添加了最大高度。<a href="http://ant.design/components/table/#demo-head">演示</a>。</li>
<li>修复 column.key 设置失效的问题。<a href="https://github.com/ant-design/ant-design/issues/642">#642</a></li>
<li>修复设置时 rowKey 时单选会导致全部选中的问题。<a href="https://github.com/ant-design/ant-design/issues/697">#697</a></li>
<li>修复一个列重新渲染导致选项错乱的问题。<a href="https://github.com/ant-design/ant-design/issues/418#issuecomment-163093580">#418</a></li>
<li>修复选择列无法设置宽度的问题。<a href="https://github.com/ant-design/ant-design/issues/649">#649</a></li>
</ul>
</li>
<li>Form<ul>
<li>修复了 Textarea 无法输入的问题。<a href="https://github.com/ant-design/ant-design/issues/646">#646</a></li>
<li>修复了 Textarea 设置 <code>cols</code> 和 <code>rows</code> 属性失效的问题。<a href="https://github.com/ant-design/ant-design/issues/694">#694</a></li>
<li>修复无法设置 <code>className</code> 的问题。<a href="https://github.com/ant-design/ant-design/issues/711">#711</a></li>
</ul>
</li>
<li>工具<ul>
<li>替换 <code>antd build</code> 为 <a href="https://github.com/ant-tool/atool-build">atool-build</a>，重构，并改善了 webpack 配置的自定义方式</li>
<li>替换 <code>antd server</code> 为 <a href="https://github.com/dora-js/dora">dora</a>，一个完全插件化的开发服务器，支持<a href="https://github.com/dora-js/dora-plugin-proxy">代理转发和数据 Mock</a>、<a href="https://github.com/dora-js/dora-plugin-atool-build">atool-build</a>、<a href="https://github.com/dora-js/dora-plugin-hmr">热替换</a></li>
<li>新增 babel 插件 <a href="https://github.com/ant-design/babel-plugin-antd">babel-plugin-antd</a>，转换 <code>import {Button} from &#39;antd&#39;</code> 为 <code>import Button from &#39;antd/lib/button&#39;</code></li>
<li>antd-init@0.5.0，支持以上改动</li>
</ul>
</li>
</ul>
<blockquote>
<ul>
<li><a href="http://ant.design/docs/upgrade-notes">0.11 升级指南</a></li>
</ul>
</blockquote>
<h2 id="0-10-4-2015-11-30">0.10.4 <code>2015-11-30</code><a href="#0-10-4-2015-11-30" class="anchor">#</a> </h2><ul>
<li>将 media-match 加入默认的 polyfill 文件中。<a href="https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7">5626974</a></li>
<li>修复了 <a href="http://ant.design/components/datepicker/#demo-month-picker">MonthPicker</a> 报错问题，并增加了相关演示。</li>
<li>修复 RadioGroup 中的 Radio/RadioButton 无法单独设置 disabled 的问题。<a href="https://github.com/ant-design/ant-design/issues/603">#603</a></li>
components/affix/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Affix 固钉 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/alert/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Alert 警告提示 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/badge/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Badge 徽标数 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/breadcrumb/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Breadcrumb 面包屑 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/button/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Button 按钮 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/calendar/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Calendar 日历 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/carousel/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Carousel 走马灯 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/checkbox/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Checkbox 多选框 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/collapse/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Collapse 折叠面板 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/date-picker/RangePicker.jsx
+1 -1
View File
@@ -118,7 +118,7 @@ export default React.createClass({
value={start && this.getFormatter().format(start)}
placeholder={startPlaceholder}
className="ant-calendar-range-picker-input" />
<span> ~ </span>
<span className="ant-calendar-range-picker-separator"> ~ </span>
<input disabled={disabled}
onChange={this.handleInputChange}
value={end && this.getFormatter().format(end)}
components/date-picker/demo/with-time-picker.html
+99
View File
@@ -0,0 +1,99 @@
<div class="code-box" id="picker-demo-with-time-picker">
<div class="code-box-demo">
<div id="components-date-picker-demo-with-time-picker"></div>
<script>(function(){'use strict';
var _antd = require('antd');
var DateTimePicker = React.createClass({
displayName: 'DateTimePicker',
handleChange: function handleChange(from, value) {
this.result = this.result || new Date();
if (!value) {
if (from === 'date') {
this.selectedDate = false;
} else {
this.selectedTime = false;
}
return;
}
if (from === 'date') {
this.result.setFullYear(value.getFullYear());
this.result.setMonth(value.getMonth());
this.result.setDate(value.getDate());
this.selectedDate = true;
} else {
this.result.setHours(value.getHours());
this.result.setMinutes(value.getMinutes());
this.result.setSeconds(value.getSeconds());
this.selectedTime = true;
}
if (this.selectedDate && this.selectedTime) {
this.props.onSelect(this.result);
}
},
render: function render() {
return React.createElement(
'div',
null,
React.createElement(_antd.DatePicker, { onChange: this.handleChange.bind(null, 'date') }),
React.createElement(_antd.TimePicker, { onChange: this.handleChange.bind(null, 'time') })
);
}
});
function onSelect(value) {
console.log('选择了时间：', value);
}
ReactDOM.render(React.createElement(DateTimePicker, { onSelect: onSelect }), document.getElementById('components-date-picker-demo-with-time-picker'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { DatePicker, TimePicker } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
<span class="hljs-keyword">const</span> DateTimePicker = React.createClass({
handleChange(from, value) {
<span class="hljs-keyword">this</span>.result = <span class="hljs-keyword">this</span>.result || <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();
<span class="hljs-keyword">if</span> (!value) {
<span class="hljs-keyword">if</span> (from === <span class="hljs-string">'date'</span>) {
<span class="hljs-keyword">this</span>.selectedDate = <span class="hljs-literal">false</span>;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.selectedTime = <span class="hljs-literal">false</span>;
}
<span class="hljs-keyword">return</span>;
}
<span class="hljs-keyword">if</span> (from === <span class="hljs-string">'date'</span>) {
<span class="hljs-keyword">this</span>.result.setFullYear(value.getFullYear());
<span class="hljs-keyword">this</span>.result.setMonth(value.getMonth());
<span class="hljs-keyword">this</span>.result.setDate(value.getDate());
<span class="hljs-keyword">this</span>.selectedDate = <span class="hljs-literal">true</span>;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.result.setHours(value.getHours());
<span class="hljs-keyword">this</span>.result.setMinutes(value.getMinutes());
<span class="hljs-keyword">this</span>.result.setSeconds(value.getSeconds());
<span class="hljs-keyword">this</span>.selectedTime = <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.selectedDate &amp;&amp; <span class="hljs-keyword">this</span>.selectedTime) {
<span class="hljs-keyword">this</span>.props.onSelect(<span class="hljs-keyword">this</span>.result);
}
},
render() {
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">DatePicker</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.handleChange.bind(null,</span> '<span class="hljs-attribute">date</span>')} /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">TimePicker</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.handleChange.bind(null,</span> '<span class="hljs-attribute">time</span>')} /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>;</span>
}
});
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onSelect</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'选择了时间：'</span>, value);
}
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">DateTimePicker</span> <span class="hljs-attribute">onSelect</span>=<span class="hljs-value">{onSelect}</span> /&gt;</span>
, document.getElementById('components-date-picker-demo-with-time-picker'));</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#picker-demo-with-time-picker">日期时间选择二</a>
</div>
<p>和 <a href="/components/timepicer">时间选择框</a> 配合使用。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
</div>
</div>
components/date-picker/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ DatePicker 日期选择框 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/dropdown/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Dropdown 下拉菜单 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/form/Form.jsx
+5 -5
View File
@@ -3,15 +3,15 @@ import classNames from 'classnames';
class Form extends React.Component {
render() {
const prefixCls = this.props.prefixCls;
const formClassName = {
const { prefixCls, className } = this.props;
const formClassName = classNames({
[className]: !!className,
[`${prefixCls}-horizontal`]: this.props.horizontal,
[`${prefixCls}-inline`]: this.props.inline,
};
const classes = classNames(formClassName);
});
return (
<form {...this.props} className={classes}>
<form {...this.props} className={formClassName}>
{this.props.children}
</form>
);
components/form/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Form 表单 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/icon/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Icon 图标 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/input-number/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ InputNumber 数字输入框 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/layout/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Layout 布局 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/menu/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Menu 导航菜单 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/message/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Message 全局提示 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/modal/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Modal 对话框 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/notification/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Notification 通知提醒框 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/pagination/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Pagination 分页 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/popconfirm/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Popconfirm 气泡确认框 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/popover/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Popover 气泡卡片 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/progress/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Progress 进度条 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/queue-anim/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ QueueAnim 进出场动画 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/radio/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Radio 单选框 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/select/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Select 选择器 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/slider/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Slider 滑动输入条 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/spin/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Spin 加载中 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/steps/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Steps 步骤条 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/switch/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Switch 开关 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/table/demo/indent-size.html
+158
View File
@@ -0,0 +1,158 @@
<div class="code-box" id="demo-indent-size">
<div class="code-box-demo">
<div id="components-table-demo-indent-size"></div>
<script>(function(){'use strict';
var _antd = require('antd');
var columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: '40%'
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
width: '30%'
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
width: '30%'
}];
var data = [{
key: 1,
name: 'a',
age: 32,
address: '我是a',
children: [{
key: 11,
name: 'aa',
age: 33,
address: '我是aa'
}, {
key: 12,
name: 'ab',
age: 33,
address: '我是ab',
children: [{
key: 121,
name: 'aba',
age: 33,
address: '我是aba'
}]
}, {
key: 13,
name: 'ac',
age: 33,
address: '我是ac',
children: [{
key: 131,
name: 'aca',
age: 33,
address: '我是aca',
children: [{
key: 1311,
name: 'acaa',
age: 33,
address: '我是acaa'
}, {
key: 1312,
name: 'acab',
age: 33,
address: '我是acab'
}]
}]
}]
}, {
key: 2,
name: 'b',
age: 32,
address: '我是b'
}];
ReactDOM.render(React.createElement(_antd.Table, { columns: columns, dataSource: data, indentSize: 30 }), document.getElementById('components-table-demo-indent-size'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
<span class="hljs-keyword">const</span> columns = [{
title: <span class="hljs-string">'姓名'</span>,
dataIndex: <span class="hljs-string">'name'</span>,
key: <span class="hljs-string">'name'</span>,
width: <span class="hljs-string">'40%'</span>,
}, {
title: <span class="hljs-string">'年龄'</span>,
dataIndex: <span class="hljs-string">'age'</span>,
key: <span class="hljs-string">'age'</span>,
width: <span class="hljs-string">'30%'</span>,
}, {
title: <span class="hljs-string">'住址'</span>,
dataIndex: <span class="hljs-string">'address'</span>,
key: <span class="hljs-string">'address'</span>,
width: <span class="hljs-string">'30%'</span>,
}];
<span class="hljs-keyword">const</span> data = [{
key: <span class="hljs-number">1</span>,
name: <span class="hljs-string">'a'</span>,
age: <span class="hljs-number">32</span>,
address: <span class="hljs-string">'我是a'</span>,
children: [{
key: <span class="hljs-number">11</span>,
name: <span class="hljs-string">'aa'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是aa'</span>,
}, {
key: <span class="hljs-number">12</span>,
name: <span class="hljs-string">'ab'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是ab'</span>,
children: [{
key: <span class="hljs-number">121</span>,
name: <span class="hljs-string">'aba'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是aba'</span>,
}],
}, {
key: <span class="hljs-number">13</span>,
name: <span class="hljs-string">'ac'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是ac'</span>,
children: [{
key: <span class="hljs-number">131</span>,
name: <span class="hljs-string">'aca'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是aca'</span>,
children: [{
key: <span class="hljs-number">1311</span>,
name: <span class="hljs-string">'acaa'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是acaa'</span>,
}, {
key: <span class="hljs-number">1312</span>,
name: <span class="hljs-string">'acab'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是acab'</span>,
}],
}],
}],
}, {
key: <span class="hljs-number">2</span>,
name: <span class="hljs-string">'b'</span>,
age: <span class="hljs-number">32</span>,
address: <span class="hljs-string">'我是b'</span>,
}];
ReactDOM.render(
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> <span class="hljs-attribute">columns</span>=<span class="hljs-value">{columns}</span> <span class="hljs-attribute">dataSource</span>=<span class="hljs-value">{data}</span> <span class="hljs-attribute">indentSize</span>=<span class="hljs-value">{30}</span> /&gt;</span>,
document.getElementById('components-table-demo-indent-size')
);</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#demo-indent-size">树形数据展示</a>
</div>
<p>表格支持树形数据的展示，可以通过设置 <code>indentSize</code> 以控制每一层的缩进宽度。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
</div>
</div>
components/table/index.html
+165 -1
View File
@@ -197,7 +197,7 @@ Table 表格 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
@@ -766,6 +766,13 @@ Table 表格 - Ant Design
<td></td>
</tr>
<tr>
<td>indentSize</td>
<td>展示树形数据时，每层缩进的宽度，以 px 为单位</td>
<td>Number</td>
<td></td>
<td>15</td>
</tr>
<tr>
<td>width</td>
<td>列宽度</td>
<td>String or Number</td>
@@ -2368,6 +2375,163 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-t
<p>用属性 <code>loading</code> 控制表格加载中状态。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
</div>
</div><div class="code-box" id="demo-indent-size">
<div class="code-box-demo">
<div id="components-table-demo-indent-size"></div>
<script>(function(){'use strict';
var _antd = require('antd');
var columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: '40%'
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
width: '30%'
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
width: '30%'
}];
var data = [{
key: 1,
name: 'a',
age: 32,
address: '我是a',
children: [{
key: 11,
name: 'aa',
age: 33,
address: '我是aa'
}, {
key: 12,
name: 'ab',
age: 33,
address: '我是ab',
children: [{
key: 121,
name: 'aba',
age: 33,
address: '我是aba'
}]
}, {
key: 13,
name: 'ac',
age: 33,
address: '我是ac',
children: [{
key: 131,
name: 'aca',
age: 33,
address: '我是aca',
children: [{
key: 1311,
name: 'acaa',
age: 33,
address: '我是acaa'
}, {
key: 1312,
name: 'acab',
age: 33,
address: '我是acab'
}]
}]
}]
}, {
key: 2,
name: 'b',
age: 32,
address: '我是b'
}];
ReactDOM.render(React.createElement(_antd.Table, { columns: columns, dataSource: data, indentSize: 30 }), document.getElementById('components-table-demo-indent-size'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
<span class="hljs-keyword">const</span> columns = [{
title: <span class="hljs-string">'姓名'</span>,
dataIndex: <span class="hljs-string">'name'</span>,
key: <span class="hljs-string">'name'</span>,
width: <span class="hljs-string">'40%'</span>,
}, {
title: <span class="hljs-string">'年龄'</span>,
dataIndex: <span class="hljs-string">'age'</span>,
key: <span class="hljs-string">'age'</span>,
width: <span class="hljs-string">'30%'</span>,
}, {
title: <span class="hljs-string">'住址'</span>,
dataIndex: <span class="hljs-string">'address'</span>,
key: <span class="hljs-string">'address'</span>,
width: <span class="hljs-string">'30%'</span>,
}];
<span class="hljs-keyword">const</span> data = [{
key: <span class="hljs-number">1</span>,
name: <span class="hljs-string">'a'</span>,
age: <span class="hljs-number">32</span>,
address: <span class="hljs-string">'我是a'</span>,
children: [{
key: <span class="hljs-number">11</span>,
name: <span class="hljs-string">'aa'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是aa'</span>,
}, {
key: <span class="hljs-number">12</span>,
name: <span class="hljs-string">'ab'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是ab'</span>,
children: [{
key: <span class="hljs-number">121</span>,
name: <span class="hljs-string">'aba'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是aba'</span>,
}],
}, {
key: <span class="hljs-number">13</span>,
name: <span class="hljs-string">'ac'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是ac'</span>,
children: [{
key: <span class="hljs-number">131</span>,
name: <span class="hljs-string">'aca'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是aca'</span>,
children: [{
key: <span class="hljs-number">1311</span>,
name: <span class="hljs-string">'acaa'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是acaa'</span>,
}, {
key: <span class="hljs-number">1312</span>,
name: <span class="hljs-string">'acab'</span>,
age: <span class="hljs-number">33</span>,
address: <span class="hljs-string">'我是acab'</span>,
}],
}],
}],
}, {
key: <span class="hljs-number">2</span>,
name: <span class="hljs-string">'b'</span>,
age: <span class="hljs-number">32</span>,
address: <span class="hljs-string">'我是b'</span>,
}];
ReactDOM.render(
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> <span class="hljs-attribute">columns</span>=<span class="hljs-value">{columns}</span> <span class="hljs-attribute">dataSource</span>=<span class="hljs-value">{data}</span> <span class="hljs-attribute">indentSize</span>=<span class="hljs-value">{30}</span> /&gt;</span>,
document.getElementById('components-table-demo-indent-size')
);</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#demo-indent-size">树形数据展示</a>
</div>
<p>表格支持树形数据的展示，可以通过设置 <code>indentSize</code> 以控制每一层的缩进宽度。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
</div>
</div>
</div>
</div>
components/tabs/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Tabs 标签页 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/tag/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Tag 标签 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/time-picker/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ TimePicker 时间选择框 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/timeline/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Timeline 时间轴 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/tooltip/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Tooltip 文字提示 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/transfer/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Transfer 穿梭框 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/tree/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Tree 树形控件 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/upload/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Upload 文件上传 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
components/validation/index.html
+1 -1
View File
@@ -197,7 +197,7 @@ Validation 表单校验 - Ant Design
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
dist/antd.js
Vendored
+26 -13
View File
@@ -10118,7 +10118,7 @@ return /******/ (function(modules) { // webpackBootstrap
className: 'ant-calendar-range-picker-input' }),
_react2["default"].createElement(
'span',
null,
{ className: 'ant-calendar-range-picker-separator' },
' ~ '
),
_react2["default"].createElement('input', { disabled: disabled,
@@ -24236,7 +24236,8 @@ return /******/ (function(modules) { // webpackBootstrap
rowClassName: _react2['default'].PropTypes.func,
expandedRowClassName: _react2['default'].PropTypes.func,
childrenColumnName: _react2['default'].PropTypes.string,
onExpandedRowsChange: _react2['default'].PropTypes.func
onExpandedRowsChange: _react2['default'].PropTypes.func,
indentSize: _react2['default'].PropTypes.number
},
getDefaultProps: function getDefaultProps() {
@@ -24259,7 +24260,8 @@ return /******/ (function(modules) { // webpackBootstrap
prefixCls: 'rc-table',
bodyStyle: {},
style: {},
childrenColumnName: 'children'
childrenColumnName: 'children',
indentSize: 15
};
},
@@ -24362,7 +24364,7 @@ return /******/ (function(modules) { // webpackBootstrap
);
},
getRowsByData: function getRowsByData(data, visible) {
getRowsByData: function getRowsByData(data, visible, indent) {
var props = this.props;
var columns = props.columns;
var childrenColumnName = props.childrenColumnName;
@@ -24383,6 +24385,8 @@ return /******/ (function(modules) { // webpackBootstrap
}
var className = rowClassName(record, i);
rst.push(_react2['default'].createElement(_TableRow2['default'], {
indent: indent,
indentSize: props.indentSize,
className: className,
record: record,
expandIconAsCell: expandIconAsCell,
@@ -24403,14 +24407,14 @@ return /******/ (function(modules) { // webpackBootstrap
rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i)));
}
if (childrenColumn) {
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible));
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1));
}
}
return rst;
},
getRows: function getRows() {
return this.getRowsByData(this.state.data, true);
return this.getRowsByData(this.state.data, true, 0);
},
getColGroup: function getColGroup() {
@@ -24538,6 +24542,8 @@ return /******/ (function(modules) { // webpackBootstrap
var expanded = props.expanded;
var expandable = props.expandable;
var expandIconAsCell = props.expandIconAsCell;
var indent = props.indent;
var indentSize = props.indentSize;
for (var i = 0; i < columns.length; i++) {
var col = columns[i];
@@ -24550,6 +24556,7 @@ return /******/ (function(modules) { // webpackBootstrap
var colSpan = undefined;
var rowSpan = undefined;
var notRender = false;
var indentText = undefined;
if (i === 0 && expandable) {
expandIcon = _react2['default'].createElement('span', {
@@ -24581,10 +24588,14 @@ return /******/ (function(modules) { // webpackBootstrap
if (rowSpan === 0 || colSpan === 0) {
notRender = true;
}
indentText = i === 0 ? _react2['default'].createElement('span', { style: { paddingLeft: indentSize * indent + 'px' }, className: prefixCls + '-indent indent-level-' + indent }) : null;
if (!notRender) {
cells.push(_react2['default'].createElement(
'td',
{ key: col.key, colSpan: colSpan, rowSpan: rowSpan, className: '' + colClassName },
indentText,
expandIcon,
text
));
@@ -36042,15 +36053,17 @@ return /******/ (function(modules) { // webpackBootstrap
_createClass(Form, [{
key: 'render',
value: function render() {
var _formClassName;
var _classNames;
var prefixCls = this.props.prefixCls;
var formClassName = (_formClassName = {}, _defineProperty(_formClassName, prefixCls + '-horizontal', this.props.horizontal), _defineProperty(_formClassName, prefixCls + '-inline', this.props.inline), _formClassName);
var classes = (0, _classnames2["default"])(formClassName);
var _props = this.props;
var prefixCls = _props.prefixCls;
var className = _props.className;
var formClassName = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, className, !!className), _defineProperty(_classNames, prefixCls + '-horizontal', this.props.horizontal), _defineProperty(_classNames, prefixCls + '-inline', this.props.inline), _classNames));
return _react2["default"].createElement(
'form',
_extends({}, this.props, { className: classes }),
_extends({}, this.props, { className: formClassName }),
this.props.children
);
}
@@ -38218,7 +38231,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = {
"name": "antd",
"version": "0.11.0-beta3",
"version": "0.11.0-beta4",
"stableVersion": "0.10.4",
"title": "Ant Design",
"description": "一个 UI 设计语言",
@@ -38274,7 +38287,7 @@ return /******/ (function(modules) { // webpackBootstrap
"rc-slider": "~3.3.0",
"rc-steps": "~1.4.1",
"rc-switch": "~1.3.1",
"rc-table": "~3.6.2",
"rc-table": "~3.7.0",
"rc-tabs": "~5.5.0",
"rc-time-picker": "~1.0.0",
"rc-tooltip": "~3.3.0",
dist/antd.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/demo.css
Vendored
+39 -25
View File
@@ -4318,7 +4318,7 @@ fieldset[disabled] .ant-btn-dashed.active {
.ant-calendar {
position: relative;
outline: none;
width: 253px;
width: 231px;
border: 1px solid #d9d9d9;
list-style: none;
font-size: 12px;
@@ -4410,7 +4410,7 @@ fieldset[disabled] .ant-btn-dashed.active {
right: 29px;
}
.ant-calendar-calendar-body {
padding: 5px 8px;
padding: 4px 8px;
}
.ant-calendar table {
border-collapse: collapse;
@@ -4447,10 +4447,11 @@ fieldset[disabled] .ant-btn-dashed.active {
display: block;
margin: 0 auto;
color: #666;
border-radius: 4px 4px;
border-radius: 4px;
width: 20px;
height: 20px;
line-height: 18px;
border: 1px solid transparent;
padding: 0;
background: transparent;
text-align: center;
@@ -4466,9 +4467,9 @@ fieldset[disabled] .ant-btn-dashed.active {
background: #57c5f7;
}
.ant-calendar-today .ant-calendar-date {
border: 1px solid #96dbfa;
line-height: 18px;
background: #eaf8fe;
border-color: #2db7f5;
font-weight: bold;
color: #2db7f5;
}
.ant-calendar-selected-day .ant-calendar-date {
background: #2db7f5;
@@ -4502,14 +4503,14 @@ fieldset[disabled] .ant-btn-dashed.active {
}
.ant-calendar-footer {
padding: 0 15px;
height: 42px;
line-height: 42px;
height: 38px;
line-height: 38px;
border-top: 1px solid #e9e9e9;
}
.ant-calendar-footer-btn {
text-align: center;
display: block;
line-height: 42px;
line-height: 38px;
}
.ant-calendar-footer > div {
display: inline-block;
@@ -4661,16 +4662,20 @@ fieldset[disabled] .ant-calendar .ant-calendar-ok-btn.active {
line-height: 18px;
outline: 0;
width: 43%;
text-align: center;
}
.ant-calendar-range-picker-input[disabled] {
cursor: not-allowed;
}
.ant-calendar-range-picker-separator {
color: #999;
}
.ant-calendar-range {
width: 502px;
width: 470px;
overflow: hidden;
}
.ant-calendar-range-part {
width: 250px;
width: 50%;
position: relative;
}
.ant-calendar-range-left {
@@ -4683,22 +4688,20 @@ fieldset[disabled] .ant-calendar .ant-calendar-ok-btn.active {
position: absolute;
left: 50%;
width: 20px;
margin-left: -147px;
margin-left: -132px;
text-align: center;
height: 34px;
line-height: 34px;
color: #999;
}
.ant-calendar-range-right .ant-calendar-date-input-wrap {
margin-left: -133px;
margin-left: -118px;
}
.ant-calendar-range.ant-calendar-time .ant-calendar-range-middle {
margin-left: -45px;
margin-left: -29px;
}
.ant-calendar-range.ant-calendar-time .ant-calendar-range-right .ant-calendar-date-input-wrap {
margin-left: -30px;
}
.ant-calendar-range.ant-calendar-time .ant-calendar-range-right .ant-calendar-time-picker-wrap {
left: 78px;
margin-left: -15px;
}
.ant-calendar-range .ant-calendar-input-wrap {
height: 34px;
@@ -4754,6 +4757,18 @@ fieldset[disabled] .ant-calendar .ant-calendar-ok-btn.active {
.ant-calendar-range .ant-calendar-today-btn {
margin: 9px;
}
.ant-calendar-time .ant-calendar-input-wrap {
direction: rtl;
}
.ant-calendar-time .ant-calendar-input-wrap .ant-calendar-date-input-wrap,
.ant-calendar-time .ant-calendar-input-wrap .ant-calendar-time-picker-wrap {
direction: ltr;
display: inline-block;
}
.ant-calendar-time .ant-calendar-input-wrap .ant-time-picker-panel,
.ant-calendar-time .ant-calendar-input-wrap .ant-calendar-clear-btn {
direction: ltr;
}
.ant-calendar-time .ant-calendar-input,
.ant-calendar-time .ant-time-picker-input {
position: relative;
@@ -4773,6 +4788,7 @@ fieldset[disabled] .ant-calendar .ant-calendar-ok-btn.active {
transition: border .2s cubic-bezier(0.645, 0.045, 0.355, 1), background .2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .2s cubic-bezier(0.645, 0.045, 0.355, 1);
height: 22px;
width: 96px;
margin-right: 6px;
}
.ant-calendar-time .ant-calendar-input::-moz-placeholder,
.ant-calendar-time .ant-time-picker-input::-moz-placeholder {
@@ -4830,14 +4846,9 @@ textarea.ant-calendar-time .ant-time-picker-input {
.ant-calendar-time .ant-time-picker-icon {
display: none;
}
.ant-calendar-time-picker-wrap {
position: absolute;
left: 108px;
top: 6px;
}
.ant-calendar-month-panel {
left: 0;
top: 0;
top: 34px;
bottom: 0;
right: 0;
background: #fff;
@@ -4947,7 +4958,7 @@ textarea.ant-calendar-time .ant-time-picker-input {
}
.ant-calendar-year-panel {
left: 0;
top: 0;
top: 34px;
bottom: 0;
right: 0;
background: #fff;
@@ -6401,6 +6412,9 @@ tr.ant-table-expanded-row,
tr.ant-table-expanded-row:hover {
background: #fbfbfb;
}
.ant-table .ant-table-row-indent + .ant-table-row-expand-icon {
margin-right: 5px;
}
.ant-tooltip {
position: absolute;
z-index: 1070;
dist/demo.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/demo.js
Vendored
+26 -13
View File
@@ -34346,7 +34346,7 @@
className: 'ant-calendar-range-picker-input' }),
_react2["default"].createElement(
'span',
null,
{ className: 'ant-calendar-range-picker-separator' },
' ~ '
),
_react2["default"].createElement('input', { disabled: disabled,
@@ -48423,7 +48423,8 @@
rowClassName: _react2['default'].PropTypes.func,
expandedRowClassName: _react2['default'].PropTypes.func,
childrenColumnName: _react2['default'].PropTypes.string,
onExpandedRowsChange: _react2['default'].PropTypes.func
onExpandedRowsChange: _react2['default'].PropTypes.func,
indentSize: _react2['default'].PropTypes.number
},
getDefaultProps: function getDefaultProps() {
@@ -48446,7 +48447,8 @@
prefixCls: 'rc-table',
bodyStyle: {},
style: {},
childrenColumnName: 'children'
childrenColumnName: 'children',
indentSize: 15
};
},
@@ -48549,7 +48551,7 @@
);
},
getRowsByData: function getRowsByData(data, visible) {
getRowsByData: function getRowsByData(data, visible, indent) {
var props = this.props;
var columns = props.columns;
var childrenColumnName = props.childrenColumnName;
@@ -48570,6 +48572,8 @@
}
var className = rowClassName(record, i);
rst.push(_react2['default'].createElement(_TableRow2['default'], {
indent: indent,
indentSize: props.indentSize,
className: className,
record: record,
expandIconAsCell: expandIconAsCell,
@@ -48590,14 +48594,14 @@
rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i)));
}
if (childrenColumn) {
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible));
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1));
}
}
return rst;
},
getRows: function getRows() {
return this.getRowsByData(this.state.data, true);
return this.getRowsByData(this.state.data, true, 0);
},
getColGroup: function getColGroup() {
@@ -48725,6 +48729,8 @@
var expanded = props.expanded;
var expandable = props.expandable;
var expandIconAsCell = props.expandIconAsCell;
var indent = props.indent;
var indentSize = props.indentSize;
for (var i = 0; i < columns.length; i++) {
var col = columns[i];
@@ -48737,6 +48743,7 @@
var colSpan = undefined;
var rowSpan = undefined;
var notRender = false;
var indentText = undefined;
if (i === 0 && expandable) {
expandIcon = _react2['default'].createElement('span', {
@@ -48768,10 +48775,14 @@
if (rowSpan === 0 || colSpan === 0) {
notRender = true;
}
indentText = i === 0 ? _react2['default'].createElement('span', { style: { paddingLeft: indentSize * indent + 'px' }, className: prefixCls + '-indent indent-level-' + indent }) : null;
if (!notRender) {
cells.push(_react2['default'].createElement(
'td',
{ key: col.key, colSpan: colSpan, rowSpan: rowSpan, className: '' + colClassName },
indentText,
expandIcon,
text
));
@@ -60229,15 +60240,17 @@
_createClass(Form, [{
key: 'render',
value: function render() {
var _formClassName;
var _classNames;
var prefixCls = this.props.prefixCls;
var formClassName = (_formClassName = {}, _defineProperty(_formClassName, prefixCls + '-horizontal', this.props.horizontal), _defineProperty(_formClassName, prefixCls + '-inline', this.props.inline), _formClassName);
var classes = (0, _classnames2["default"])(formClassName);
var _props = this.props;
var prefixCls = _props.prefixCls;
var className = _props.className;
var formClassName = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, className, !!className), _defineProperty(_classNames, prefixCls + '-horizontal', this.props.horizontal), _defineProperty(_classNames, prefixCls + '-inline', this.props.inline), _classNames));
return _react2["default"].createElement(
'form',
_extends({}, this.props, { className: classes }),
_extends({}, this.props, { className: formClassName }),
this.props.children
);
}
@@ -62405,7 +62418,7 @@
module.exports = {
"name": "antd",
"version": "0.11.0-beta3",
"version": "0.11.0-beta4",
"stableVersion": "0.10.4",
"title": "Ant Design",
"description": "一个 UI 设计语言",
@@ -62461,7 +62474,7 @@
"rc-slider": "~3.3.0",
"rc-steps": "~1.4.1",
"rc-switch": "~1.3.1",
"rc-table": "~3.6.2",
"rc-table": "~3.7.0",
"rc-tabs": "~5.5.0",
"rc-time-picker": "~1.0.0",
"rc-tooltip": "~3.3.0",
dist/demo.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/getting-started.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
docs/install-en.html
+1 -1
View File
@@ -197,7 +197,7 @@ null - Ant Design
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
docs/install.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
docs/introduce.html
+1 -1
View File
@@ -197,7 +197,7 @@ Ant Design of React - Ant Design
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
docs/upgrade-notes.html
+13 -2
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
@@ -563,7 +563,18 @@
<section class="main-container">
<article class="markdown">
<h1>升级指南 </h1>
<h2 id="0-10-gt-0-11-升级指南">0.10 =&gt; 0.11 升级指南<a href="#0-10-gt-0-11-升级指南" class="anchor">#</a> </h2><p>待补充。</p>
<h2 id="0-10-gt-0-11-升级指南">0.10 =&gt; 0.11 升级指南<a href="#0-10-gt-0-11-升级指南" class="anchor">#</a> </h2><p><code>0.11.x</code> 版本有大量更新，其中部分为不兼容更新。以下列表为其中不兼容的更新及对应升级方案。如果您在升级过程中遇到下面没有提到的情况，可以到 Github 上面咨询。</p>
<h3 id="默认加载样式">默认加载样式<a href="#默认加载样式" class="anchor">#</a> </h3><p>样式现在不再会在 <code>antd</code> 中默认加载，如果升级后没有样式，开发者需要手动自行引入样式。</p>
<div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">'antd/lib/index.css'</span>;
<span class="hljs-comment">// 或者</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'antd/style/index.less'</span>;</code></pre></div><h3 id="表格远程模式">表格远程模式<a href="#表格远程模式" class="anchor">#</a> </h3><p><code>Table</code> 的 <code>dataSource</code> 远程模式被移除，用户需要自行实现数据获取方式，ajax 获取数据的演示可以参见 <a href="TODO">演示</a>。</p>
<h3 id="timepicker、datepicker-重命名">Timepicker、Datepicker 重命名<a href="#timepicker、datepicker-重命名" class="anchor">#</a> </h3><p><code>Timepicker</code> 被重命名为 <code>TimePicker</code>，<code>Datepicker</code> 被重命名为 <code>DatePicker</code>，需要做以下改动：</p>
<div class="highlight"><pre><code class="javascript">&lt;Timepicker /&gt; ==&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">TimePicker</span> /&gt;</span></span></code></pre></div><div class="highlight"><pre><code class="javascript">&lt;Datepicker /&gt; ==&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">DatePicker</span> /&gt;</span></span></code></pre></div><h3 id="受控的-datepicker">受控的 DatePicker<a href="#受控的-datepicker" class="anchor">#</a> </h3><p>由于 <code>DatePicker</code> 已改为 <a href="https://facebook.github.io/react/docs/forms.html#controlled-components">受控组件</a>，所以 <code>DatePicker</code> 显示的值必然与其 <code>value</code> 一致。</p>
<p>如果无法理解受控组件，只须在发现在选中日期后 <code>Datepicker</code> 显示的值不变的情况后，把其 <code>value</code> 属性改为 <code>defaultValue</code> 即可。</p>
<h2 id="其他">其他<a href="#其他" class="anchor">#</a> </h2><ul>
<li>Alert 组件默认不展示样式，可以用 <code>showIcon</code> 属性添加图标。</li>
<li>TimePicker 的 <code>hourOptions</code> <code>minuteOptions</code> <code>secondOptions</code> 属性已移除，可使用 <code>disabledHours</code> <code>disabledMinutes</code> <code>disabledSeconds</code> 配和 <code>hideDisabled</code> 属性来完成原有功能。<a href="TODO">演示</a></li>
</ul>
<h2 id="0-9-gt-0-10-升级指南">0.9 =&gt; 0.10 升级指南<a href="#0-9-gt-0-10-升级指南" class="anchor">#</a> </h2><p><code>0.10.x</code> 版本有大量改动，是一个不完全向下兼容的版本。以下文档尽力列出了 <code>0.9.x</code> 到 <code>0.10.x</code> 的不兼容变动，以帮助开发者升级。</p>
<ul>
<li><code>0.10.x</code> 文档：<a href="http://ant.design">http://ant.design</a></li>
index.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="./static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "antd",
"version": "0.11.0-beta3",
"version": "0.11.0-beta4",
"stableVersion": "0.10.4",
"title": "Ant Design",
"description": "一个 UI 设计语言",
@@ -56,7 +56,7 @@
"rc-slider": "~3.3.0",
"rc-steps": "~1.4.1",
"rc-switch": "~1.3.1",
"rc-table": "~3.6.2",
"rc-table": "~3.7.0",
"rc-tabs": "~5.5.0",
"rc-time-picker": "~1.0.0",
"rc-tooltip": "~3.3.0",
readme-zh-cn.html
+1 -1
View File
@@ -197,7 +197,7 @@ Ant Design <a href="https://travis-ci.org/ant-design/ant-design"><img src="https
<script src="./static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/colors.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/easing.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/font.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/introduce.html
+1 -1
View File
@@ -197,7 +197,7 @@ Ant Design - 一个 UI 设计语言
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/layout/index.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/motion.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/page-transition.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/pattern.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/tools.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
spec/typography.html
+1 -1
View File
@@ -197,7 +197,7 @@
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>
style/components/datepicker/Calendar.less
+10 -9
View File
@@ -69,7 +69,7 @@
.@{calendar-prefix-cls} {
position: relative;
outline: none;
width: 253px;
width: 231px;
border: 1px solid @border-color-base;
list-style: none;
font-size: @font-size-base;
@@ -107,7 +107,7 @@
}
&-calendar-body {
padding: 5px 8px;
padding: 4px 8px;
}
table {
@@ -153,10 +153,11 @@
display: block;
margin: 0 auto;
color: #666;
border-radius: 4px 4px;
border-radius: 4px;
width: 20px;
height: 20px;
line-height: 18px;
border: 1px solid transparent;
padding: 0;
background: transparent;
text-align: center;
@@ -173,9 +174,9 @@
}
&-today &-date {
border: 1px solid tint(@primary-color, 50%);
line-height: 18px;
background: tint(@primary-color, 90%);
border-color: @primary-color;
font-weight: bold;
color: @primary-color;
}
&-selected-day &-date {
@@ -217,15 +218,15 @@
&-footer {
padding: 0 15px;
height: 42px;
line-height: 42px;
height: 38px;
line-height: 38px;
border-top: 1px solid @border-color-split;
}
&-footer-btn {
text-align: center;
display: block;
line-height: 42px;
line-height: 38px;
}
&-footer > div {
style/components/datepicker/MonthPanel.less
+1 -1
View File
@@ -1,6 +1,6 @@
.@{calendar-prefix-cls}-month-panel {
left: 0;
top: 0;
top: 34px;
bottom: 0;
right: 0;
background: #fff;
style/components/datepicker/RangePicker.less
+12 -10
View File
@@ -11,18 +11,23 @@
line-height: 18px;
outline: 0;
width: 43%;
text-align: center;
&[disabled] {
cursor: not-allowed;
}
}
.@{calendar-prefix-cls}-range-picker-separator {
color: #999;
}
.@{calendar-prefix-cls}-range {
width: 502px;
width: 470px;
overflow: hidden;
&-part {
width: 250px;
width: 50%;
position: relative;
}
@@ -38,26 +43,23 @@
position: absolute;
left: 50%;
width: 20px;
margin-left: -147px;
margin-left: -132px;
text-align: center;
height: @input-box-height;
line-height: @input-box-height;
color: #999;
}
&-right .@{calendar-prefix-cls}-date-input-wrap {
margin-left: -133px;
margin-left: -118px;
}
&.@{calendar-prefix-cls}-time &-middle {
margin-left: -45px;
margin-left: -29px;
}
&.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
margin-left: -30px;
}
&.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-time-picker-wrap {
left: 78px;
margin-left: -15px;
}
.@{calendar-prefix-cls}-input-wrap {
style/components/datepicker/TimePicker.less
+14 -5
View File
@@ -1,18 +1,27 @@
@import "../../mixins/input";
.@{calendar-prefix-cls}-time {
// Change display order in DOM
.@{calendar-prefix-cls}-input-wrap {
direction: rtl;
.@{calendar-prefix-cls}-date-input-wrap,
.@{calendar-prefix-cls}-time-picker-wrap {
direction: ltr;
display: inline-block;
}
.@{timepicker-prefix-cls}-panel,
.@{calendar-prefix-cls}-clear-btn {
direction: ltr;
}
}
.@{calendar-prefix-cls}-input,
.@{timepicker-prefix-cls}-input {
.input;
height: 22px;
width: 96px;
margin-right: 6px;
}
.@{timepicker-prefix-cls}-icon {
display: none;
}
&-picker-wrap {
position: absolute;
left: 108px;
top: 6px;
}
}
style/components/datepicker/YearPanel.less
+1 -1
View File
@@ -1,6 +1,6 @@
.@{calendar-prefix-cls}-year-panel {
left: 0;
top: 0;
top: 34px;
bottom: 0;
right: 0;
background: #fff;
style/components/table.less
+4
View File
@@ -292,4 +292,8 @@
background: #fbfbfb;
}
}
.@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
margin-right: 5px;
}
}
style/readme.html
+1 -1
View File
@@ -197,7 +197,7 @@ style - Ant Design
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.11.0-beta3',
latest: '0.11.0-beta4',
stable: '0.10.4'
};
</script>