mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
07akioni
GitHub
commit
2564aaf6b7
@ -1,6 +1,6 @@
|
||||
# Badge
|
||||
|
||||
Using it with badge would be nice (if you like tons of notifications).
|
||||
Using it with `badge` would be nice (if you like tons of notifications).
|
||||
|
||||
```html
|
||||
<n-badge value="999+">
|
||||
|
||||
@ -17,7 +17,8 @@ name-size
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `fill` | Object-fit type of the image in the container. |
|
||||
| color | `string` | `undefined` | The background color of the avatar. |
|
||||
| object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'fill'` | Object-fit type of the image in the container. |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Avatar's size. |
|
||||
| src | `string` | `undefined` | Avatar's source. |
|
||||
| round | `boolean` | `false` | Whether to display a rounded avatar. |
|
||||
|
||||
@ -6,7 +6,7 @@ Words' sizing would be auto adjusted in avatar.
|
||||
<n-space vertical item-style="line-height: 0;">
|
||||
<n-space>
|
||||
<n-avatar>{{ value }}</n-avatar>
|
||||
<n-avatar circle>{{ value }}</n-avatar>
|
||||
<n-avatar round>{{ value }}</n-avatar>
|
||||
</n-space>
|
||||
<n-input v-model:value="value" />
|
||||
</n-space>
|
||||
|
||||
@ -5,22 +5,22 @@ Avatar can be circle shaped.
|
||||
```html
|
||||
<n-space align="flex-end">
|
||||
<n-avatar
|
||||
circle
|
||||
round
|
||||
size="small"
|
||||
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
||||
/>
|
||||
<n-avatar
|
||||
circle
|
||||
round
|
||||
size="medium"
|
||||
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
||||
/>
|
||||
<n-avatar
|
||||
circle
|
||||
round
|
||||
size="large"
|
||||
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
||||
/>
|
||||
<n-avatar
|
||||
circle
|
||||
round
|
||||
:size="48"
|
||||
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
||||
/>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 标记
|
||||
|
||||
和 Badge 一起用也挺好的 (如果你喜欢看到一堆一堆的推送)。
|
||||
和 `Badge` 一起用也挺好的 (如果你喜欢看到一堆一堆的推送)。
|
||||
|
||||
```html
|
||||
<n-badge value="999+">
|
||||
|
||||
@ -17,7 +17,8 @@ name-size
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `fill` | 头像的图片在容器内的的适应类型 |
|
||||
| color | `string` | `undefined` | 头像的背景色 |
|
||||
| object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'fill'` | 头像的图片在容器内的的适应类型 |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | 头像的尺寸 |
|
||||
| src | `string` | `undefined` | 头像的地址 |
|
||||
| round | `boolean` | `false` | 头像是否圆形 |
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<n-space vertical item-style="line-height: 0;">
|
||||
<n-space>
|
||||
<n-avatar>{{ value }}</n-avatar>
|
||||
<n-avatar circle>{{ value }}</n-avatar>
|
||||
<n-avatar round>{{ value }}</n-avatar>
|
||||
</n-space>
|
||||
<n-input v-model:value="value" />
|
||||
</n-space>
|
||||
|
||||
@ -5,22 +5,22 @@
|
||||
```html
|
||||
<n-space align="flex-end">
|
||||
<n-avatar
|
||||
circle
|
||||
round
|
||||
size="small"
|
||||
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
||||
/>
|
||||
<n-avatar
|
||||
circle
|
||||
round
|
||||
size="medium"
|
||||
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
||||
/>
|
||||
<n-avatar
|
||||
circle
|
||||
round
|
||||
size="large"
|
||||
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
||||
/>
|
||||
<n-avatar
|
||||
circle
|
||||
round
|
||||
:size="48"
|
||||
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
||||
/>
|
||||
|
||||
@ -25,7 +25,7 @@ show-button
|
||||
| disabled | `boolean` | `false` | Whether to disable the input. |
|
||||
| max | `number` | `undefined` | The max value. |
|
||||
| min | `number` | `undefined` | The min value. |
|
||||
| placeholder | `string` | `'Please Input'` | |
|
||||
| placeholder | `string` | `'Please Input'` | Placeholder of input number. |
|
||||
| show-button | `boolean` | `true` | Whether to show buttons. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of input box. |
|
||||
| step | `number` | `1` | The number to which the current value is increased or decreased. It can be an integer or decimal. |
|
||||
|
||||
@ -26,7 +26,7 @@ debug
|
||||
| disabled | `boolean` | `false` | 是否禁用 |
|
||||
| max | `number` | `undefined` | 最大值 |
|
||||
| min | `number` | `undefined` | 最小值 |
|
||||
| placeholder | `string` | `'请输入'` | |
|
||||
| placeholder | `string` | `'请输入'` | 提示信息 |
|
||||
| show-button | `boolean` | `true` | 是否有按钮 |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 输入框大小 |
|
||||
| step | `number` | `1` | 每次改变步数，可以为小数 |
|
||||
|
||||
@ -38,12 +38,12 @@ render-tag
|
||||
| disabled | `boolean` | `false` | Whether to disable the select. |
|
||||
| fallback-option | `false \| (value: string \| number) => SelectOption` | `value => ({ label: '' + value, value })` | The option to be created according the value which has no corresponding option in the options of the component. If set to `false`, the fallback option won't be created and displayed and the value has no corresponding option will be viewed as a invalid value and it will be removed in the operations of the component. |
|
||||
| filterable | `boolean` | `false` | Whether it can filter options. |
|
||||
| filter | `(pattern: string, option: Object) => boolean` | A basic string based search method. | |
|
||||
| filter | `(pattern: string, option: Object) => boolean` | A basic string based search method. | Filter function. |
|
||||
| loading | `boolean` | `false` | Whether to show loading status. |
|
||||
| max-tag-count | `number \| 'responsive'` | `undefined` | Max tag count in multiple mode. `responsive` will keep all the tags in single line. |
|
||||
| multiple | `boolean` | `false` | Whether to select multiple values. |
|
||||
| options | `Array<SelectOption \| SelectGroupOption>` | `[]` | For details of configuration options, see SelectOption Properties. |
|
||||
| placeholder | `string` | `'Please Select'` | |
|
||||
| placeholder | `string` | `'Please Select'` | Placeholder of select. |
|
||||
| remote | `boolean` | `false` | If you want to async get options. Note that if remote is set, `filter` & `tag` won't work on `options`. At that time, you are taking all control of `options`. |
|
||||
| render-label | `(option: SelectOption \| SelectGroupOption, selected: boolean) => VNodeChild` | `undefined` | Render function of all the options' label. |
|
||||
| render-option | `(info: { node: VNode, option: SelectOption \| SelectGroupOption, selected: boolean } }` | `undefined` | Render function of all the options. |
|
||||
@ -54,12 +54,12 @@ render-tag
|
||||
| tag | `boolean` | `false` | Whether it can create new option, should be used with `filterable`. |
|
||||
| value | `Array<string \| number> \| string \| number \| null` | `undefined` | Value in controlled mode. |
|
||||
| virtual-scroll | `boolean` | `true` | Whether to enable virtual scrolling. |
|
||||
| on-blur | `() => void` | `undefined` | Selection blur. |
|
||||
| on-blur | `() => void` | `undefined` | Callback triggered when selection blur. |
|
||||
| on-create | `(label: string) => SelectOption` | `label => ({ label, value: label })` | How to create a option when you input a string to create a option. Note that `filter` will be applied to the created option too. And make sure the value of the created option is not the same as any other option. |
|
||||
| on-focus | `() => void` | `undefined` | Selection focus. |
|
||||
| on-scroll | `(e: ScrollEvent) => void` | `undefined` | Menu scroll. |
|
||||
| on-search | `(value: string) => void` | `undefined` | |
|
||||
| on-update:value | `(value: Array \| string \| number \| null) => void` | `undefined` | Callback of value updating. |
|
||||
| on-focus | `() => void` | `undefined` | Callback triggered when selection focus. |
|
||||
| on-scroll | `(e: ScrollEvent) => void` | `undefined` | Callback triggered when menu scroll. |
|
||||
| on-search | `(value: string) => void` | `undefined` | Callback triggered when search. |
|
||||
| on-update:value | `(value: Array \| string \| number \| null) => void` | `undefined` | Callback triggered when value updating. |
|
||||
|
||||
### SelectOption Properties
|
||||
|
||||
@ -76,11 +76,11 @@ render-tag
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| children | `Array<SelectOption>` | |
|
||||
| children | `Array<SelectOption>` | Child select options. |
|
||||
| label | `string \| ((option: SelectGroupOption) => VNodeChild)` | Label of the group option. |
|
||||
| key | `string \| number` | Should be unique in options. |
|
||||
| render | `(info: { node: VNode }) => VNodeChild` | Render the entire option. |
|
||||
| type | `'group'` | |
|
||||
| type | `'group'` | Type of the group option. |
|
||||
|
||||
### Select Slots
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@ options-change-debug
|
||||
| max-tag-count | `number \| 'responsive'` | `undefined` | 多选标签的最大显示数量，`responsive` 会将所有标签保持在一行 |
|
||||
| multiple | `boolean` | `false` | 是否为多选 |
|
||||
| options | `Array<SelectOption \| SelectGroupOption>` | `[]` | 配置选项内容，详情见 SelectOption Properties |
|
||||
| placeholder | `string` | `'请选择'` | |
|
||||
| placeholder | `string` | `'请选择'` | 提示信息 |
|
||||
| remote | `boolean` | `false` | 是否要异步获取选项。注意如果设定了，那么 `filter` 和 `tag` 都不会对 `options` 生效。这个时候你在全权控制 `options` |
|
||||
| render-label | `(option: SelectOption \| SelectGroupOption, selected: boolean) => VNodeChild` | `undefined` | 选项标签渲染函数 |
|
||||
| render-option | `(info: { node: VNode, option: SelectOption \| SelectGroupOption, selected: boolean } }` | `undefined` | 选项的渲染函数 |
|
||||
@ -60,12 +60,12 @@ options-change-debug
|
||||
| tag | `boolean` | `false` | 是否可以创建新的选项，需要和 `filterable` 一起使用 |
|
||||
| value | `Array<string \| number> \| string \| number \| null` | `undefined` | 受控模式下的值 |
|
||||
| virtual-scroll | `boolean` | `true` | 是否启用虚拟滚动 |
|
||||
| on-blur | `() => void` | `undefined` | 选择器 Blur 时发出 |
|
||||
| on-blur | `() => void` | `undefined` | `blur` 时执行的回调 |
|
||||
| on-create | `(label: string) => SelectOption` | `label => ({ label, value: label })` | 在输入内容时如何创建一个选项。注意 `filter` 对这个生成的选项同样会生效。同时确保这个选项和其他选项的 `value` 不要有重复 |
|
||||
| on-focus | `() => void` | `undefined` | 选择器 Focus 时发出 |
|
||||
| on-scroll | `(e: ScrollEvent) => void` | `undefined` | 选择菜单在滚动 |
|
||||
| on-search | `(value: string) => void` | `undefined` | |
|
||||
| on-update:value | `(value: Array \| string \| number \| null) => void` | `undefined` | 值更新的回调 |
|
||||
| on-focus | `() => void` | `undefined` | `focus` 时执行的回调 |
|
||||
| on-scroll | `(e: ScrollEvent) => void` | `undefined` | 滚动时执行的回调 |
|
||||
| on-search | `(value: string) => void` | `undefined` | 搜索时执行的回调 |
|
||||
| on-update:value | `(value: Array \| string \| number \| null) => void` | `undefined` | 值更新时执行的回调 |
|
||||
|
||||
### SelectOption Properties
|
||||
|
||||
@ -74,7 +74,7 @@ options-change-debug
|
||||
| class | `string` | 自定义一个选项的类名 |
|
||||
| disabled | `boolean` | 是否禁用一个选项 |
|
||||
| label | `string \| ((option: SelectOption, selected: boolean) => VNodeChild)` | 选项的标签，注意如果你使用了渲染函数，默认的过滤器将会过滤该选项 |
|
||||
| render | `(info: { node: VNode, option: SelectOption, selected: boolean }) => VNodeChild` | Render the entire option. |
|
||||
| render | `(info: { node: VNode, option: SelectOption, selected: boolean }) => VNodeChild` | 渲染整个选项 |
|
||||
| style | `string \| object` | 自定义一个选项的样式 |
|
||||
| value | `string \| number` | 在选项中应该是唯一的 |
|
||||
|
||||
@ -82,11 +82,11 @@ options-change-debug
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| children | `Array<SelectOption>` | |
|
||||
| children | `Array<SelectOption>` | 子选项组 |
|
||||
| label | `string \| ((option: SelectGroupOption) => VNodeChild)` | 选项组的标签 |
|
||||
| key | `string \| number` | 在选项中应该是唯一的 |
|
||||
| render | `(info: { node: VNode, option: SelectOption, selected: boolean } }) => VNodeChild` | Render the entire option. |
|
||||
| type | `'group'` | |
|
||||
| render | `(info: { node: VNode, option: SelectOption, selected: boolean } }) => VNodeChild` | 渲染整个选项 |
|
||||
| type | `'group'` | 选项组的类型 |
|
||||
|
||||
### Select Slots
|
||||
|
||||
|
||||
@ -23,10 +23,12 @@ indent
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------------ | ---------- | ------------------------------------- |
|
||||
| action | `()` | Operating area slot. |
|
||||
| default | `()` | Content information. |
|
||||
| description | `()` | Description information. |
|
||||
| header-extra | `()` | Additional information in the header. |
|
||||
| header | `()` | Header information. |
|
||||
| Name | Parameters | Description |
|
||||
| ------------ | ---------- | -------------------- |
|
||||
| action | `()` | Action's slot. |
|
||||
| avatar | `()` | Avatar's slot. |
|
||||
| default | `()` | Content's slot. |
|
||||
| description | `()` | Description's slot. |
|
||||
| footer | `()` | Footer's slot. |
|
||||
| header-extra | `()` | Header extra's slot. |
|
||||
| header | `()` | Header's slot. |
|
||||
|
||||
@ -23,10 +23,12 @@ indent
|
||||
|
||||
## Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------------ | ---- | -------------- |
|
||||
| action | `()` | 操作区域插槽 |
|
||||
| default | `()` | 内容信息 |
|
||||
| description | `()` | 描述信息 |
|
||||
| header-extra | `()` | 头部的附加信息 |
|
||||
| header | `()` | 头部信息 |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------------ | ---- | ---------------- |
|
||||
| action | `()` | 操作区域插槽 |
|
||||
| avatar | `()` | 头像区域插槽 |
|
||||
| default | `()` | 内容区域插槽 |
|
||||
| description | `()` | 描述区域插槽 |
|
||||
| footer | `()` | 尾部区域插槽 |
|
||||
| header-extra | `()` | 头部附加区域插槽 |
|
||||
| header | `()` | 头部区域插槽 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user