feat: update antd3.8.4
tangjinzhou
parent
702fbc8119
commit
12918ae619
|
|
@ -52,7 +52,7 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
#components-badge-demo .ant-badge:not(.ant-badge-status) {
|
||||
#components-badge-demo .ant-badge:not(.ant-badge-not-a-wrapper) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
#components-badge-demo .head-example {
|
||||
|
|
@ -62,4 +62,7 @@
|
|||
background: #eee;
|
||||
display: inline-block;
|
||||
}
|
||||
#components-badge-demo .ant-badge-not-a-wrapper:not(.ant-badge-status) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,7 @@
|
|||
color: unset;
|
||||
|
||||
&-count {
|
||||
position: absolute;
|
||||
transform: translate(50%, -50%);
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: -@badge-height / 2;
|
||||
height: @badge-height;
|
||||
border-radius: @badge-height / 2;
|
||||
min-width: @badge-height;
|
||||
|
|
@ -28,7 +25,6 @@
|
|||
font-size: @badge-font-size;
|
||||
font-weight: @badge-font-weight;
|
||||
white-space: nowrap;
|
||||
transform-origin: 0 center;
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
a,
|
||||
a:hover {
|
||||
|
|
@ -41,11 +37,7 @@
|
|||
}
|
||||
|
||||
&-dot {
|
||||
position: absolute;
|
||||
transform: translate(50%, -50%);
|
||||
transform-origin: 0 center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: -@badge-dot-size / 2;
|
||||
height: @badge-dot-size;
|
||||
width: @badge-dot-size;
|
||||
border-radius: 100%;
|
||||
|
|
@ -54,6 +46,14 @@
|
|||
box-shadow: 0 0 0 1px #fff;
|
||||
}
|
||||
|
||||
&-count,
|
||||
&-dot {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translateX(50%);
|
||||
transform-origin: 100%;
|
||||
}
|
||||
|
||||
&-status {
|
||||
line-height: inherit;
|
||||
vertical-align: baseline;
|
||||
|
|
@ -150,19 +150,19 @@
|
|||
@keyframes antZoomBadgeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0) translateX(-50%);
|
||||
transform: scale(0) translateX(50%);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateX(-50%);
|
||||
transform: scale(1) translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomBadgeOut {
|
||||
0% {
|
||||
transform: scale(1) translateX(-50%);
|
||||
transform: scale(1) translateX(50%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0) translateX(-50%);
|
||||
transform: scale(0) translateX(50%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@
|
|||
@card-prefix-cls: ~"@{ant-prefix}-card";
|
||||
@card-head-height: 48px;
|
||||
@card-hover-border: rgba(0, 0, 0, 0.09);
|
||||
@card-radius: @border-radius-sm;
|
||||
|
||||
.@{card-prefix-cls} {
|
||||
.reset-component;
|
||||
background: @component-background;
|
||||
border-radius: @border-radius-sm;
|
||||
border-radius: @card-radius;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
|
||||
|
|
@ -28,7 +29,7 @@
|
|||
background: @card-head-background;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
padding: 0 @card-padding-base;
|
||||
border-radius: @border-radius-sm @border-radius-sm 0 0;
|
||||
border-radius: @card-radius @card-radius 0 0;
|
||||
.clearfix;
|
||||
margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
|
||||
min-height: @card-head-height;
|
||||
|
|
@ -101,9 +102,14 @@
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&-cover > * {
|
||||
width: 100%;
|
||||
display: block;
|
||||
&-cover {
|
||||
> * {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
border-radius: @card-radius @card-radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
|
|
@ -232,7 +238,7 @@
|
|||
&-loading-block {
|
||||
height: 14px;
|
||||
margin: 4px 0;
|
||||
border-radius: @border-radius-sm;
|
||||
border-radius: @card-radius;
|
||||
background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2));
|
||||
animation: card-loading 1.4s ease infinite;
|
||||
background-size: 600% 600%;
|
||||
|
|
|
|||
|
|
@ -165,6 +165,8 @@
|
|||
padding: 0;
|
||||
border-right: @border-width-base @border-style-base @border-color-split;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
|
||||
|
||||
&:first-child {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,8 +86,8 @@
|
|||
|
||||
// 半选状态
|
||||
.@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
|
||||
@indeterminate-width: @checkbox-size - 7px;
|
||||
@indeterminate-height: @checkbox-size - 7px;
|
||||
@indeterminate-width: @checkbox-size - 8px;
|
||||
@indeterminate-height: @checkbox-size - 8px;
|
||||
content: ' ';
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -5,25 +5,29 @@
|
|||
.@{dawer-prefix-cls} {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
width: 0%;
|
||||
z-index: @zindex-modal;
|
||||
transition: transform 0.3s @ease-in-out-circ;
|
||||
> * {
|
||||
transition: transform 0.3s @ease-in-out-circ;
|
||||
transition: transform @animation-duration-slow @ease-base-in;
|
||||
}
|
||||
|
||||
&-content-wrapper {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
}
|
||||
.@{dawer-prefix-cls}-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
.@{dawer-prefix-cls}-content-wrapper,
|
||||
.@{dawer-prefix-cls}-content {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
.@{dawer-prefix-cls}-content-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
&.@{dawer-prefix-cls}-open {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
&.@{dawer-prefix-cls}-open {
|
||||
|
|
@ -44,13 +48,41 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&.@{dawer-prefix-cls}-open {
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
|
||||
&-top,
|
||||
&-bottom {
|
||||
.@{dawer-prefix-cls}-content-wrapper,
|
||||
.@{dawer-prefix-cls}-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&-top {
|
||||
&.@{dawer-prefix-cls}-open {
|
||||
.@{dawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-down;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
.@{dawer-prefix-cls} {
|
||||
&-content-wrapper {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
&.@{dawer-prefix-cls}-open {
|
||||
.@{dawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-up;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{dawer-prefix-cls}-open {
|
||||
.@{dawer-prefix-cls} {
|
||||
&-mask {
|
||||
opacity: 0.3;
|
||||
height: 100%;
|
||||
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -82,7 +114,7 @@
|
|||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
transition: color @animation-duration-slow;
|
||||
color: @text-color-secondary;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
|
|
@ -129,21 +161,29 @@
|
|||
|
||||
&-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
background-color: @modal-mask-bg;
|
||||
height: 100%;
|
||||
transition: opacity 0.3s @ease-in-out-circ;
|
||||
filter: ~"alpha(opacity=50)";
|
||||
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
|
||||
}
|
||||
|
||||
&-open {
|
||||
overflow: hidden;
|
||||
transition: transform @animation-duration-slow @ease-base-out;
|
||||
> * {
|
||||
transition: transform @animation-duration-slow @ease-base-out;
|
||||
}
|
||||
&-content {
|
||||
box-shadow: @shadow-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antdDrawerFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
||||
// style dependencies
|
||||
import '../../button/style'
|
||||
import '../../button/style';
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
cursor: pointer;
|
||||
&-inner {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
margin-top: -5px;
|
||||
&:before {
|
||||
text-align: center;
|
||||
content: "\e61e";
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
|
||||
&-handler-down {
|
||||
border-top: @border-width-base @border-style-base @border-color-base;
|
||||
top: -1px;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
&-inner {
|
||||
top: 50%;
|
||||
|
|
|
|||
|
|
@ -271,6 +271,11 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/11863
|
||||
& > span > .@{inputClass} {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
// Undo float for .ant-input-group .ant-input
|
||||
.@{inputClass} {
|
||||
float: none;
|
||||
|
|
|
|||
|
|
@ -179,6 +179,16 @@
|
|||
position: absolute;
|
||||
border-radius: @border-radius-base;
|
||||
z-index: @zindex-dropdown;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: -6px;
|
||||
right: -6px;
|
||||
bottom: 0;
|
||||
content: ' ';
|
||||
opacity: .0001;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{menu-prefix-cls} {
|
||||
|
|
@ -375,6 +385,7 @@
|
|||
width: @menu-collapsed-width;
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title,
|
||||
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
left: 0;
|
||||
text-overflow: clip;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
@steps-small-icon-size: 24px;
|
||||
@steps-dot-size: 8px;
|
||||
@steps-current-dot-size: 10px;
|
||||
@steps-desciption-max-width: 140px;
|
||||
@steps-desciption-max-width: 150px;
|
||||
|
||||
.@{steps-prefix-cls} {
|
||||
.reset-component;
|
||||
|
|
@ -147,6 +147,7 @@
|
|||
}
|
||||
&-description {
|
||||
max-width: @steps-desciption-max-width;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,14 +19,15 @@
|
|||
right: -1px;
|
||||
border-radius: inherit;
|
||||
border: 0 solid @primary-color;
|
||||
opacity: 0.4;
|
||||
animation: waveEffect .4s cubic-bezier(.25, .8, .25, 1);
|
||||
opacity: 0.2;
|
||||
animation: fadeEffect 2s @ease-out-circ, waveEffect .4s @ease-out-circ;
|
||||
animation-fill-mode: forwards;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes waveEffect {
|
||||
to {
|
||||
opacity: 0;
|
||||
100% {
|
||||
top: -@wave-animation-width;
|
||||
left: -@wave-animation-width;
|
||||
bottom: -@wave-animation-width;
|
||||
|
|
@ -34,3 +35,9 @@
|
|||
border-width: @wave-animation-width;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeEffect {
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@
|
|||
// Shadow
|
||||
@shadow-color : rgba(0, 0, 0, .15);
|
||||
@box-shadow-base : @shadow-1-down;
|
||||
@shadow-1-up : 0 2px 8px @shadow-color;
|
||||
@shadow-1-up : 0 -2px 8px @shadow-color;
|
||||
@shadow-1-down : 0 2px 8px @shadow-color;
|
||||
@shadow-1-left : -2px 0 8px @shadow-color;
|
||||
@shadow-1-right : 2px 0 8px @shadow-color;
|
||||
|
|
|
|||
|
|
@ -205,26 +205,21 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&-large {
|
||||
> .@{tab-prefix-cls}-bar {
|
||||
.@{tab-prefix-cls}-nav-container {
|
||||
font-size: @tabs-title-font-size-lg;
|
||||
}
|
||||
.@{tab-prefix-cls}-tab {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-large &-nav-container {
|
||||
font-size: @tabs-title-font-size-lg;
|
||||
}
|
||||
|
||||
&-small {
|
||||
> .@{tab-prefix-cls}-bar {
|
||||
.@{tab-prefix-cls}-nav-container {
|
||||
font-size: @tabs-title-font-size-sm;
|
||||
}
|
||||
.@{tab-prefix-cls}-tab {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
&-large &-tab {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&-small &-nav-container {
|
||||
font-size: @tabs-title-font-size-sm;
|
||||
}
|
||||
|
||||
&-small &-tab {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&:not(&-vertical) {
|
||||
|
|
|
|||
|
|
@ -1,82 +1,151 @@
|
|||
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import Icon from '../icon'
|
||||
import getTransitionProps from '../_util/getTransitionProps'
|
||||
import omit from 'omit.js'
|
||||
import Wave from '../_util/wave'
|
||||
import { hasProp, getOptionProps } from '../_util/props-util'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
|
||||
export default {
|
||||
name: 'ATag',
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
prefixCls: {
|
||||
default: 'ant-tag',
|
||||
type: String,
|
||||
},
|
||||
color: String,
|
||||
closable: Boolean,
|
||||
prefixCls: PropTypes.string.def('ant-tag'),
|
||||
color: PropTypes.string,
|
||||
closable: PropTypes.bool,
|
||||
visible: PropTypes.bool,
|
||||
},
|
||||
model: {
|
||||
prop: 'visible',
|
||||
event: 'close.visible',
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
closed: false,
|
||||
const props = getOptionProps(this)
|
||||
let state = {}
|
||||
if ('visible' in props) {
|
||||
state = {
|
||||
_visible: props.visible,
|
||||
_closed: !props.visible,
|
||||
}
|
||||
}
|
||||
state = {
|
||||
_closing: false,
|
||||
_closed: false,
|
||||
_visible: true,
|
||||
...state,
|
||||
}
|
||||
this.pre_visible = state._visible
|
||||
return state
|
||||
},
|
||||
computed: {
|
||||
isPresetColor () {
|
||||
const isPresetColor = (color) => {
|
||||
if (!color) { return false }
|
||||
return /^(pink|red|yellow|orange|cyan|green|blue|purple)(-inverse)?$/.test(color)
|
||||
}
|
||||
return isPresetColor(this.color)
|
||||
watch: {
|
||||
visible (val) {
|
||||
this.setState({
|
||||
_visible: val,
|
||||
})
|
||||
},
|
||||
classes () {
|
||||
const { prefixCls, color, isPresetColor } = this
|
||||
return {
|
||||
[`${prefixCls}`]: true,
|
||||
[`${prefixCls}-${color}`]: isPresetColor,
|
||||
[`${prefixCls}-has-color`]: (color && !isPresetColor),
|
||||
},
|
||||
updated () {
|
||||
this.$nextTick(() => {
|
||||
if (this.pre_visible && !this.$data._visible) {
|
||||
this.close()
|
||||
} else if (!this.pre_visible && this.$data._visible) {
|
||||
this.show()
|
||||
}
|
||||
},
|
||||
tagStyle () {
|
||||
const { color, isPresetColor } = this
|
||||
return {
|
||||
backgroundColor: (color && !isPresetColor) ? color : null,
|
||||
}
|
||||
},
|
||||
this.pre_visible = this.$data._visible
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
animationEnd () {
|
||||
this.$emit('afterClose')
|
||||
},
|
||||
close (e) {
|
||||
handleIconClick (e) {
|
||||
this.$emit('close', e)
|
||||
if (e.defaultPrevented) {
|
||||
this.$emit('close.visible', false)
|
||||
if (e.defaultPrevented || hasProp(this, 'visible')) {
|
||||
return
|
||||
}
|
||||
this.closed = true
|
||||
this.setState({ _visible: false })
|
||||
},
|
||||
close () {
|
||||
if (this.$data._closing || this.$data._closed) {
|
||||
return
|
||||
}
|
||||
const dom = this.$el
|
||||
dom.style.width = `${dom.getBoundingClientRect().width}px`
|
||||
// It's Magic Code, don't know why
|
||||
dom.style.width = `${dom.getBoundingClientRect().width}px`
|
||||
this.setState({
|
||||
_closing: true,
|
||||
})
|
||||
},
|
||||
|
||||
show () {
|
||||
this.setState({
|
||||
_closed: false,
|
||||
})
|
||||
},
|
||||
|
||||
animationEnd (_, existed) {
|
||||
if (!existed && !this.$data._closed) {
|
||||
this.setState({
|
||||
_closed: true,
|
||||
_closing: false,
|
||||
})
|
||||
|
||||
const afterClose = this.afterClose
|
||||
if (afterClose) {
|
||||
afterClose()
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
_closed: false,
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
isPresetColor (color) {
|
||||
if (!color) { return false }
|
||||
return (
|
||||
/^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/
|
||||
.test(color)
|
||||
)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { prefixCls, animationEnd, classes, tagStyle, closable, close, closed, $slots, $listeners } = this
|
||||
const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
|
||||
afterLeave: animationEnd,
|
||||
})
|
||||
// const tagProps = {
|
||||
// on
|
||||
// }
|
||||
return (
|
||||
<transition
|
||||
{...transitionProps}
|
||||
>
|
||||
{!closed
|
||||
? <div
|
||||
|
||||
class={classes}
|
||||
style={tagStyle}
|
||||
{...{ on: omit($listeners, ['close', 'afterClose']) }}
|
||||
>
|
||||
{$slots.default}
|
||||
{closable ? <Icon type='cross' onClick={close} /> : null}
|
||||
</div> : null
|
||||
}
|
||||
</transition>
|
||||
render () {
|
||||
const { prefixCls, closable, color } = this.$props
|
||||
const closeIcon = closable ? <Icon type='cross' onClick={this.handleIconClick} /> : ''
|
||||
const isPresetColor = this.isPresetColor(color)
|
||||
const cls = {
|
||||
[`${prefixCls}`]: true,
|
||||
[`${prefixCls}-${color}`]: isPresetColor,
|
||||
[`${prefixCls}-has-color`]: (color && !isPresetColor),
|
||||
[`${prefixCls}-close`]: this.$data._closing,
|
||||
}
|
||||
|
||||
const tagStyle = {
|
||||
backgroundColor: (color && !isPresetColor) ? color : null,
|
||||
}
|
||||
const tag = this.$data._closed ? <span /> : (
|
||||
<div
|
||||
v-show={!this.$data._closing}
|
||||
{...{ on: omit(this.$listeners, ['close']) }}
|
||||
class={cls}
|
||||
style={tagStyle}
|
||||
>
|
||||
{this.$slots.default}
|
||||
{closeIcon}
|
||||
</div>
|
||||
)
|
||||
const transitionProps = this.$data._closed ? {} : getTransitionProps(`${prefixCls}-zoom`, {
|
||||
afterLeave: () => this.animationEnd(undefined, false),
|
||||
afterEnter: () => this.animationEnd(undefined, true),
|
||||
})
|
||||
return (
|
||||
<Wave>
|
||||
<transition
|
||||
{...transitionProps}
|
||||
>
|
||||
{tag}
|
||||
</transition>
|
||||
</Wave>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<cn>
|
||||
#### 控制关闭状态
|
||||
通过 `visible` 属性控制关闭状态。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Controlled
|
||||
By using the `visible` prop, you can control the close state of Tag.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-tag
|
||||
closable
|
||||
:visible="visible"
|
||||
>
|
||||
Movies
|
||||
</a-tag>
|
||||
<br />
|
||||
<a-button
|
||||
size="small"
|
||||
@click="()=>{this.visible = !this.visible}"
|
||||
>
|
||||
Toggle
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -4,6 +4,7 @@ import Checkable from './checkable'
|
|||
import Colorful from './colorful'
|
||||
import Control from './control'
|
||||
import HotTags from './hot-tags'
|
||||
import Controlled from './controlled'
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
|
||||
|
|
@ -43,6 +44,7 @@ export default {
|
|||
<Colorful />
|
||||
<Control />
|
||||
<HotTags />
|
||||
<Controlled />
|
||||
<api>
|
||||
<template slot='cn'>
|
||||
<CN/>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,10 @@
|
|||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| afterClose | Callback executed when close animation is completed | () => void | - |
|
||||
| closable | Whether Tag can be closed | boolean | `false` |
|
||||
| closable | Whether the Tag can be closed | boolean | `false` |
|
||||
| color | Color of the Tag | string | - |
|
||||
| visible | Whether the Tag is closed or not | boolean | `true` |
|
||||
|
||||
|
||||
### Tag Events
|
||||
| Events Name | Description | Arguments |
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
| afterClose | 关闭动画完成后的回调 | () => void | - |
|
||||
| closable | 标签是否可以关闭 | boolean | false |
|
||||
| color | 标签色 | string | - |
|
||||
| visible | 是否显示标签 | boolean | `true` |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
border-radius: @border-radius-base;
|
||||
box-shadow: @box-shadow-base;
|
||||
min-height: 32px;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
|
|
|
|||
|
|
@ -64,9 +64,12 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding: 16px 0;
|
||||
background: @background-color-light;
|
||||
|
||||
.@{upload-prefix-cls} {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
&.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
|
||||
border: 2px dashed @primary-5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const path = require('path')
|
|||
|
||||
const owner = 'ant-design'
|
||||
const repo = 'ant-design'
|
||||
const tag = '3.8.2'
|
||||
const tag = '3.8.4'
|
||||
const clientId = '5f6ccfdc4cdc69f8ba12'
|
||||
const clientSecret = process.env.CLIENT_SECRET
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue