+
继续提交
取消操作
@@ -37,4 +52,8 @@ export default {
.demo-alert .tiny-alert__opration {
margin-top: 4px;
}
+
+.demo-alert .tiny-alert__opration a {
+ margin-right: 16px;
+}
diff --git a/examples/sites/demos/pc/app/alert/webdoc/alert.js b/examples/sites/demos/pc/app/alert/webdoc/alert.js
index 7bb400b0c1..d240b13973 100644
--- a/examples/sites/demos/pc/app/alert/webdoc/alert.js
+++ b/examples/sites/demos/pc/app/alert/webdoc/alert.js
@@ -10,7 +10,7 @@ export default {
},
desc: {
'zh-CN':
- '通过 description
属性或者 description
插槽来设置提示内容,通过 type
设置不同的类型。
',
+ '通过 description
属性或者 description
插槽来设置提示内容。
通过 type
属性,设置不同的类型。
',
'en-US':
'Set the prompt content through the description
attribute or description
slot, and set different types through type
.
'
},
@@ -19,13 +19,28 @@ export default {
{
demoId: 'size',
name: {
- 'zh-CN': '尺寸',
- 'en-US': 'Size'
+ 'zh-CN': '尺寸模式',
+ 'en-US': 'Size Mode'
},
desc: {
- 'zh-CN': '通过 size
设置不同的尺寸,可选值: normal
、large
。
',
- 'en-US':
- 'Set different sizes through size
, with optional values: normal, large
.
'
+ 'zh-CN': `
+ 通过 size
设置不同的尺寸模式,可选值: normal
、large
。
+
+
尺寸模式区别
+
+ - normal模式下,不会显示标题和交互操作的区域,相当于简单模式。
+ - large模式下,显示全部元素,相当于完整模式。
+
+ `,
+ 'en-US': `
+ Use size
to set different size modes, optional values: normal
, large
.
+
+
Size pattern difference
+
+ - normal mode, the header and interactive areas are not displayed, which is equivalent to simple mode.
+ - large mode, all elements are displayed, equivalent to the full mode.
+
+ `
},
codeFiles: ['size.vue']
},
@@ -36,21 +51,21 @@ export default {
'en-US': 'Custom Title'
},
desc: {
- 'zh-CN':
- '当 size
为 large
时,通过 title
属性 或 title
插槽自定义标题。如不设置,默认标题根据对应的 type
显示。
',
+ 'zh-CN': `当 size
为 large
时,通过 title
属性 或 title
插槽,可以自定义组件的标题。
+ 如果未自定义标题, 会根据对应的 type
显示相应的默认标题。`,
'en-US':
- 'When size
is set to large, the title is displayed. You can set title
or slot
to customize the title. The default title is displayed according to the set type
.
'
+ 'When size
is set to large, the title is displayed. You can set title
or slot
to customize the title.
The default title is displayed according to the set type
.
'
},
codeFiles: ['title.vue']
},
{
demoId: 'center',
name: {
- 'zh-CN': '文字居中',
- 'en-US': 'Center text'
+ 'zh-CN': '内容居中',
+ 'en-US': 'Center content'
},
desc: {
- 'zh-CN': '通过 center
设置文字显示居中。
',
+ 'zh-CN': '通过 center
设置内容显示居中。
',
'en-US': 'You can use the center
property to center the text.
'
},
codeFiles: ['center.vue']
@@ -59,13 +74,13 @@ export default {
demoId: 'icon',
name: {
'zh-CN': '自定义警告图标',
- 'en-US': 'Customized warning icon'
+ 'en-US': 'Customized alert icon'
},
desc: {
'zh-CN':
- '通过 icon
设置自定义图标,默认会根据不同的 type
的值自动使用对应图标。
',
+ '通过 icon
属性设置自定义图标,如果未自定义图标,默认会根据不同的 type
的值自动使用对应图标。',
'en-US':
- 'By setting custom icons through icon
, the corresponding icons will be automatically used by default based on different type
values.
'
+ 'You can use the icon
property to set a custom icon. If no custom icon is specified, the icon is automatically used according to the type
value.'
},
codeFiles: ['icon.vue']
},
@@ -76,9 +91,10 @@ export default {
'en-US': 'Customized Interaction'
},
desc: {
- 'zh-CN': '当 size
为 large
时,通过默认插槽自定义交互操作。
',
+ 'zh-CN':
+ '当 size
为 large
时,通过默认插槽自定义交互操作区域,显示在 description
值的下方。
',
'en-US':
- 'When size
is large
, set the default slot custom interaction operation.
'
+ 'When size
is large
, set the default slot custom interaction operation,displayed below the description
value
'
},
codeFiles: ['slot-default.vue']
},
@@ -89,22 +105,36 @@ export default {
'en-US': 'Display icon'
},
desc: {
- 'zh-CN': '通过 show-icon
设置左侧图标是否显示。
',
- 'en-US': 'Set whether the left icon is displayed by show icon
.
'
+ 'zh-CN': '通过 show-icon
属性,设置左侧图标是否显示。',
+ 'en-US': 'Use the show-icon
property to set whether the icon on the left is displayed.'
},
codeFiles: ['show-icon.vue']
},
{
demoId: 'custom-close',
name: {
- 'zh-CN': '关闭按钮',
+ 'zh-CN': '自定义关闭按钮',
'en-US': 'custom close button'
},
desc: {
- 'zh-CN':
- '通过 close-text
设置关闭按钮文本,关闭告警后会触发 close
事件。
通过 closable
设置是否显示关闭按钮,没有关闭按钮,警告框将不可关闭。
通过 close
插槽自定义关闭按钮,仅当 closable
为 false
时插槽有效,可自定义逻辑控制组件的显示、隐藏。
',
- 'en-US':
- 'Set the close button text through close text
< Br/>Set whether to display the close button through close
. If there is no close button, the warning box will not be able to be closed< By customizing the close button through the close
slot, the slot is only valid when the close
is false
, and the display and hiding of logic control components can be customized.'
+ 'zh-CN': `
+ 通过 closable
属性,启用内置的关闭图标,默认值为 true
。
+ 通过 close-text
设置关闭按钮显示为文本,仅当closable
为true
时生效 。
+ 将 closable
设置为 false
时, 取消内置的关闭功能。此时可通过 close
插槽,完全自定义关闭按钮区域的展示。
+
+
组件关闭或隐藏时,会有渐隐动画,详见示例!
+
+ `,
+ 'en-US': `
+ Enable the built-in close icon with the closable
property, which defaults to true
.
+ Set the close button text by close-text
instead of the close icon, effective only if closable
is true
.
+ Unblock the built-in closing function when closable
is set to false
. At this point, you can completely customize the presentation of the close button area via the close
slot.
+
+
+ When the component is closed or hidden, there will be a fade animation, see the example!
+
+
+ `
},
codeFiles: ['custom-close.vue']
},
diff --git a/packages/theme/src/alert/index.less b/packages/theme/src/alert/index.less
index f94483e8de..592868e543 100644
--- a/packages/theme/src/alert/index.less
+++ b/packages/theme/src/alert/index.less
@@ -10,190 +10,119 @@
*
*/
-@import '../mixins/alert.less';
@import '../custom.less';
@import './vars.less';
-@import '../transition/alert-fade.less';
@alert-prefix-cls: ~'@{css-prefix}alert';
.@{alert-prefix-cls} {
- .component-css-vars-alert();
+ .inject-Alert-vars();
position: relative;
- border: var(--ti-alert-border-weight) solid;
- border-radius: var(--ti-alert-border-radius);
- font-family: var(--ti-alert-font-family);
-
- &&--normal {
- padding: var(--ti-alert-normal-padding-top) var(--ti-alert-normal-padding-right)
- var(--ti-alert-normal-padding-bottom) var(--ti-alert-normal-padding-left);
- margin: var(--ti-alert-normal-margin-vertical) var(--ti-alert-normal-margin-horizontal);
- display: flex;
- justify-content: flex-start;
+ display: flex;
+ border: none; // 规范中不要border,所以没有border的相关css变量了。
+ border-radius: var(--tv-Alert-border-radius);
+ padding: var(--tv-Alert-padding-y) var(--tv-Alert-padding-x);
+ margin: var(--tv-Alert-margin-y) var(--tv-Alert-margin-x);
+ line-height: 1.5;
+
+ &.is-center {
+ justify-content: center;
align-items: center;
+ }
- .@{alert-prefix-cls}__content {
- padding: var(--ti-alert-normal-content-padding-vertical) var(--ti-alert-normal-content-padding-horizontal);
- display: table-cell;
- max-width: calc(100% - 30px);
- }
+ /** alert-icon 场景 */
+ .@{alert-prefix-cls}__icon {
+ font-size: var(--tv-Alert-icon-size);
+ margin-right: var(--tv-Alert-icon-margin-right);
+ flex-shrink: 0;
}
- &&--large {
- padding: var(--ti-alert-large-padding-top) var(--ti-alert-large-padding-right) var(--ti-alert-large-padding-bottom)
- var(--ti-alert-large-padding-left);
- display: flex;
-
- .@{alert-prefix-cls}__content {
- padding-left: var(--ti-alert-large-content-padding-left);
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
+ /** content 场景:title/description/opration */
+ .@{alert-prefix-cls}__content {
+ .@{alert-prefix-cls}__title {
+ font-size: var(--tv-Alert-title-font-size);
+ font-weight: var(--tv-Alert-title-font-weight);
+ color: var(--tv-Alert-title-text-color);
+ margin-bottom: var(--tv-Alert-title-margin-bottom);
+ // 由于close-icon是abs, 需要给出安全边距防止重叠
+ margin-right: calc(var(--tv-Alert-close-icon-font-size) + var(--tv-Alert-close-icon-right) + 16px);
}
.@{alert-prefix-cls}__description {
- margin-bottom: var(--ti-alert-description-margin-bottom);
- margin-top: var(--ti-alert-description-margin-top);
- color: var(--ti-alert-description-text-color);
-
- &.is-hide {
- margin: 0;
- }
+ font-size: var(--tv-Alert-desc-font-size);
+ font-weight: var(--tv-Alert-desc-font-weight);
+ color: var(--tv-Alert-desc-text-color);
}
- .@{alert-prefix-cls}__icon {
- font-size: var(--ti-alert-large-icon-font-size);
- vertical-align: top;
- flex-shrink: 0;
- }
-
- .@{alert-prefix-cls}__close {
- font-size: var(--ti-alert-large-close-font-size);
- top: 12px;
- right: 12px;
- transform: none;
- margin-top: 0;
+ .@{alert-prefix-cls}__opration {
+ // no need css
}
}
- &&--success {
- .alert-variant(var(--ti-alert-success-title-text-color);
- var(--ti-alert-success-border-color);
- var(--ti-alert-success-icon-color);
- var(--ti-alert-success-link-text-color);
- var(--ti-alert-success-bg-color);
- var(--ti-alert-success-close-icon-color));
-
- .@{alert-prefix-cls}__close:hover {
- fill: var(--ti-alert-success-close-hover-icon-color);
+ /** close-icon 场景 */
+ // .is-custom 仅用于close按钮处, 等效于close场景
+ .@{alert-prefix-cls}__close,
+ .is-custom {
+ position: absolute;
+ cursor: pointer;
+ color: var(--tv-Alert-close-icon-color);
+ fill: var(--tv-Alert-close-icon-color);
+ top: var(--tv-Alert-close-icon-top);
+ right: var(--tv-Alert-close-icon-right);
+
+ &:hover {
+ color: var(--tv-Alert-close-icon-color-hover);
+ fill: var(--tv-Alert-close-icon-color-hover);
}
}
- &&--info {
- .alert-variant(var(--ti-alert-info-title-text-color);
- var(--ti-alert-info-border-color);
- var(--ti-alert-info-icon-color);
- var(--ti-alert-info-link-text-color);
- var(--ti-alert-info-bg-color);
- var(--ti-alert-info-close-icon-color));
-
- .@{alert-prefix-cls}__close:hover {
- fill: var(--ti-alert-info-close-hover-icon-color);
- }
+ .@{alert-prefix-cls}__close {
+ font-size: var(--tv-Alert-close-icon-font-size);
}
- &&--warning {
- .alert-variant(var(--ti-alert-warning-title-text-color);
- var(--ti-alert-warning-border-color);
- var(--ti-alert-warning-icon-color);
- var(--ti-alert-warning-link-text-color);
- var(--ti-alert-warning-bg-color);
- var(--ti-alert-warning-close-icon-color));
-
- .@{alert-prefix-cls}__close:hover {
- fill: var(--ti-alert-warning-close-hover-icon-color);
- }
+ .is-custom {
+ font-size: var(--tv-Alert-close-text-font-size);
}
- &&--error {
- .alert-variant(var(--ti-alert-error-title-text-color);
- var(--ti-alert-error-border-color);
- var(--ti-alert-error-icon-color);
- var(--ti-alert-error-link-text-color);
- var(--ti-alert-error-bg-color);
- var(--ti-alert-error-close-icon-color));
+ /** Normal 场景 */
+ &.@{alert-prefix-cls}--normal {
+ padding: var(--tv-Alert-padding-y-normal) var(--tv-Alert-padding-x-normal);
+ margin: var(--tv-Alert-margin-y-normal) var(--tv-Alert-margin-x-normal);
- .@{alert-prefix-cls}__close:hover {
- fill: var(--ti-alert-error-close-hover-icon-color);
+ .@{alert-prefix-cls}__icon {
+ font-size: var(--tv-Alert-icon-size-normal);
}
- }
-
- &&--simple {
- .alert-variant(var(--ti-alert-simple-title-text-color);
- var(--ti-alert-simple-border-color);
- var(--ti-alert-simple-icon-color);
- var(--ti-alert-simple-link-text-color);
- var(--ti-alert-simple-bg-color);
- var(--ti-alert-simple-close-icon-color));
-
- .@{alert-prefix-cls}__close:hover {
- fill: var(--ti-alert-simple-close-hover-icon-color);
+ .@{alert-prefix-cls}__description {
+ // 由于close-icon是abs, 需要给出安全边距防止重叠
+ margin-right: calc(var(--tv-Alert-close-icon-font-size) + var(--tv-Alert-close-icon-right) + 16px);
}
}
- &__icon {
- font-size: var(--ti-alert-icon-font-size);
- }
+ /** type 场景 theme */
+ .color-theme-mixin(@theme) {
+ @bg: %('var(--tv-Alert-bg-color-%a)', @theme);
+ @icon: %('var(--tv-Alert-icon-color-%a)', @theme);
- &.is-center {
- justify-content: center;
- align-items: center;
- }
+ background-color: e(@bg);
- .is-custom {
- position: absolute;
- font-size: var(--ti-alert-close-text-font-size);
- top: var(--ti-alert-close-position-top);
- right: 12px;
- cursor: pointer;
+ .@{alert-prefix-cls}__icon:not(.@{alert-prefix-cls}__close) {
+ fill: e(@icon);
+ }
}
-
- & &__close {
- font-size: var(--ti-alert-close-font-size);
- position: absolute;
- top: var(--ti-alert-close-position-top);
- right: 12px;
- cursor: pointer;
+ &.@{alert-prefix-cls}--success {
+ .color-theme-mixin(success);
}
-
- & &__content {
- .@{alert-prefix-cls}__opration {
- font-size: var(--ti-alert-opration-font-size);
- color: var(--ti-alert-opration-text-color);
- line-height: 1;
-
- a {
- font-size: var(--ti-alert-opration-font-size);
- color: var(--ti-alert-opration-text-color);
- }
-
- a:not(:last-child) {
- margin-right: 16px;
- }
- }
+ &.@{alert-prefix-cls}--error {
+ .color-theme-mixin(error);
}
-
- & &__title {
- font-size: var(--ti-alert-title-font-size);
- color: var(--ti-alert-title-text-color);
- font-weight: bold;
- line-height: 20px;
+ &.@{alert-prefix-cls}--warning {
+ .color-theme-mixin(warning);
}
-
- & &__description {
- font-size: var(--ti-alert-description-font-size);
- line-height: var(--ti-alert-description-line-height);
+ &.@{alert-prefix-cls}--info {
+ .color-theme-mixin(info);
+ }
+ &.@{alert-prefix-cls}--simple {
+ .color-theme-mixin(simple);
}
}
diff --git a/packages/theme/src/alert/vars.less b/packages/theme/src/alert/vars.less
index 4a7bc37908..00e60c490f 100644
--- a/packages/theme/src/alert/vars.less
+++ b/packages/theme/src/alert/vars.less
@@ -10,149 +10,102 @@
*
*/
-.component-css-vars-alert() {
- // 默认字体
- --ti-alert-font-family: var(
- --ti-common-font-family,
- 'Helvetica',
- 'Arial',
- 'PingFangSC-Regular',
- 'Hiragino Sans GB',
- 'Microsoft YaHei',
- '微软雅黑',
- 'Microsoft JhengHei'
- );
- // 边框厚度(new)
- --ti-alert-border-weight: var(--ti-common-size-0, 0px);
- // 描述字号
- --ti-alert-description-font-size: var(--ti-common-font-size-base, 14px);
- // 默认关闭图标固定定位顶部距离(hide)
- --ti-alert-close-position-top: var(--ti-common-space-3x, 12px);
- // 默认关闭图标字号
- --ti-alert-close-font-size: var(--ti-common-font-size-2, 16px);
- // 自定义关闭文字字号
- --ti-alert-close-text-font-size: var(--ti-common-font-size-base, 14px);
- // 组件圆角
- --ti-alert-border-radius: var(--ti-common-border-radius-4, 8px);
- // 标题文本色
- --ti-alert-title-text-color: var(--ti-common-color-text-primary, #191919);
- // success类型标题文本色
- --ti-alert-success-title-text-color: var(--ti-common-color-text-primary, #191919);
- // info类型标题文本色
- --ti-alert-info-title-text-color: var(--ti-common-color-text-primary, #191919);
- // warning类型标题文本色
- --ti-alert-warning-title-text-color: var(--ti-common-color-text-primary, #191919);
- // error类型标题文本色
- --ti-alert-error-title-text-color: var(--ti-common-color-text-primary, #191919);
- // simple类型标题文本色
- --ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #191919);
- // 标题字号
- --ti-alert-title-font-size: var(--ti-common-font-size-2, 16px);
- // 标题图标字号
- --ti-alert-icon-font-size: var(--ti-common-font-size-2, 16px);
- // 描述内容行高
- --ti-alert-description-line-height: var(--ti-common-line-height-number, 1.5);
- // 描述内容顶部内边距
- --ti-alert-normal-content-padding-vertical: var(--ti-common-space-0, 0px);
- // 描述内容水平内边距
- --ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x, 8px);
- // 描述内容提示内容顶部外边距
- --ti-alert-description-margin-top: var(--ti-common-space-base, 4px);
- // 描述内容提示内容底部外边距
- --ti-alert-description-margin-bottom: var(--ti-common-space-0, 0px);
- // 描述默认文本色
- --ti-alert-description-text-color: var(--ti-common-color-text-secondary, #595959);
- // 默认顶部内边距
- --ti-alert-normal-padding-top: calc(var(--ti-common-space-2x, 8px) + 1.5px);
- // 默认右内边距
- --ti-alert-normal-padding-right: var(--ti-common-space-4x, 16px);
- // 默认底部内边距
- --ti-alert-normal-padding-bottom: calc(var(--ti-common-space-2x, 8px) + 1.5px);
- // 默认左内边距
- --ti-alert-normal-padding-left: var(--ti-common-space-4x, 16px);
- // 默认垂直外边距
- --ti-alert-normal-margin-vertical: var(--ti-common-space-4x, 16px);
- // 默认水平外边距
- --ti-alert-normal-margin-horizontal: var(--ti-common-space-0, 0px);
- // large尺寸顶部内边距
- --ti-alert-large-padding-top: var(--ti-common-space-4x, 16px);
- // large尺寸底部内边距
- --ti-alert-large-padding-bottom: var(--ti-common-space-4x, 16px);
- // large尺寸左内边距
- --ti-alert-large-padding-left: var(--ti-common-space-4x, 16px);
- // large尺寸右内边距
- --ti-alert-large-padding-right: var(--ti-common-space-4x, 16px);
- // large尺寸操作文本色
- --ti-alert-opration-text-color: var(--ti-common-color-text-highlight, #1476ff);
- // large尺寸操作字号
- --ti-alert-opration-font-size: var(--ti-common-font-size-base, 14px);
- // large尺寸图标字号
- --ti-alert-large-icon-font-size: var(--ti-common-font-size-4, 20px);
- // large尺寸描述内容左内边距
- --ti-alert-large-content-padding-left: var(--ti-common-space-2x, 8px);
- // 大尺寸关闭图标字号
- --ti-alert-large-close-font-size: var(--ti-alert-close-font-size);
-
- // warning类型边框色
- --ti-alert-warning-border-color: var(--ti-common-color-warn-border, #ffebd1);
- // warning类型图标色
- --ti-alert-warning-icon-color: var(--ti-common-color-warn, #ff8800);
- // warning类型链接色(hide)
- --ti-alert-warning-link-text-color: var(--ti-common-color-warn-text, #ff8800);
- // warning类型背景色
- --ti-alert-warning-bg-color: var(--ti-common-color-warn-bg, #ffebd1);
- // warning类型关闭图标色
- --ti-alert-warning-close-icon-color: var(--ti-common-color-text-weaken, #808080);
- // warning类型悬浮关闭图标色
- --ti-alert-warning-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5);
- // error类型边框色
- --ti-alert-error-border-color: var(--ti-common-color-error-border-secondary, #fce3e1);
- // error类型图标色
- --ti-alert-error-icon-color: var(--ti-common-color-error, #f23030);
- // error类型链接色(hide)
- --ti-alert-error-link-text-color: var(--ti-common-color-error-text, #f23030);
- // error类型背景色
- --ti-alert-error-bg-color: var(--ti-common-color-error-bg, #fce3e1);
- // error类型关闭图标色
- --ti-alert-error-close-icon-color: var(--ti-common-color-text-weaken, #808080);
- // error类型悬浮关闭图标色
- --ti-alert-error-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5);
- // success类型边框色
- --ti-alert-success-border-color: var(--ti-common-color-success-border, #e6f2d5);
- // success类型图标色
- --ti-alert-success-icon-color: var(--ti-common-color-success, #5cb300);
- // success类型链接色(hide)
- --ti-alert-success-link-text-color: var(--ti-common-color-text-success, #5cb300);
- // success类型背景色
- --ti-alert-success-bg-color: var(--ti-common-color-success-bg, #e6f2d5);
- // success类型关闭图标色
- --ti-alert-success-close-icon-color: var(--ti-common-color-text-weaken, #808080);
- // success类型悬浮关闭图标色
- --ti-alert-success-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5);
-
- // info类型边框色
- --ti-alert-info-border-color: var(--ti-common-color-prompt-border, #deecff);
- // info类型图标色
- --ti-alert-info-icon-color: var(--ti-common-color-prompt, #1476ff);
- // info类型链接色(hide)
- --ti-alert-info-link-text-color: var(--ti-common-color-prompt-text, #1476ff);
- // info类型背景色
- --ti-alert-info-bg-color: var(--ti-common-color-prompt-bg, #deecff);
- // info类型关闭图标色
- --ti-alert-info-close-icon-color: var(--ti-common-color-text-weaken, #808080);
- // info类型悬浮关闭图标色
- --ti-alert-info-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5);
-
- // simple类型边框色
- --ti-alert-simple-border-color: var(--ti-common-color-info-border, #d3d4d6);
- // simple类型图标色
- --ti-alert-simple-icon-color: #808080;
- // simple类型链接色(hide)
- --ti-alert-simple-link-text-color: var(--ti-common-color-primary-active, #595959);
- // simple类型背景色
- --ti-alert-simple-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
- // simple类型关闭图标色
- --ti-alert-simple-close-icon-color: var(--ti-alert-simple-icon-color);
- // simple类型悬浮关闭图标色
- --ti-alert-simple-close-hover-icon-color: var(--ti-alert-simple-icon-color);
+// 按区域划分场景:
+// Large 影响内容区要显示的区域,还影响 margin, padding 和 alert-icon的大小
+// Normal尺寸时: alert-icon + content(description) + close-icon
+// Large 尺寸时: alert-icon + content(title/ description /opration) + close-icon
+// 所以思路: 先按Large编写各区域场景,之后用Normal去覆盖某些值。
+
+// 按type(theme)划分: success/error/warn/info/simple 【叠加状态】
+
+.inject-Alert-vars() {
+ //-------------------------------------------------------全局场景:------------------------------------------
+
+ // 警告的圆角
+ --tv-Alert-border-radius: var(--tv-border-radius-lg);
+ // 警告的水平内边距
+ --tv-Alert-padding-x: var(--tv-space-xl);
+ // 警告的垂直内边距
+ --tv-Alert-padding-y: var(--tv-space-xl);
+ // 警告的水平外边距
+ --tv-Alert-margin-x: 0; // 规范上外边距不应该设置,但由于历史原因,normal时有固定的上下外边距,保留这个特性。
+ // 警告的垂直外边距
+ --tv-Alert-margin-y: 0;
+
+ //-------------------------------------------------------alert-icon 场景:-----------------------------------
+
+ // 警告的图标大小
+ --tv-Alert-icon-size: 20px;
+ // 警告的图标右外边距
+ --tv-Alert-icon-margin-right: var(--tv-space-md);
+
+ //-------------------------------------------------------content 场景:title/description/opration------------
+
+ // 警告的标题字号
+ --tv-Alert-title-font-size: var(--tv-font-size-lg);
+ // 警告的标题字重
+ --tv-Alert-title-font-weight: var(--tv-font-weight-bold);
+ // 警告的标题颜色
+ --tv-Alert-title-text-color: var(--tv-color-text);
+ // 警告的标题下边距
+ --tv-Alert-title-margin-bottom: var(--tv-space-sm);
+
+ // 警告的描述字号
+ --tv-Alert-desc-font-size: var(--tv-font-size-md);
+ // 警告的描述字重
+ --tv-Alert-desc-font-weight: var(--tv-font-weight-regular);
+ // 警告的描述颜色
+ --tv-Alert-desc-text-color: var(--tv-color-text-secondary);
+
+ //-------------------------------------------------------close-icon 场景:----------------------------------
+
+ // 警告的关闭按钮的大小
+ --tv-Alert-close-icon-font-size: var(--tv-icon-size);
+ // 警告的关闭按钮的颜色
+ --tv-Alert-close-icon-color: var(--tv-color-icon);
+ // 警告的关闭按钮的悬浮颜色
+ --tv-Alert-close-icon-color-hover: var(--tv-color-icon-hover);
+ // 警告的关闭按钮距上边的距离
+ --tv-Alert-close-icon-top: var(--tv-space-lg);
+ // 警告的关闭按钮距右边的距离
+ --tv-Alert-close-icon-right: var(--tv-space-lg);
+
+ // 警告的关闭文本的大小
+ --tv-Alert-close-text-font-size: var(--tv-font-size-md);
+
+ //-------------------------------------------------------Normal 场景:---------------------------------------
+
+ // 警告的Normal时,图标大小
+ --tv-Alert-icon-size-normal: var(--tv-icon-size);
+ // 警告的Normal时,水平内边距
+ --tv-Alert-padding-x-normal: var(--tv-space-xl);
+ // 警告的Normal时,垂直内边距
+ --tv-Alert-padding-y-normal: 9px;
+ // 警告的Normal时,水平外边距
+ --tv-Alert-margin-x-normal: 0;
+ // 警告的Normal时,垂直外边距
+ --tv-Alert-margin-y-normal: var(--tv-space-xl);
+
+ //-------------------------------------------------------type 场景:------------------------------------------
+
+ // success 主题时警告背景色
+ --tv-Alert-bg-color-success: var(--tv-color-success-bg-light);
+ // success 主题时警告图标色
+ --tv-Alert-icon-color-success: var(--tv-color-success-icon);
+ // error 主题时警告背景色
+ --tv-Alert-bg-color-error: var(--tv-color-error-bg-light);
+ // error 主题时警告图标色
+ --tv-Alert-icon-color-error: var(--tv-color-error-icon);
+ // warning 主题时警告背景色
+ --tv-Alert-bg-color-warning: var(--tv-color-warn-bg-light);
+ // warning 主题时警告图标色
+ --tv-Alert-icon-color-warning: var(--tv-color-warn-icon);
+ // info 主题时警告背景色
+ --tv-Alert-bg-color-info: var(--tv-color-info-bg-light);
+ // info 主题时警告图标色
+ --tv-Alert-icon-color-info: var(--tv-color-info-icon);
+ // simple 主题时警告背景色
+ --tv-Alert-bg-color-simple: var(--tv-color-bg);
+ // simple 主题时警告图标色
+ --tv-Alert-icon-color-simple: var(--tv-color-icon);
}
diff --git a/packages/theme/src/base/transition.less b/packages/theme/src/base/transition.less
index 0043323170..8367884ee1 100644
--- a/packages/theme/src/base/transition.less
+++ b/packages/theme/src/base/transition.less
@@ -232,3 +232,14 @@ vue3的动画状态类: v-enter-from v-enter-to v-leave-from v-leave-to 以
0.3s padding-left ease-in-out,
0.3s padding-right ease-in-out;
}
+
+// alert的切换显示动画
+.tiny-transition-alert-fade-enter,
+.tiny-transition-alert-fade-enter-from,
+.tiny-transition-alert-fade-leave-active {
+ opacity: 0;
+}
+
+.tiny-transition-alert-fade-leave-active {
+ transition: opacity 0.3s ease-in;
+}
diff --git a/packages/theme/src/mixins/alert.less b/packages/theme/src/mixins/alert.less
deleted file mode 100644
index 4a902ad512..0000000000
--- a/packages/theme/src/mixins/alert.less
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
-
-@import '../custom.less';
-
-.alert-variant(@color; @border-color; @icon-color; @link-color; @bgcolor; @close-icon-color) {
- background: @bgcolor;
- border-color: @border-color;
- color: @color;
-
- hr {
- border-top-color: @link-color;
- }
-
- .alert-link {
- color: @link-color;
- }
-
- .@{css-prefix}alert__icon {
- fill: @icon-color;
- }
-
- .@{css-prefix}alert__close {
- fill: @close-icon-color;
- }
-}
diff --git a/packages/theme/src/transition/alert-fade.less b/packages/theme/src/transition/alert-fade.less
deleted file mode 100644
index fe7f0460bf..0000000000
--- a/packages/theme/src/transition/alert-fade.less
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
-
-@import '../custom.less';
-
-.@{css-prefix}transition-alert-fade-enter,
-.@{css-prefix}transition-alert-fade-enter-from,
-.@{css-prefix}transition-alert-fade-leave-active {
- opacity: 0;
-}
-
-.@{css-prefix}transition-alert-fade-leave-active {
- transition: opacity 0.3s ease-in;
-}