test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-29 17:58:08 +08:00
Code Issues Actions 2 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>
<div style="max-width: 600px">
<el-alert title="success alert" type="success" />
<el-alert title="info alert" type="info" />
<el-alert title="warning alert" type="warning" />
<el-alert title="error alert" type="error" />
<el-alert title="Success alert" type="success" />
<el-alert title="Info alert" type="info" />
<el-alert title="Warning alert" type="warning" />
<el-alert title="Error alert" type="error" />
</div>
</template>

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

@ -1,9 +1,9 @@
<template>
<div style="max-width: 600px">
<el-alert title="success alert" type="success" 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="error alert" type="error" 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="Warning alert" type="warning" center show-icon />
<el-alert title="Error alert" type="error" center show-icon />
</div>
</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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