mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
fix conflict
This commit is contained in:
羽航
commit
2651589101
@ -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>
|
||||
@ -26,7 +26,7 @@
|
||||
"rc-pagination": "^1.0.0",
|
||||
"rc-progress": "~1.0.0",
|
||||
"rc-select": "~4.2.1",
|
||||
"rc-slider": "~1.2.4",
|
||||
"rc-slider": "^1.2.5",
|
||||
"rc-steps": "~1.1.4",
|
||||
"rc-switch": "~1.2.0",
|
||||
"rc-tabs": "~5.2.0",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user