20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,67 @@
|
||||
# _semantic
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { message } from 'antdv-next'
|
||||
import { computed } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
const { _InternalListDoNotUseOrYouWillBeFired: InternalList } = message
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const previewListStyle = {
|
||||
position: 'relative',
|
||||
inset: 'auto',
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
padding: '24px',
|
||||
overflow: 'visible',
|
||||
transform: 'none',
|
||||
} as const
|
||||
|
||||
const semantics = computed(() => [
|
||||
{ name: 'root', desc: t('root'), version: '1.0.0' },
|
||||
{ name: 'wrapper', desc: t('wrapper'), version: '1.3.0' },
|
||||
{ name: 'icon', desc: t('icon'), version: '1.0.0' },
|
||||
{ name: 'title', desc: t('title'), version: '1.3.0' },
|
||||
{ name: 'list', desc: t('list'), version: '1.3.0' },
|
||||
{ name: 'listContent', desc: t('listContent'), version: '1.3.0' },
|
||||
])
|
||||
|
||||
const items = computed(() => [
|
||||
{
|
||||
key: 'semantic-message-1',
|
||||
content: 'Hello, Antdv Next!',
|
||||
type: 'success' as const,
|
||||
duration: false as const,
|
||||
},
|
||||
{
|
||||
key: 'semantic-message-2',
|
||||
content: 'Welcome back!',
|
||||
type: 'info' as const,
|
||||
duration: false as const,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Message"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<InternalList
|
||||
:style="previewListStyle"
|
||||
:items="items"
|
||||
:classes="classes"
|
||||
/>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
# Customized style
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The `style` and `class` are available to customize Message.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
const [messageApi, ContextHolder] = message.useMessage()
|
||||
|
||||
function success() {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: 'This is a prompt message with custom class and style',
|
||||
class: 'custom-message',
|
||||
style: {
|
||||
marginTop: '20vh',
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextHolder />
|
||||
<a-button @click="success">
|
||||
Customized style
|
||||
</a-button>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,30 @@
|
||||
# Customize duration
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Customize message display duration from default `3s` to `10s`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
const [messageApi, ContextHolder] = message.useMessage()
|
||||
|
||||
function success() {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: 'This is a prompt message for success, and it will disappear in 10 seconds',
|
||||
duration: 10,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextHolder />
|
||||
<a-button @click="success">
|
||||
Customized display duration
|
||||
</a-button>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,26 @@
|
||||
# Hooks usage (recommended)
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Use `message.useMessage` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `message` static method, because static method cannot consume context, and ConfigProvider data will not work.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
const [messageApi, ContextHolder] = message.useMessage()
|
||||
|
||||
function info() {
|
||||
messageApi.info('Hello, Antdv Next!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextHolder />
|
||||
<a-button type="primary" @click="info">
|
||||
Display normal message
|
||||
</a-button>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
# Static method (deprecated)
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Static methods cannot consume Context provided by `ConfigProvider`. When enable `layer`, they may also cause style errors. Please use hooks version or `App` provided instance first.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
function info() {
|
||||
message.info('This is an info message')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" @click="info">
|
||||
Static Method
|
||||
</a-button>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,31 @@
|
||||
# Message with loading indicator
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Display a global loading indicator, which is dismissed by itself asynchronously.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
const [messageApi, ContextHolder] = message.useMessage()
|
||||
function success() {
|
||||
const close = messageApi.open({
|
||||
type: 'loading',
|
||||
content: 'Action in progress..',
|
||||
duration: 0,
|
||||
})
|
||||
// Dismiss manually and asynchronously
|
||||
setTimeout(close, 2500)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextHolder />
|
||||
<a-button @click="success">
|
||||
Display a loading indicator
|
||||
</a-button>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
# Other types of message
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Messages of success, error and warning types.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
const [messageApi, ContextHolder] = message.useMessage()
|
||||
|
||||
function success() {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: 'This is a success message',
|
||||
})
|
||||
}
|
||||
|
||||
function error() {
|
||||
messageApi.open({
|
||||
type: 'error',
|
||||
content: 'This is an error message',
|
||||
})
|
||||
}
|
||||
|
||||
function warning() {
|
||||
messageApi.open({
|
||||
type: 'warning',
|
||||
content: 'This is a warning message',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextHolder />
|
||||
<a-space>
|
||||
<a-button @click="success">
|
||||
Success
|
||||
</a-button>
|
||||
<a-button @click="error">
|
||||
Error
|
||||
</a-button>
|
||||
<a-button @click="warning">
|
||||
Warning
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
const [messageApi, ContextHolder] = message.useMessage()
|
||||
|
||||
const defaultStyles: Record<string, CSSProperties> = {
|
||||
root: {
|
||||
backgroundColor: '#f6ffed',
|
||||
border: '2px solid #95de64',
|
||||
borderRadius: '16px',
|
||||
boxShadow: '4px 4px 0 #d9f7be',
|
||||
},
|
||||
icon: {
|
||||
color: '#237804',
|
||||
},
|
||||
title: {
|
||||
color: '#237804',
|
||||
fontWeight: 600,
|
||||
},
|
||||
}
|
||||
|
||||
function stylesFn(info: { props: any }): Record<string, CSSProperties> {
|
||||
if (info.props.type === 'error') {
|
||||
return {
|
||||
root: {
|
||||
...defaultStyles.root,
|
||||
backgroundColor: '#fff2f0',
|
||||
borderColor: '#ffccc7',
|
||||
boxShadow: '4px 4px 0 #ffccc7',
|
||||
},
|
||||
icon: {
|
||||
color: '#cf1322',
|
||||
},
|
||||
title: {
|
||||
color: '#cf1322',
|
||||
fontWeight: 600,
|
||||
},
|
||||
}
|
||||
}
|
||||
return defaultStyles
|
||||
}
|
||||
|
||||
function showObjectStyle() {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: 'This is a message with object styles',
|
||||
styles: defaultStyles,
|
||||
})
|
||||
}
|
||||
|
||||
function showFunctionStyle() {
|
||||
messageApi.open({
|
||||
type: 'error',
|
||||
content: 'This is a message with function styles',
|
||||
styles: stylesFn as any,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextHolder />
|
||||
<a-space>
|
||||
<a-button @click="showObjectStyle">
|
||||
Object style
|
||||
</a-button>
|
||||
<a-button type="primary" @click="showFunctionStyle">
|
||||
Function style
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,33 @@
|
||||
# Promise interface
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
`message` provides a promise interface for `onClose`. The above example will display a new message when the old message is about to close.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
const [messageApi, ContextHolder] = message.useMessage()
|
||||
function success() {
|
||||
messageApi.open({
|
||||
type: 'loading',
|
||||
content: 'Action in progress..',
|
||||
duration: 2.5,
|
||||
}).then(
|
||||
() => message.success('Loading finished', 2.5),
|
||||
).then(
|
||||
() => message.info('Loading Finished ', 2.5),
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextHolder />
|
||||
<a-button @click="success">
|
||||
Display a loading indicator
|
||||
</a-button>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,39 @@
|
||||
# Update Message Content
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Update message content with unique `key`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
const key = 'updatable'
|
||||
|
||||
const [messageApi, ContextHolder] = message.useMessage()
|
||||
function openMessage() {
|
||||
messageApi.open({
|
||||
key,
|
||||
type: 'loading',
|
||||
content: 'Loading...',
|
||||
})
|
||||
setTimeout(() => {
|
||||
messageApi.open({
|
||||
key,
|
||||
type: 'success',
|
||||
content: 'Loaded!',
|
||||
duration: 2,
|
||||
})
|
||||
}, 2500)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextHolder />
|
||||
<a-button type="primary" @click="openMessage">
|
||||
Open the message box
|
||||
</a-button>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
title: Message
|
||||
description: Display global messages as feedback in response to user operations.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
- To provide feedback such as success, warning, error etc.
|
||||
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Hooks usage (recommended) | demo/hooks.md |
|
||||
| Other types of message | demo/other.md |
|
||||
| Customize duration | demo/duration.md |
|
||||
| Message with loading indicator | demo/loading.md |
|
||||
| Promise interface | demo/thenable.md |
|
||||
| Customized style | demo/custom-style.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
| Update Message Content | demo/update.md |
|
||||
| Static method (deprecated) | demo/info.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Static Methods
|
||||
- `message.success(content, [duration], onClose)`
|
||||
- `message.error(content, [duration], onClose)`
|
||||
- `message.info(content, [duration], onClose)`
|
||||
- `message.warning(content, [duration], onClose)`
|
||||
- `message.loading(content, [duration], onClose)`
|
||||
- `message.open(config)`
|
||||
- `message.destroy(key?: Key)`
|
||||
- `message.config(options)`
|
||||
- `message.useMessage(config)`
|
||||
|
||||
### Arguments
|
||||
| Argument | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| content | The content of the message | VueNode \| ArgsProps | - |
|
||||
| duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |
|
||||
| onClose | Specify a function that will be called when the message is closed | () => void | - |
|
||||
|
||||
`afterClose` can be called in thenable interface:
|
||||
|
||||
- `message[level](content, [duration]).then(afterClose)`
|
||||
- `message[level](content, [duration], onClose).then(afterClose)`
|
||||
|
||||
where `level` refers one static methods of `message`. The result of `then` method will be a Promise.
|
||||
|
||||
### Config
|
||||
The properties of `config` are as follows:
|
||||
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| class | Customized CSS class | string | - | - | ✓ |
|
||||
| classes | Customize class for each semantic structure inside the component. Supports object or function. | ArgsClassNamesType | - | - | ✓ |
|
||||
| content | The content of the message | VueNode | - | - | × |
|
||||
| duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 | - | × |
|
||||
| icon | Customized Icon | VueNode | - | - | × |
|
||||
| pauseOnHover | Keep the timer running or not on hover | boolean | true | - | × |
|
||||
| key | The unique identifier of the Message | Key | - | - | × |
|
||||
| style | Customized inline style | CSSProperties | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | ArgsStylesType | - | - | ✓ |
|
||||
| type | Notice type | NoticeType | - | - | × |
|
||||
| onClick | Specify a function that will be called when the message is clicked | (e: MouseEvent) => void | - | - | × |
|
||||
| onClose | Specify a function that will be called when the message is closed | () => void | - | - | × |
|
||||
|
||||
### Global configuration
|
||||
`message.config(options)`
|
||||
|
||||
```js
|
||||
message.config({
|
||||
top: 100,
|
||||
duration: 2,
|
||||
maxCount: 3,
|
||||
rtl: true,
|
||||
prefixCls: 'my-message',
|
||||
})
|
||||
```
|
||||
|
||||
| Argument | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| duration | Time before auto-dismiss, in seconds | number | 3 | - | × |
|
||||
| getContainer | Return the mount node for Message, but still display at fullScreen | () => HTMLElement \| ShadowRoot | () => document.body | - | × |
|
||||
| maxCount | Max message show, drop oldest if exceed limit | number | - | - | × |
|
||||
| prefixCls | The prefix class name of message node | string | `ant-message` | - | × |
|
||||
| rtl | Whether to enable RTL mode | boolean | false | - | × |
|
||||
| top | Distance from top | string \| number | 8 | - | × |
|
||||
| transitionName | Animation name | string | - | - | × |
|
||||
| pauseOnHover | Keep the timer running or not on hover | boolean | true | - | × |
|
||||
| classes | Customize class for each semantic structure inside the component. Supports object or function. | ArgsClassNamesType | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | ArgsStylesType | - | - | ✓ |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why I can not access context, ConfigProvider `locale/prefixCls/theme` in message?
|
||||
Calling `message` methods will render a new instance which does not inherit the current context. When you need context info, use `message.useMessage` to get `api` and `ContextHolder`, then render it inside your component tree:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { message } from 'antdv-next'
|
||||
|
||||
const [api, ContextHolder] = message.useMessage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextHolder />
|
||||
</template>
|
||||
```
|
||||
|
||||
**Note:** You must insert `ContextHolder` into your children with hooks. You can use static methods if you do not need context connection.
|
||||
|
||||
> [App Package Component](../app/docs.md) can be used to simplify `useMessage` and other methods that need to manually implant ContextHolder.
|
||||
|
||||
If you still need to use static methods and want them to read `locale`, `theme`, or other ConfigProvider settings, configure a global `holderRender` once:
|
||||
|
||||
```ts
|
||||
import { App, ConfigProvider } from 'antdv-next'
|
||||
import { h } from 'vue'
|
||||
import zhCN from 'antdv-next/locale/zh_CN'
|
||||
|
||||
ConfigProvider.config({
|
||||
holderRender: children =>
|
||||
h(ConfigProvider, { locale: zhCN }, {
|
||||
default: () => h(App, null, () => children),
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
Then `message.info`, `message.success` and other static methods will render with that wrapped context.
|
||||
|
||||
### How to set static methods prefixCls?
|
||||
You can config with [`ConfigProvider.config`](../config-provider/docs.md#configproviderconfig-4130).
|
||||
@@ -0,0 +1,28 @@
|
||||
# message Token
|
||||
|
||||
Use these variables through `theme.components.Message`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Message: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `zIndexPopup` | `number` | z-index of Message |
|
||||
| `contentBg` | `string` | Background color of Message |
|
||||
| `contentPadding` | `CSSProperties` | Padding of Message |
|
||||
Reference in new issue
Block a user