mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 21:19:37 +08:00
Add arrow style
This commit is contained in:
parent
aa27737d24
commit
7051b2c786
@ -46,6 +46,7 @@ class AntCascader extends React.Component {
|
||||
}
|
||||
clearSelection(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.setValue([]);
|
||||
this.setState({ popupVisible: false });
|
||||
}
|
||||
@ -59,6 +60,10 @@ class AntCascader extends React.Component {
|
||||
<Icon type="cross-circle"
|
||||
className={`${prefixCls}-picker-clear`}
|
||||
onClick={this.clearSelection} /> : null;
|
||||
const arrowCls = classNames({
|
||||
[`${prefixCls}-picker-arrow`]: true,
|
||||
[`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
|
||||
});
|
||||
return (
|
||||
<Cascader {...this.props}
|
||||
value={this.state.value}
|
||||
@ -73,6 +78,7 @@ class AntCascader extends React.Component {
|
||||
value={this.getLabel()}
|
||||
readOnly />
|
||||
{clearIcon}
|
||||
<Icon type="down" className={arrowCls} />
|
||||
</span>
|
||||
}
|
||||
</Cascader>
|
||||
|
@ -1,17 +1,23 @@
|
||||
.ant-cascader {
|
||||
@cascader-prefix-cls: ant-cascader;
|
||||
|
||||
.@{cascader-prefix-cls} {
|
||||
font-size: @font-size-base;
|
||||
&-input {
|
||||
width: 172px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
&-picker {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
&-clear {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
z-index: 1;
|
||||
background: #fff;
|
||||
top: 50%;
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
@ -25,9 +31,30 @@
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover &-clear {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// arrow
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: -6px;
|
||||
line-height: 12px;
|
||||
.iconfont-size-under-12px(8px);
|
||||
&:before {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
&&-expand {
|
||||
.ie-rotate(2);
|
||||
&:before {
|
||||
.rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-menus {
|
||||
|
Loading…
Reference in New Issue
Block a user