test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 03:08:21 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

style(components): [alert] Update alert style (#15911)

Browse Source
This commit is contained in:
kooriookami 2024-02-23 16:23:45 +08:00 committed by GitHub
parent d1a7fd102a
commit ed984561de
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 49 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/examples/alert/basic.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div style="max-width: 600px"> <div style="max-width: 600px">
<el-alert title="success alert" type="success" /> <el-alert title="Success alert" type="success" />
<el-alert title="info alert" type="info" /> <el-alert title="Info alert" type="info" />
<el-alert title="warning alert" type="warning" /> <el-alert title="Warning alert" type="warning" />
<el-alert title="error alert" type="error" /> <el-alert title="Error alert" type="error" />
</div> </div>
</template> </template>

8
docs/examples/alert/center.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div style="max-width: 600px"> <div style="max-width: 600px">
<el-alert title="success alert" type="success" center show-icon /> <el-alert title="Success alert" type="success" center show-icon />
<el-alert title="info alert" type="info" center show-icon /> <el-alert title="Info alert" type="info" center show-icon />
<el-alert title="warning alert" type="warning" center show-icon /> <el-alert title="Warning alert" type="warning" center show-icon />
<el-alert title="error alert" type="error" center show-icon /> <el-alert title="Error alert" type="error" center show-icon />
</div> </div>
</template> </template>

6
docs/examples/alert/close-button.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div style="max-width: 600px"> <div style="max-width: 600px">
<el-alert title="unclosable alert" type="success" :closable="false" /> <el-alert title="Unclosable alert" type="success" :closable="false" />
<el-alert title="customized close-text" type="info" close-text="Gotcha" /> <el-alert title="Customized close text" type="info" close-text="Gotcha" />
<el-alert title="alert with callback" type="warning" @close="hello" /> <el-alert title="Alert with callback" type="warning" @close="hello" />
</div> </div>
</template> </template>

2
docs/examples/alert/description.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div style="max-width: 600px"> <div style="max-width: 600px">
<el-alert <el-alert
title="with description" title="With description"
type="success" type="success"
description="This is a description." description="This is a description."
/> />

16
docs/examples/alert/icon-description.vue
View File

@ -1,27 +1,27 @@
<template> <template>
<div style="max-width: 600px"> <div style="max-width: 600px">
<el-alert <el-alert
title="success alert" title="Success alert"
type="success" type="success"
description="more text description" description="More text description"
show-icon show-icon
/> />
<el-alert <el-alert
title="info alert" title="Info alert"
type="info" type="info"
description="more text description" description="More text description"
show-icon show-icon
/> />
<el-alert <el-alert
title="warning alert" title="Warning alert"
type="warning" type="warning"
description="more text description" description="More text description"
show-icon show-icon
/> />
<el-alert <el-alert
title="error alert" title="Error alert"
type="error" type="error"
description="more text description" description="More text description"
show-icon show-icon
/> />
</div> </div>

8
docs/examples/alert/icon.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div style="max-width: 600px"> <div style="max-width: 600px">
<el-alert title="success alert" type="success" show-icon /> <el-alert title="Success alert" type="success" show-icon />
<el-alert title="info alert" type="info" show-icon /> <el-alert title="Info alert" type="info" show-icon />
<el-alert title="warning alert" type="warning" show-icon /> <el-alert title="Warning alert" type="warning" show-icon />
<el-alert title="error alert" type="error" show-icon /> <el-alert title="Error alert" type="error" show-icon />
</div> </div>
</template> </template>

8
docs/examples/alert/theme.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div style="max-width: 600px"> <div style="max-width: 600px">
<el-alert title="success alert" type="success" effect="dark" /> <el-alert title="Success alert" type="success" effect="dark" />
<el-alert title="info alert" type="info" effect="dark" /> <el-alert title="Info alert" type="info" effect="dark" />
<el-alert title="warning alert" type="warning" effect="dark" /> <el-alert title="Warning alert" type="warning" effect="dark" />
<el-alert title="error alert" type="error" effect="dark" /> <el-alert title="Error alert" type="error" effect="dark" />
</div> </div>
</template> </template>

6
packages/components/alert/src/alert.vue
View File

@ -12,7 +12,7 @@
<div :class="ns.e('content')"> <div :class="ns.e('content')">
<span <span
v-if="title || $slots.title" v-if="title || $slots.title"
:class="[ns.e('title'), isBoldTitle]" :class="[ns.e('title'), withDescription]"
> >
<slot name="title">{{ title }}</slot> <slot name="title">{{ title }}</slot>
</span> </span>
@ -65,8 +65,8 @@ const iconClass = computed(() => [
{ [ns.is('big')]: !!props.description || !!slots.default }, { [ns.is('big')]: !!props.description || !!slots.default },
]) ])
const isBoldTitle = computed(() => { const withDescription = computed(() => {
return { [ns.is('bold')]: props.description || slots.default } return { 'with-description': props.description || slots.default }
}) })
const close = (evt: MouseEvent) => { const close = (evt: MouseEvent) => {

22
packages/theme-chalk/src/alert.scss
View File

@ -61,32 +61,35 @@
} }
@include e(content) { @include e(content) {
display: table-cell; display: flex;
padding: 0 8px; flex-direction: column;
gap: 4px;
} }
& .#{$namespace}-alert__icon { & .#{$namespace}-alert__icon {
font-size: getCssVar('alert', 'icon-size'); font-size: getCssVar('alert', 'icon-size');
width: getCssVar('alert', 'icon-size'); width: getCssVar('alert', 'icon-size');
margin-right: 8px;
@include when(big) { @include when(big) {
font-size: getCssVar('alert', 'icon-large-size'); font-size: getCssVar('alert', 'icon-large-size');
width: getCssVar('alert', 'icon-large-size'); width: getCssVar('alert', 'icon-large-size');
margin-right: 12px;
} }
} }
@include e(title) { @include e(title) {
font-size: getCssVar('alert', 'title-font-size'); font-size: getCssVar('alert', 'title-font-size');
line-height: 18px; line-height: 24px;
vertical-align: text-top;
@include when(bold) { &.with-description {
font-weight: bold; font-size: getCssVar('alert', 'title-with-description-font-size');
} }
} }
& .#{$namespace}-alert__description { & .#{$namespace}-alert__description {
font-size: getCssVar('alert', 'description-font-size'); font-size: getCssVar('alert', 'description-font-size');
margin: 5px 0 0 0; margin: 0;
} }
& .#{$namespace}-alert__close-btn { & .#{$namespace}-alert__close-btn {
@ -94,13 +97,14 @@
opacity: 1; opacity: 1;
position: absolute; position: absolute;
top: 12px; top: 12px;
right: 15px; right: 16px;
cursor: pointer; cursor: pointer;
@include when(customed) { @include when(customed) {
font-style: normal; font-style: normal;
font-size: getCssVar('alert', 'close-customed-font-size'); font-size: getCssVar('alert', 'close-customed-font-size');
top: 9px; line-height: 24px;
top: 8px;
} }
} }
} }

9
packages/theme-chalk/src/common/var.scss
View File

@ -499,10 +499,11 @@ $alert: map.merge(
( (
'padding': 8px 16px, 'padding': 8px 16px,
'border-radius-base': getCssVar('border-radius-base'), 'border-radius-base': getCssVar('border-radius-base'),
'title-font-size': 13px, 'title-font-size': 14px,
'description-font-size': 12px, 'title-with-description-font-size': 16px,
'close-font-size': 12px, 'description-font-size': 14px,
'close-customed-font-size': 13px, 'close-font-size': 16px,
'close-customed-font-size': 14px,
'icon-size': 16px, 'icon-size': 16px,
'icon-large-size': 28px, 'icon-large-size': 28px,
), ),