mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-26 12:32:17 +08:00
feat(components): [alert] [result] [message] [message-box] [notification] add primary type (#20782)
feat(components): add primary type
This commit is contained in:
kooriookami
@ -11,7 +11,7 @@ Displays important alert messages.
|
||||
|
||||
Alert components are non-overlay elements in the page that does not disappear automatically.
|
||||
|
||||
:::demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
|
||||
:::demo Alert provides 5 types of themes defined by `type`, whose default value is `info`. `primary` has been added in ^(2.9.11).
|
||||
|
||||
alert/basic
|
||||
|
||||
@ -80,9 +80,9 @@ alert/icon-description
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ----------- | ---------------------------------------- | ----------------------------------------------------- | ------- |
|
||||
| ----------- | ---------------------------------------- | --------------------------------------------------------------------------- | ------- |
|
||||
| title | alert title. | ^[string] | — |
|
||||
| type | alert type. | ^[enum]`'success' \| 'warning' \| 'info' \| 'error' ` | info |
|
||||
| type | alert type. | ^[enum]`'primary' (2.9.11) \| 'success' \| 'warning' \| 'info' \| 'error' ` | info |
|
||||
| description | descriptive text. | ^[string] | — |
|
||||
| closable | whether alert can be dismissed. | ^[boolean] | true |
|
||||
| center | whether content is placed in the center. | ^[boolean] | false |
|
||||
|
||||
@ -27,7 +27,7 @@ message-box/alert
|
||||
|
||||
Confirm is used to ask users' confirmation.
|
||||
|
||||
:::demo Call `ElMessageBox.confirm` method to open a confirm, and it simulates the system's `confirm`. We can also highly customize Message Box by passing a third attribute `options` which is a literal object. The attribute `type` indicates the message type, and it's value can be `success`, `error`, `info` and `warning`. Note that the second attribute `title` must be a `string`, and if it is an `object`, it will be handled as the attribute `options`. Here we use `Promise` to handle further processing.
|
||||
:::demo Call `ElMessageBox.confirm` method to open a confirm, and it simulates the system's `confirm`. We can also highly customize Message Box by passing a third attribute `options` which is a literal object. The attribute `type` indicates the message type, and it's value can be `primary`, `success`, `error`, `info` and `warning`. Note that the second attribute `title` must be a `string`, and if it is an `object`, it will be handled as the attribute `options`. Here we use `Promise` to handle further processing. `primary` has been added in ^(2.9.11).
|
||||
|
||||
message-box/confirm
|
||||
|
||||
@ -164,7 +164,7 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB
|
||||
| title | title of the MessageBox | ^[string] | '' |
|
||||
| message | content of the MessageBox | ^[string] / ^[VNode] / ^[Function]`() => VNode` ^(2.2.17) | — |
|
||||
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
|
||||
| type | message type, used for icon display | ^[enum]`'success' \| 'info' \| 'warning' \| 'error'` | '' |
|
||||
| type | message type, used for icon display | ^[enum]`'primary' (2.9.11) \| 'success' \| 'info' \| 'warning' \| 'error'` | '' |
|
||||
| icon | custom icon component, overrides `type` | ^[string] / ^[Component] | '' |
|
||||
| closeIcon ^(2.9.5) | custom close icon component, default is Close | ^[string] / ^[Component] | '' |
|
||||
| customClass | custom class name for MessageBox | ^[string] | '' |
|
||||
|
||||
@ -21,7 +21,7 @@ message/basic
|
||||
|
||||
Used to show the feedback of Success, Warning, Message and Error activities.
|
||||
|
||||
:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
|
||||
:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`. `primary` has been added in ^(2.9.11).
|
||||
|
||||
message/different-types
|
||||
|
||||
@ -111,9 +111,9 @@ ElMessage({}, appContext)
|
||||
### Options
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ------------------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
|
||||
| ------------------------ | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------- |
|
||||
| message | message text | ^[string] / ^[VNode] / ^[Function]`() => VNode` | '' |
|
||||
| type | message type | ^[enum]`'success' \| 'warning' \| 'info' \| 'error'` | info |
|
||||
| type | message type | ^[enum]`'primary' (2.9.11) \| 'success' \| 'warning' \| 'info' \| 'error'` | info |
|
||||
| plain ^(2.6.3) | whether message is plain | ^[boolean] | false |
|
||||
| icon | custom icon component, overrides `type` | ^[string] / ^[Component] | — |
|
||||
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
|
||||
|
||||
@ -19,7 +19,7 @@ notification/basic
|
||||
|
||||
We provide four types: success, warning, info and error.
|
||||
|
||||
:::demo Element Plus provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open3` and `open4` without passing a `type` field.
|
||||
:::demo Element Plus provides four notification types: `primary`, `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open3` and `open4` without passing a `type` field. `primary` has been added in ^(2.9.11).
|
||||
|
||||
notification/different-types
|
||||
|
||||
@ -128,11 +128,11 @@ ElNotification({}, appContext)
|
||||
### Options
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- | --------- |
|
||||
| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | --------- |
|
||||
| title | title | ^[string] | '' |
|
||||
| message | description text | ^[string] / ^[VNode] / ^[Function]`() => VNode` | '' |
|
||||
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
|
||||
| type | notification type | ^[enum]`'success' \| 'warning' \| 'info' \| 'error' \| ''` | '' |
|
||||
| type | notification type | ^[enum]`'primary' (2.9.11) \| 'success' \| 'warning' \| 'info' \| 'error' \| ''` | '' |
|
||||
| icon | custom icon component. It will be overridden by `type` | ^[string] / ^[Component] | — |
|
||||
| customClass | custom class name for Notification | ^[string] | '' |
|
||||
| duration | duration before close. It will not automatically close if set 0 | ^[number] | 4500 |
|
||||
|
||||
@ -9,7 +9,7 @@ Used to give feedback on the result of user's operation or access exception.
|
||||
|
||||
## Basic usage
|
||||
|
||||
:::demo
|
||||
:::demo `primary` has been added in ^(2.9.11).
|
||||
|
||||
result/basic-usage
|
||||
|
||||
@ -28,10 +28,10 @@ result/customized-content
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| --------- | ------------------- | ---------------------------------------------------- | ------- |
|
||||
| --------- | ------------------- | -------------------------------------------------------------------------- | ------- |
|
||||
| title | title of result | ^[string] | '' |
|
||||
| sub-title | sub title of result | ^[string] | '' |
|
||||
| icon | icon type of result | ^[enum]`'success' \| 'warning' \| 'info' \| 'error'` | info |
|
||||
| icon | icon type of result | ^[enum]`'primary' (2.9.11) \| 'success' \| 'warning' \| 'info' \| 'error'` | info |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div style="max-width: 600px">
|
||||
<el-alert title="Primary alert" type="primary" />
|
||||
<el-alert title="Success alert" type="success" />
|
||||
<el-alert title="Info alert" type="info" />
|
||||
<el-alert title="Warning alert" type="warning" />
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div style="max-width: 600px">
|
||||
<el-alert title="Primary alert" type="primary" 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 />
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<div style="max-width: 600px">
|
||||
<el-alert
|
||||
title="Primary alert"
|
||||
type="primary"
|
||||
description="More text description"
|
||||
show-icon
|
||||
/>
|
||||
<el-alert
|
||||
title="Success alert"
|
||||
type="success"
|
||||
@ -27,6 +33,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div style="max-width: 600px">
|
||||
<el-alert title="Primary alert" type="primary" 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 />
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div style="max-width: 600px">
|
||||
<el-alert title="Primary alert" type="primary" 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" />
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<el-button :plain="true" @click="open1">Message</el-button>
|
||||
<el-button :plain="true" @click="open6">Primary</el-button>
|
||||
<el-button :plain="true" @click="open2">Success</el-button>
|
||||
<el-button :plain="true" @click="open3">Warning</el-button>
|
||||
<el-button :plain="true" @click="open1">Info</el-button>
|
||||
<el-button :plain="true" @click="open4">Error</el-button>
|
||||
<el-button :plain="true" @click="open5">Won't close automatically</el-button>
|
||||
</template>
|
||||
@ -12,7 +13,7 @@ import { ElMessage } from 'element-plus'
|
||||
const open1 = () => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: 'This is a message.',
|
||||
message: 'This is a info message.',
|
||||
})
|
||||
}
|
||||
const open2 = () => {
|
||||
@ -43,4 +44,11 @@ const open5 = () => {
|
||||
duration: 0,
|
||||
})
|
||||
}
|
||||
const open6 = () => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: 'This is a primary message.',
|
||||
type: 'primary',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<el-button :plain="true" @click="open5">Primary</el-button>
|
||||
<el-button :plain="true" @click="open2">Success</el-button>
|
||||
<el-button :plain="true" @click="open3">Warning</el-button>
|
||||
<el-button :plain="true" @click="open1">Message</el-button>
|
||||
<el-button :plain="true" @click="open1">Info</el-button>
|
||||
<el-button :plain="true" @click="open4">Error</el-button>
|
||||
</template>
|
||||
|
||||
@ -9,7 +10,7 @@
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const open1 = () => {
|
||||
ElMessage('This is a message.')
|
||||
ElMessage('This is a info message.')
|
||||
}
|
||||
const open2 = () => {
|
||||
ElMessage({
|
||||
@ -26,4 +27,7 @@ const open3 = () => {
|
||||
const open4 = () => {
|
||||
ElMessage.error('Oops, this is a error message.')
|
||||
}
|
||||
const open5 = () => {
|
||||
ElMessage.primary('This is a primary message.')
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<el-button :plain="true" @click="open5">Primary</el-button>
|
||||
<el-button :plain="true" @click="open1">Success</el-button>
|
||||
<el-button :plain="true" @click="open2">Warning</el-button>
|
||||
<el-button :plain="true" @click="open3">Message</el-button>
|
||||
<el-button :plain="true" @click="open3">Info</el-button>
|
||||
<el-button :plain="true" @click="open4">Error</el-button>
|
||||
</template>
|
||||
|
||||
@ -24,7 +25,7 @@ const open2 = () => {
|
||||
}
|
||||
const open3 = () => {
|
||||
ElMessage({
|
||||
message: 'This is a message.',
|
||||
message: 'This is a info message.',
|
||||
type: 'info',
|
||||
plain: true,
|
||||
})
|
||||
@ -36,4 +37,11 @@ const open4 = () => {
|
||||
plain: true,
|
||||
})
|
||||
}
|
||||
const open5 = () => {
|
||||
ElMessage({
|
||||
message: 'This is a primary message.',
|
||||
type: 'primary',
|
||||
plain: true,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<el-button plain @click="open5">Primary</el-button>
|
||||
<el-button plain @click="open1">Success</el-button>
|
||||
<el-button plain @click="open2">Warning</el-button>
|
||||
<el-button plain @click="open3">Info</el-button>
|
||||
@ -39,4 +40,12 @@ const open4 = () => {
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
const open5 = () => {
|
||||
ElNotification({
|
||||
title: 'Primary',
|
||||
message: 'This is a primary message',
|
||||
type: 'primary',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,17 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-col :sm="12" :lg="6" :xl="4">
|
||||
<el-result
|
||||
icon="primary"
|
||||
title="Primary Tip"
|
||||
sub-title="Please follow the instructions"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="primary">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6" :xl="4">
|
||||
<el-result
|
||||
icon="success"
|
||||
title="Success Tip"
|
||||
@ -11,7 +22,7 @@
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-col :sm="12" :lg="6" :xl="4">
|
||||
<el-result
|
||||
icon="warning"
|
||||
title="Warning Tip"
|
||||
@ -22,7 +33,7 @@
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-col :sm="12" :lg="6" :xl="4">
|
||||
<el-result
|
||||
icon="error"
|
||||
title="Error Tip"
|
||||
@ -33,7 +44,7 @@
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-col :sm="12" :lg="6" :xl="4">
|
||||
<el-result icon="info" title="Info Tip">
|
||||
<template #sub-title>
|
||||
<p>Using slot as subtitle</p>
|
||||
@ -45,3 +56,5 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { AppContext, CSSProperties, Component, VNode } from 'vue'
|
||||
import type { ComponentSize } from '@element-plus/constants'
|
||||
|
||||
type MessageType = '' | 'success' | 'warning' | 'info' | 'error'
|
||||
type MessageType = '' | 'primary' | 'success' | 'warning' | 'info' | 'error'
|
||||
|
||||
export type Action = 'confirm' | 'close' | 'cancel'
|
||||
export type MessageBoxType = '' | 'prompt' | 'alert' | 'confirm'
|
||||
|
||||
@ -9,7 +9,13 @@ import type { AppContext, ExtractPropTypes, VNode } from 'vue'
|
||||
import type { Mutable } from '@element-plus/utils'
|
||||
import type MessageConstructor from './message.vue'
|
||||
|
||||
export const messageTypes = ['success', 'info', 'warning', 'error'] as const
|
||||
export const messageTypes = [
|
||||
'primary',
|
||||
'success',
|
||||
'info',
|
||||
'warning',
|
||||
'error',
|
||||
] as const
|
||||
|
||||
export type messageType = typeof messageTypes[number]
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import type { AppContext, ExtractPropTypes, VNode } from 'vue'
|
||||
import type Notification from './notification.vue'
|
||||
|
||||
export const notificationTypes = [
|
||||
'primary',
|
||||
'success',
|
||||
'info',
|
||||
'warning',
|
||||
@ -163,6 +164,7 @@ export type NotifyTypedFn = (
|
||||
) => NotificationHandle
|
||||
|
||||
export interface Notify extends NotifyFn {
|
||||
primary: NotifyTypedFn
|
||||
success: NotifyTypedFn
|
||||
warning: NotifyTypedFn
|
||||
error: NotifyTypedFn
|
||||
|
||||
@ -9,6 +9,7 @@ import type { Component, ExtractPropTypes } from 'vue'
|
||||
import type Result from './result.vue'
|
||||
|
||||
export const IconMap = {
|
||||
primary: 'icon-primary',
|
||||
success: 'icon-success',
|
||||
warning: 'icon-warning',
|
||||
error: 'icon-error',
|
||||
@ -19,6 +20,7 @@ export const IconComponentMap: Record<
|
||||
typeof IconMap[keyof typeof IconMap],
|
||||
Component
|
||||
> = {
|
||||
[IconMap.primary]: InfoFilled,
|
||||
[IconMap.success]: CircleCheckFilled,
|
||||
[IconMap.warning]: WarningFilled,
|
||||
[IconMap.error]: CircleCloseFilled,
|
||||
@ -45,7 +47,7 @@ export const resultProps = buildProps({
|
||||
*/
|
||||
icon: {
|
||||
type: String,
|
||||
values: ['success', 'warning', 'info', 'error'],
|
||||
values: ['primary', 'success', 'warning', 'info', 'error'],
|
||||
default: 'info',
|
||||
},
|
||||
} as const)
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@each $type in (success, info, warning, error) {
|
||||
@each $type in (primary, success, info, warning, error) {
|
||||
@include m($type) {
|
||||
@include css-var-from-global(
|
||||
('alert', 'bg-color'),
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
@include e(status) {
|
||||
font-size: 24px;
|
||||
|
||||
@each $type in (success, info, warning, error) {
|
||||
@each $type in (primary, success, info, warning, error) {
|
||||
&.#{$namespace}-message-box-icon--#{$type} {
|
||||
@include css-var-from-global(('messagebox', 'color'), ('color', $type));
|
||||
color: getCssVar('messagebox-color');
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@each $type in (success, info, warning, error) {
|
||||
@each $type in (primary, success, info, warning, error) {
|
||||
@include m($type) {
|
||||
@include css-var-from-global(
|
||||
('message', 'bg-color'),
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@each $type in (success, info, warning, error) {
|
||||
@each $type in (primary, success, info, warning, error) {
|
||||
& .#{$namespace}-notification--#{$type} {
|
||||
@include css-var-from-global(
|
||||
('notification', 'icon-color'),
|
||||
|
||||
@ -31,6 +31,7 @@ export const TypeComponents = {
|
||||
}
|
||||
|
||||
export const TypeComponentsMap = {
|
||||
primary: InfoFilled,
|
||||
success: SuccessFilled,
|
||||
warning: WarningFilled,
|
||||
error: CircleCloseFilled,
|
||||
|
||||
Reference in New Issue
Block a user