mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
docs(mention): 更新提及组件的说明文档 (#525)
* docs(icon): 更新图标组件的说明文档 * docs(pageHeader): 更新页头组件的说明文档 * docs(pageHeader): 更新页头组件的文档中的错别字 * docs(typography): 更新排印组件的说明文档 * Update src/typography/demos/zhCN/index.demo-entry.md * docs(mention): 更新提及组件的说明文档 * docs(mention): 更新提及组件的一部分参数说明 Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
songjianet
GitHub
parent
f3d381bab9
commit
5264c0b30b
@ -6,7 +6,10 @@ import { throwError } from '../../_utils'
|
||||
export function useLoadingBar (): LoadingBarApiInjection {
|
||||
const loadingBar = inject(loadingBarApiInjectionKey, null)
|
||||
if (loadingBar === null) {
|
||||
throwError('use-loading-bar', 'No outer <n-loading-bar-provider /> founded.')
|
||||
throwError(
|
||||
'use-loading-bar',
|
||||
'No outer <n-loading-bar-provider /> founded.'
|
||||
)
|
||||
}
|
||||
return loadingBar
|
||||
}
|
||||
|
||||
@ -19,31 +19,31 @@ Mention is provided after `v2.2.0`.
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| autosize | `boolean \| { maxRows?: number, minRows?: number }` | `false` | |
|
||||
| options | `MentionOption[]` | `[]` | |
|
||||
| type | `'input' \| 'textarea'` | `'input'` | |
|
||||
| autosize | `boolean \| { maxRows?: number, minRows?: number }` | `false` | Autosize. |
|
||||
| options | `MentionOption[]` | `[]` | Mention Options list. |
|
||||
| type | `'input' \| 'textarea'` | `'input'` | Input type. |
|
||||
| separator | `string` | `' '` | Char to split mentions whose length must be 1. |
|
||||
| bordered | `boolean` | `true` | |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| value | `string \| null` | `undefined` | |
|
||||
| default-value | `string` | `''` | |
|
||||
| loading | `boolean` | `false` | |
|
||||
| bordered | `boolean` | `true` | Whether to display the border of the input box. |
|
||||
| disabled | `boolean` | `false` | Whether to set the input box to be disabled. |
|
||||
| value | `string \| null` | `undefined` | Input value. |
|
||||
| default-value | `string` | `''` | Input default value. |
|
||||
| loading | `boolean` | `false` | Whether the selection panel of mentions shows the loading status. |
|
||||
| prefix | `string \| string[]` | `'@'` | Prefix char to trigger mentions whose length must be 1. |
|
||||
| placeholder | `string` | `''` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| on-update:value | `(value: string) => void` | `undefined` | |
|
||||
| on-select | `(option: MentionOption, prefix: string) => void` | `undefined` | |
|
||||
| on-focus | `(e: FocusEvent) => void` | `undefined` | |
|
||||
| on-search | `(pattern: string, prefix: string) => void` | `undefined` | |
|
||||
| on-blur | `(e: FocusEvent) => void` | `undefined` | |
|
||||
| placeholder | `string` | `''` | Input placeholder. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Input size. |
|
||||
| on-update:value | `(value: string) => void` | `undefined` | Triggered when the input box value is updated. |
|
||||
| on-select | `(option: MentionOption, prefix: string) => void` | `undefined` | Triggered when the input box is selected. |
|
||||
| on-focus | `(e: FocusEvent) => void` | `undefined` | Triggered when the input box gets focus. |
|
||||
| on-search | `(pattern: string, prefix: string) => void` | `undefined` | Triggered when searching in the input box. |
|
||||
| on-blur | `(e: FocusEvent) => void` | `undefined` | Triggered when the input box loses focus. |
|
||||
|
||||
### MentionOption Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| -------- | --------------------------------------- | ---------------- |
|
||||
| class | `string` | |
|
||||
| disabled | `boolean` | |
|
||||
| label | `string` | |
|
||||
| render | `(option: MentionOption) => VNodeChild` | |
|
||||
| style | `string` | |
|
||||
| value | `string` | Should be unique |
|
||||
| --- | --- | --- |
|
||||
| class | `string` | Option class name. |
|
||||
| disabled | `boolean` | Option disabled status. |
|
||||
| label | `string` | Option label. |
|
||||
| render | `(option: MentionOption) => VNodeChild` | Support custom options via `render` rendering function. |
|
||||
| style | `string` | Option style. |
|
||||
| value | `string` | Should be unique. |
|
||||
|
||||
@ -19,31 +19,31 @@ Mention 在 `v2.2.0` 及以后可用。
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| autosize | `boolean \| { maxRows?: number, minRows?: number }` | `false` | |
|
||||
| options | `MentionOption[]` | `[]` | |
|
||||
| type | `'input' \| 'textarea'` | `'input'` | |
|
||||
| autosize | `boolean \| { maxRows?: number, minRows?: number }` | `false` | 自动换行 |
|
||||
| options | `MentionOption[]` | `[]` | 选项列表 |
|
||||
| type | `'input' \| 'textarea'` | `'input'` | 输入框类型 |
|
||||
| separator | `string` | `' '` | 切分提及使用的字符，长度必须为 1 |
|
||||
| bordered | `boolean` | `true` | |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| value | `string \| null` | `undefined` | |
|
||||
| default-value | `string` | `''` | |
|
||||
| loading | `boolean` | `false` | |
|
||||
| bordered | `boolean` | `true` | 是否显示输入框边框 |
|
||||
| disabled | `boolean` | `false` | 是否设置输入框为禁用状态 |
|
||||
| value | `string \| null` | `undefined` | 输入框的值 |
|
||||
| default-value | `string` | `''` | 输入框的默认值 |
|
||||
| loading | `boolean` | `false` | 选择面板是否显示加载状态 |
|
||||
| prefix | `string \| string[]` | `'@'` | 触发提及的前缀，长度必须为 1 |
|
||||
| placeholder | `string` | `''` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| on-update:value | `(value: string) => void` | `undefined` | |
|
||||
| on-select | `(option: MentionOption, prefix: string) => void` | `undefined` | |
|
||||
| on-focus | `(e: FocusEvent) => void` | `undefined` | |
|
||||
| on-search | `(pattern: string, prefix: string) => void` | `undefined` | |
|
||||
| on-blur | `(e: FocusEvent) => void` | `undefined` | |
|
||||
| placeholder | `string` | `''` | 输入框的占位符 |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 输入框的大小 |
|
||||
| on-update:value | `(value: string) => void` | `undefined` | 输入框值发生更新时触发 |
|
||||
| on-select | `(option: MentionOption, prefix: string) => void` | `undefined` | 输入框的选中时触发 |
|
||||
| on-focus | `(e: FocusEvent) => void` | `undefined` | 输入框获得焦点时触发 |
|
||||
| on-search | `(pattern: string, prefix: string) => void` | `undefined` | 输入框搜索时触发 |
|
||||
| on-blur | `(e: FocusEvent) => void` | `undefined` | 输入框失去焦点时触发 |
|
||||
|
||||
### MentionOption Properties
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| -------- | --------------------------------------- | -------------------- |
|
||||
| class | `string` | |
|
||||
| disabled | `boolean` | |
|
||||
| label | `string` | |
|
||||
| render | `(option: MentionOption) => VNodeChild` | |
|
||||
| style | `string` | |
|
||||
| --- | --- | --- |
|
||||
| class | `string` | 选项的自定义类名 |
|
||||
| disabled | `boolean` | 选项是否禁用 |
|
||||
| label | `string` | 选项的标签 |
|
||||
| render | `(option: MentionOption) => VNodeChild` | 支持通过 `render` 渲染函数自定义选项 |
|
||||
| style | `string` | 选项的样式 |
|
||||
| value | `string` | 在选项中应该是唯一的 |
|
||||
|
||||
@ -33,9 +33,8 @@ export interface NotificationProviderInjection {
|
||||
mergedThemeRef: Ref<MergedTheme<NotificationTheme>>
|
||||
}
|
||||
|
||||
export const notificationProviderInjectionKey: InjectionKey<NotificationProviderInjection> = Symbol(
|
||||
'notificationProvider'
|
||||
)
|
||||
export const notificationProviderInjectionKey: InjectionKey<NotificationProviderInjection> =
|
||||
Symbol('notificationProvider')
|
||||
|
||||
type Create = (options: NotificationOptions) => NotificationReactive
|
||||
type TypedCreate = (
|
||||
@ -54,9 +53,8 @@ export interface NotificationApiInjection {
|
||||
|
||||
export type NotificationProviderInst = NotificationApiInjection
|
||||
|
||||
export const notificationApiInjectionKey: InjectionKey<NotificationApiInjection> = Symbol(
|
||||
'notificationApi'
|
||||
)
|
||||
export const notificationApiInjectionKey: InjectionKey<NotificationApiInjection> =
|
||||
Symbol('notificationApi')
|
||||
|
||||
export type NotificationReactive = {
|
||||
readonly key: string
|
||||
|
||||
@ -8,9 +8,7 @@ It can be checkable.
|
||||
<n-tag checkable v-model:checked="checked"> Yes It Is </n-tag>
|
||||
<n-tag checkable v-model:checked="checked"> I'm Down </n-tag>
|
||||
<n-tag checkable v-model:checked="checked"> Yesterday </n-tag>
|
||||
<n-tag checkable v-model:checked="checked">
|
||||
I'm Looking Through You
|
||||
</n-tag>
|
||||
<n-tag checkable v-model:checked="checked"> I'm Looking Through You </n-tag>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user