mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 19:50:05 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
yiminghe
commit
285eb6cbe7
@ -1,19 +0,0 @@
|
||||
# 迷你的改变
|
||||
|
||||
- order: 5
|
||||
|
||||
改变每页显示条目数
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Pagination = antd.Pagination;
|
||||
|
||||
function onChange(page) {
|
||||
console.log(page);
|
||||
}
|
||||
|
||||
React.render(
|
||||
<Pagination className="mini" showQuickJumper={true} showSizeChanger={true} onChange={onChange} total={500} />,
|
||||
document.getElementById('components-pagination-demo-mini-more'));
|
||||
````
|
||||
@ -3,11 +3,11 @@
|
||||
let Pagination = require('rc-pagination');
|
||||
let React = require('react');
|
||||
|
||||
let prefixCls = 'ant-patination';
|
||||
let prefixCls = 'ant-pagination';
|
||||
|
||||
class AntPagination extends React.Component {
|
||||
render() {
|
||||
return <Pagination className={prefixCls + this.props.className} {...this.props} />;
|
||||
return <Pagination selectPrefixCls="ant-select" prefixCls={prefixCls} {...this.props} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -25,4 +25,4 @@
|
||||
| showSizeChanger | 是否可以改变 pageSize | Bool | false |
|
||||
| showQuickJump | 是否可以快速跳转至某页 | Bool | false |
|
||||
| className | 当为「mini」时，是小尺寸分页 | String | ant-pagination |
|
||||
| simple | 当添加该属性时，显示未简单分页 | Object | 无 |
|
||||
| simple | 当添加该属性时，显示为简单分页 | Object | 无 |
|
||||
|
||||
@ -10,7 +10,21 @@
|
||||
var Slider = antd.Slider;
|
||||
|
||||
React.render(
|
||||
<div className="sliderContainer">
|
||||
<Slider />
|
||||
<Slider value={65} disabled />
|
||||
</div>
|
||||
, document.getElementById('components-slider-demo-basic'));
|
||||
````
|
||||
|
||||
<style>
|
||||
/* .sliderContainer p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sliderContainer .ant-slider {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
.sliderContainer .ant-slider:last-child {
|
||||
margin-bottom: 0;
|
||||
}*/
|
||||
</style>
|
||||
94
components/slider/demo/icon-slider.md
Normal file
94
components/slider/demo/icon-slider.md
Normal file
@ -0,0 +1,94 @@
|
||||
# 带 icon 的滑块
|
||||
|
||||
- order: 2
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Slider = antd.Slider;
|
||||
|
||||
var IconSlider = React.createClass({
|
||||
getInitialState() {
|
||||
var max = this.props.max;
|
||||
var min = this.props.min;
|
||||
var mid = ((max - min) / 2).toFixed(5);
|
||||
|
||||
var preIcon, nextIcon;
|
||||
if (this.props.value >= mid) {
|
||||
preIcon = this.props.icon[0];
|
||||
nextIcon = this.props.icon[1] + ' anticon-highlight';
|
||||
} else {
|
||||
preIcon = this.props.icon[0] + ' anticon-highlight';
|
||||
nextIcon = this.props.icon[1];
|
||||
}
|
||||
|
||||
return {
|
||||
preIcon: preIcon,
|
||||
nextIcon: nextIcon,
|
||||
mid: mid,
|
||||
sliderValue: this.props.value
|
||||
};
|
||||
},
|
||||
|
||||
handleChange(v) {
|
||||
var preIcon, nextIcon;
|
||||
if (v >= this.state.mid) {
|
||||
preIcon = this.props.icon[0];
|
||||
nextIcon = this.props.icon[1] + ' anticon-highlight';
|
||||
} else {
|
||||
preIcon = this.props.icon[0] + ' anticon-highlight';
|
||||
nextIcon = this.props.icon[1];
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
preIcon: preIcon,
|
||||
nextIcon: nextIcon,
|
||||
sliderValue: v
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="iconWrapper">
|
||||
<i className={this.state.preIcon}></i>
|
||||
<i className={this.state.nextIcon}></i>
|
||||
<Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.render(
|
||||
<IconSlider min={0} max={20} value={0} icon={['anticon anticon-lock', 'anticon anticon-unlock']} />
|
||||
, document.getElementById('components-slider-demo-icon-slider'));
|
||||
````
|
||||
|
||||
<style>
|
||||
.iconWrapper {
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.iconWrapper .anticon {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 1;
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.iconWrapper .anticon:nth-child(1) {
|
||||
left: 0;
|
||||
}
|
||||
.iconWrapper .anticon:nth-child(2){
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.anticon.anticon-highlight {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
45
components/slider/demo/input-number-slider.md
Normal file
45
components/slider/demo/input-number-slider.md
Normal file
@ -0,0 +1,45 @@
|
||||
# 带输入框的滑块
|
||||
|
||||
- order: 1
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Slider = antd.Slider;
|
||||
var InputNumber = antd.InputNumber;
|
||||
|
||||
var Test = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
inputValue: 0
|
||||
};
|
||||
},
|
||||
onChange(v){
|
||||
this.setState({
|
||||
inputValue: v
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12 spacing">
|
||||
<Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue}/>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<InputNumber min={1} max={20} value={this.state.inputValue} onChange={this.onChange} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<Test />, document.getElementById('components-slider-demo-input-number-slider'));
|
||||
````
|
||||
|
||||
<style>
|
||||
.spacing {
|
||||
padding-right: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -10,7 +10,17 @@
|
||||
var Slider = antd.Slider;
|
||||
|
||||
React.render(
|
||||
<Slider marks={["状态1","状态2","状态3","状态4"]} index={1}/>
|
||||
<div className="sliderContainer">
|
||||
<p>包含关系</p>
|
||||
<Slider marks={["状态1","状态2","状态3","状态4"]} index={1} />
|
||||
<p>并列关系</p>
|
||||
<Slider marks={["状态1","状态2","状态3","状态4"]} isIncluded={false} index={1} />
|
||||
</div>
|
||||
, document.getElementById('components-slider-demo-mark'));
|
||||
````
|
||||
|
||||
<style>
|
||||
.sliderContainer .ant-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -20,5 +20,6 @@
|
||||
| step | Number | 1 | 步长，取值必须大于 0，并且可被 (max - min) 整除
|
||||
| value | Number | 0 | 当前取值
|
||||
| marks | Array | [] | 分段标记，标记每一个 step，如果 step 属性没有定义，则 `marks` 属性会被忽略
|
||||
| isIncluded | Boolean | true | 分段式滑块，值为 true 时表示值为包含关系，false 表示并列
|
||||
| index | Number | 0 | 为具备 `step` 或者 `marks` 的 slider 提供滑块操作按钮最初的位置
|
||||
| disabled | Boolean | false | 值为 `true` 时，滑块为 disable 禁用状态
|
||||
@ -18,7 +18,7 @@ var steps = [{
|
||||
}, {
|
||||
status: 'process',
|
||||
title: '进行中',
|
||||
description: '这里是多信息的耶哦耶哦哦耶哦耶哦耶哦耶哦耶'
|
||||
description: '这里是多信息的耶哦耶哦哦耶哦耶'
|
||||
}, {
|
||||
status: 'wait',
|
||||
title: '又一个待运行',
|
||||
|
||||
@ -26,8 +26,8 @@
|
||||
"rc-pagination": "^1.0.0",
|
||||
"rc-progress": "~1.0.0",
|
||||
"rc-select": "~4.2.1",
|
||||
"rc-slider": "~1.2.4",
|
||||
"rc-steps": "~1.1.3",
|
||||
"rc-slider": "^1.2.5",
|
||||
"rc-steps": "~1.1.4",
|
||||
"rc-switch": "~1.2.0",
|
||||
"rc-tabs": "~5.2.0",
|
||||
"rc-tooltip": "~2.4.0"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@prefixClass: rc-pagination;
|
||||
|
||||
@prefixClass: ant-pagination;
|
||||
|
||||
.@{prefixClass} {
|
||||
user-select: none;
|
||||
@ -15,7 +14,7 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.@{prefixClass}-item {
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
min-width: 28px;
|
||||
@ -27,31 +26,32 @@
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #fff;
|
||||
margin-right: 8px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: #2db7f5;
|
||||
border-color: @primary-color;
|
||||
a {
|
||||
color: #2db7f5;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #2db7f5;
|
||||
border: none;
|
||||
&-active {
|
||||
background-color: @primary-color;
|
||||
border-color: @primary-color;
|
||||
|
||||
a {
|
||||
a,
|
||||
&:hover a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jump-prev, .jump-next {
|
||||
&-jump-prev, &-jump-next {
|
||||
&:after {
|
||||
content: "•••";
|
||||
display: block;
|
||||
@ -63,13 +63,13 @@
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
color: #2db7f5;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.jump-prev {
|
||||
&-jump-prev {
|
||||
&:hover {
|
||||
&:after {
|
||||
content: "‹‹";
|
||||
@ -77,7 +77,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.jump-next {
|
||||
&-jump-next {
|
||||
&:hover {
|
||||
&:after {
|
||||
content: "››";
|
||||
@ -85,10 +85,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.prev, .jump-prev, .jump-next {
|
||||
&-prev, &-jump-prev, &-jump-next {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.prev, .next, .jump-prev, .jump-next {
|
||||
&-prev, &-next, &-jump-prev, &-jump-next {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
font-size: 10px;
|
||||
@ -101,7 +101,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prev, .next {
|
||||
&-prev, &-next {
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
a {
|
||||
@ -111,92 +111,53 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #2db7f5;
|
||||
border-color: @primary-color;
|
||||
|
||||
a {
|
||||
color: #2db7f5;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
&:hover {
|
||||
border-color: #d9d9d9;
|
||||
a {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
cursor: not-allowed;
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
&-options {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
.size-changer {
|
||||
&-size-changer {
|
||||
float: left;
|
||||
width: 90px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.quick-jumper {
|
||||
&-quick-jumper {
|
||||
float: left;
|
||||
margin-left: 16px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
|
||||
input {
|
||||
.input;
|
||||
margin: 0 8px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
outline: none;
|
||||
padding: 3px 12px;
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
|
||||
&:hover {
|
||||
border-color: #2db7f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass}.mini {
|
||||
|
||||
.@{prefixClass}-item {
|
||||
border: none;
|
||||
margin: 0;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.prev, .next {
|
||||
margin: 0;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.jump-prev, .jump-next {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.quick-jumper {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
|
||||
input {
|
||||
padding: 3px 7px;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass}.simple {
|
||||
.prev, .next {
|
||||
&-simple &-prev, &-simple &-next {
|
||||
border: none;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
@ -204,11 +165,11 @@
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.simple-pager {
|
||||
&-simple &-simple-pager {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
|
||||
.slash {
|
||||
&-slash {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@ -222,13 +183,49 @@
|
||||
padding: 5px 8px;
|
||||
width: 30px;
|
||||
min-height: 20px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: #2db7f5;
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass} {
|
||||
|
||||
&.mini &-item {
|
||||
border: none;
|
||||
margin: 0;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&.mini &-prev,
|
||||
&.mini &-next {
|
||||
margin: 0;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.mini &-jump-prev, &.mini &-jump-next {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&.mini &-options {
|
||||
&-quick-jumper {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
|
||||
input {
|
||||
.input-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
@sliderClass: ~"@{css-prefix}slider";
|
||||
|
||||
// color
|
||||
// slider color
|
||||
@disabledColor: #ccc;
|
||||
// tooltip
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-bg: tint(#666, 4%);
|
||||
@tooltip-arrow-width: 4px;
|
||||
@tooltip-distance: @tooltip-arrow-width+4;
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
.@{sliderClass} {
|
||||
position: relative;
|
||||
margin: 12px 0;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
border-radius: @border-radius-base;
|
||||
@ -44,7 +51,7 @@
|
||||
|
||||
&-mark {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
top: 10px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
@ -95,7 +102,7 @@
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
background-color: @disabledColor;
|
||||
background-color: #e9e9e9;
|
||||
|
||||
.@{sliderClass}-track {
|
||||
background-color: @disabledColor;
|
||||
@ -111,4 +118,51 @@
|
||||
cursor: not-allowed!important;
|
||||
}
|
||||
}
|
||||
|
||||
// slider tooltip style
|
||||
&-tooltip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
z-index: 4;
|
||||
visibility: visible;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-placement-top {
|
||||
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
padding: 6px 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1;
|
||||
color: @tooltip-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: 0 0 4px #d9d9d9;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&-placement-top &-arrow {
|
||||
bottom: @tooltip-distance - @tooltip-arrow-width;
|
||||
left: 50%;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,11 +4,11 @@
|
||||
@process-icon-color: @primary-color;
|
||||
@process-title-color: #666;
|
||||
@process-description-color: @process-title-color;
|
||||
@process-tail-color: #bcbcbc;
|
||||
@wait-icon-color: #bcbcbc;
|
||||
@process-tail-color: #e9e9e9;
|
||||
@wait-icon-color: #ccc;
|
||||
@wait-title-color: #999;
|
||||
@wait-description-color: @wait-title-color;
|
||||
@wait-tail-color: @wait-icon-color;
|
||||
@wait-tail-color: @process-tail-color;
|
||||
@finish-icon-color: @process-icon-color;
|
||||
@finish-title-color: @wait-title-color;
|
||||
@finish-description-color: @finish-title-color;
|
||||
@ -93,7 +93,9 @@
|
||||
height: auto;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
font-size: 20px;
|
||||
top: 0;
|
||||
top: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
&.@{stepsPrefixClass}-status-process {
|
||||
@ -134,6 +136,8 @@
|
||||
|
||||
&.anticon {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -167,7 +171,7 @@
|
||||
> i {
|
||||
display: inline-block;
|
||||
background: @wait-tail-color;
|
||||
height: 2px;
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
width: 100%;
|
||||
.transition(background 0.3s ease);
|
||||
@ -188,6 +192,7 @@
|
||||
font-size: 12px;
|
||||
font-size: ~"9px \9"; // ie8-9
|
||||
.scale(0.75);
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
.@{stepsPrefixClass}-main {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user