docs(components): [config-provider] (#10881)

* docs(components): [config-provider]
* Adjust API style
This commit is contained in:
Xc 2022-12-12 22:56:05 +08:00 committed by GitHub
parent d998d00289
commit 2e172b68f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 33 deletions

View File

@ -37,34 +37,36 @@ config-provider/message
In this section, you can learn how to use Config Provider to provide experimental features. For now, we haven't added any experimental features, but in the feature roadmap, we will add some experimental features. You can use this config to manage the features you want or not.
// TODO
<!-- TODO -->
## Config Provider Attributes
## API
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| locale | Locale Object | [Language](https://github.com/element-plus/element-plus/blob/a98ff9b40c0c3d2b9959f99919bd8363e3e3c25a/packages/locale/index.ts#L5) | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | [English](https://github.com/element-plus/element-plus/blob/dev/packages/locale/lang/en.ts) |
| size | global component size | string | large / default /small | default |
| zIndex | global Initial zIndex | number | - | - |
| namespace | global component className prefix (cooperated with [$namespace](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/mixins/config.scss#L1)) | string | - | el |
| button | button related configuration, [see the following table](#button-attributes) | ButtonGlobalConfig | - | see the following table |
| message | message related configuration, [see the following table](#message-attributes) | MessageGlobalConfig | - | see the following table |
| experimental-features | features at experimental stage to be added, all features are default to be set to false | Object | - | - |
### Config Provider Attributes
## Button Attribute
| Name | Description | Type | Default |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| locale | Locale Object | ^[object]`{name: string, el: TranslatePair}`[](https://github.com/element-plus/element-plus/blob/a98ff9b40c0c3d2b9959f99919bd8363e3e3c25a/packages/locale/index.ts#L5) [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | [en](https://github.com/element-plus/element-plus/blob/dev/packages/locale/lang/en.ts) |
| size | global component size | ^[enum]`'large' \| 'default' \| 'small'` | default |
| zIndex | global Initial zIndex | ^[number] | — |
| namespace | global component className prefix (cooperated with [$namespace](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/mixins/config.scss#L1)) | ^[string] | el |
| button | button related configuration, [see the following table](#button-attributes) | ^[object]`{autoInsertSpace?: boolean}` | see the following table |
| message | message related configuration, [see the following table](#message-attributes) | ^[object]`{max?: number}` | see the following table |
| experimental-features | features at experimental stage to be added, all features are default to be set to false | ^[object] | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------------- | ----------------------------------------------------------- | ------- | --------------- | ------- |
| autoInsertSpace | automatically insert a space between two chinese characters | boolean | - | false |
### Button Attribute
## Message Attribute
| Attribute | Description | Type | Default |
| --------------- | ----------------------------------------------------------- | ---------- | ------- |
| autoInsertSpace | automatically insert a space between two chinese characters | ^[boolean] | false |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | --------------------------------------------------------------------- | ------ | --------------- | ------- |
| max | the maximum number of messages that can be displayed at the same time | number | - | - |
### Message Attribute
## Config Provider Slots
| Attribute | Description | Type | Default |
| --------- | --------------------------------------------------------------------- | --------- | ------- |
| max | the maximum number of messages that can be displayed at the same time | ^[number] | — |
| Name | Description | Scope |
| ---- | ------------------------- | ------------------------------------------------------- |
| - | customize default content | config: provided global config (inherited from the top) |
### Config Provider Slots
| Name | Description | Scope |
| ------- | ------------------------- | ------------------------------------------------------- |
| default | customize default content | config: provided global config (inherited from the top) |

View File

@ -11,38 +11,55 @@ import type { MessageConfigContext } from '@element-plus/components/message'
export const messageConfig: MessageConfigContext = {}
export const configProviderProps = buildProps({
// Controlling if the users want a11y features.
/**
* @description Controlling if the users want a11y features
*/
a11y: {
type: Boolean,
default: true,
},
/**
* @description Locale Object
*/
locale: {
type: definePropType<Language>(Object),
},
/**
* @description global component size
*/
size: useSizeProp,
/**
* @description button related configuration, [see the following table](#button-attributes)
*/
button: {
type: definePropType<ButtonConfigContext>(Object),
},
/**
* @description features at experimental stage to be added, all features are default to be set to false | ^[object]
*/
experimentalFeatures: {
type: definePropType<ExperimentalFeatures>(Object),
},
// Controls if we should handle keyboard navigation
/**
* @description Controls if we should handle keyboard navigation
*/
keyboardNavigation: {
type: Boolean,
default: true,
},
/**
* @description message related configuration, [see the following table](#message-attributes)
*/
message: {
type: definePropType<MessageConfigContext>(Object),
},
/**
* @description global Initial zIndex
*/
zIndex: Number,
/**
* @description global component className prefix (cooperated with [$namespace](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/mixins/config.scss#L1)) | ^[string]
*/
namespace: {
type: String,
default: 'el',