tangjinzhou
2 years ago
parent
b2841a27ae
commit
1f33babc89
@ -0,0 +1,57 @@
|
||||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 操作
|
||||
en-US: Action
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以在右上角自定义操作项。
|
||||
|
||||
## en-US
|
||||
|
||||
Custom action.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<a-alert message="Success Tips" type="success" show-icon closable>
|
||||
<template #action>
|
||||
<a-button size="small" type="text">UNDO</a-button>
|
||||
</template>
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Error Text"
|
||||
show-icon
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
>
|
||||
<template #action>
|
||||
<a-button size="small" danger>Detail</a-button>
|
||||
</template>
|
||||
</a-alert>
|
||||
<a-alert message="Warning Text" type="warning" closable>
|
||||
<template #action>
|
||||
<a-space>
|
||||
<a-button size="small" type="ghost">Done</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
closable
|
||||
>
|
||||
<template #action>
|
||||
<a-space direction="vertical">
|
||||
<a-button size="small" type="primary">Accept</a-button>
|
||||
<a-button size="small" danger type="ghost">Decline</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-space>
|
||||
</template>
|
||||
@ -1,155 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@alert-prefix-cls: ~'@{ant-prefix}-alert';
|
||||
|
||||
.@{alert-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 15px;
|
||||
word-wrap: break-word;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
margin-right: @margin-xs;
|
||||
}
|
||||
|
||||
&-description {
|
||||
display: none;
|
||||
font-size: @font-size-base;
|
||||
line-height: @font-size-base + 8px;
|
||||
}
|
||||
|
||||
&-success {
|
||||
background-color: @alert-success-bg-color;
|
||||
border: @border-width-base @border-style-base @alert-success-border-color;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @alert-success-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: @alert-info-bg-color;
|
||||
border: @border-width-base @border-style-base @alert-info-border-color;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @alert-info-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: @alert-warning-bg-color;
|
||||
border: @border-width-base @border-style-base @alert-warning-border-color;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @alert-warning-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
background-color: @alert-error-bg-color;
|
||||
border: @border-width-base @border-style-base @alert-error-border-color;
|
||||
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @alert-error-icon-color;
|
||||
}
|
||||
|
||||
.@{alert-prefix-cls}-description > pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-action {
|
||||
margin-left: @margin-xs;
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
margin-left: @margin-xs;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-sm;
|
||||
line-height: @font-size-sm;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
color: @alert-close-color;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @alert-close-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-close-text {
|
||||
color: @alert-close-color;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @alert-close-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-description {
|
||||
align-items: flex-start;
|
||||
padding: @alert-with-description-padding;
|
||||
}
|
||||
|
||||
&-with-description&-no-icon {
|
||||
padding: @alert-with-description-no-icon-padding-vertical 15px;
|
||||
}
|
||||
|
||||
&-with-description &-icon {
|
||||
margin-right: @alert-with-description-padding-vertical;
|
||||
font-size: @alert-with-description-icon-size;
|
||||
}
|
||||
|
||||
&-with-description &-message {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: @alert-message-color;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
&-message {
|
||||
color: @alert-message-color;
|
||||
}
|
||||
|
||||
&-with-description &-description {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&&-motion-leave {
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transition: max-height 0.3s @ease-in-out-circ, opacity 0.3s @ease-in-out-circ,
|
||||
padding-top 0.3s @ease-in-out-circ, padding-bottom 0.3s @ease-in-out-circ,
|
||||
margin-bottom 0.3s @ease-in-out-circ;
|
||||
}
|
||||
|
||||
&&-motion-leave-active {
|
||||
max-height: 0;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-banner {
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
@ -1,2 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
@ -1,40 +0,0 @@
|
||||
.@{alert-prefix-cls} {
|
||||
&&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
.@{alert-prefix-cls}-rtl & {
|
||||
margin-right: auto;
|
||||
margin-left: @margin-xs;
|
||||
}
|
||||
}
|
||||
|
||||
&-action {
|
||||
.@{alert-prefix-cls}-rtl & {
|
||||
margin-right: @margin-xs;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
.@{alert-prefix-cls}-rtl & {
|
||||
margin-right: @margin-xs;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-description {
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
padding-right: @alert-with-description-icon-size;
|
||||
padding-left: @alert-with-description-padding-vertical;
|
||||
}
|
||||
|
||||
.@{alert-prefix-cls}-icon {
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
margin-right: auto;
|
||||
margin-left: @alert-with-description-padding-vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
<template>
|
||||
<a-alert message="Success Text" prefix-cls="tes" type="success" />
|
||||
<a-alert message="Success Tips" type="success" show-icon closable>
|
||||
<template #action>
|
||||
<a-button v-if="false" size="small" type="text">UNDO</a-button>
|
||||
</template>
|
||||
</a-alert>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in new issue