mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-07 13:48:31 +08:00
docs(select, slider, switch): better en (#1350)
* Docs - Select (English) * Docs - Slider (English) * Docs - Switch (English) * Final edits * Update src/select/demos/enUS/fallback-option.demo.md Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
Keagan Chisnall
GitHub
parent
d1307f5e28
commit
eb7917ed07
@ -1,10 +1,10 @@
|
||||
# Action Slot
|
||||
|
||||
Is there anybody needs action slot on select menu?
|
||||
Is there anybody who needs an action slot on a select menu?
|
||||
|
||||
```html
|
||||
<n-select v-model:value="value" :options="options">
|
||||
<template #action>If you open this demo, you may need it.</template>
|
||||
<template #action>If you click this demo, you may need it.</template>
|
||||
</n-select>
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Add Tooltip to Option
|
||||
|
||||
Use `render-option` to control the rendering of entire option.
|
||||
Use the `render-option` property to control rendering of the entire option.
|
||||
|
||||
```html
|
||||
<n-select :options="options" :render-option="renderOption" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Basic
|
||||
|
||||
Basic usage for select
|
||||
Basic usage of `n-select`.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Clearable
|
||||
|
||||
Remember you can only clear the select which has value. (Select it firstly)
|
||||
Make the select clearable. Remember you can only clear a select that has a value.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Custom Option Render
|
||||
|
||||
After a long time of consideration, I decide to drop slot API. However, there is still a way to render options as you like. (The example uses `render-label` prop, but you can also use the `style` or `class` prop on an `option`.)
|
||||
After much deliberation, I decided to drop the slot API for rendering options; however, using `render-label`, `style`, and/or `class` properties you can do almost anything.
|
||||
|
||||
```html
|
||||
<n-select :options="options" :render-label="renderLabel" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# UpdateValue Event
|
||||
|
||||
Why `update:value` event is an example? Because at first there isn't much to write.
|
||||
Why make the `update:value` event an example? Because there's so little to write.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# Fallback Option
|
||||
|
||||
In some rare cases, you may fill the value but not the corresponding options. For example in async cases, or simply you passed a bad value. If you want to control the way of the value to be displayed, use `fallback-option` prop to control how to create a option using the value.
|
||||
In some rare cases, you may want to define selected option(s) not present in the options array (e.g. async loading cases, or default values). The `fallback-option` property provides control in creating an option using a value.
|
||||
|
||||
If you don't need fallback options, simply set it to `false`. Now only the value appeared in the options will be viewed as a valid value. Invalid values will be cleared in the operations of the component.
|
||||
If you don't need fallback options, setting `fallback-option` to `false` ensures that only an option with a matching value will be displayed. If no option has that value, the selected value will be cleared.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Group
|
||||
|
||||
Group options together.
|
||||
Options can also be grouped together.
|
||||
|
||||
```html
|
||||
<n-select filterable v-model:value="value" :options="options" />
|
||||
|
||||
@ -33,60 +33,60 @@ render-person
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| consistent-menu-width | `boolean` | `true` | Whether the menu keeps its width the same as select trigger. Set it to `false` will disable `virtual-scroll`. |
|
||||
| consistent-menu-width | `boolean` | `true` | Whether the menu keeps its width the same as the select trigger element. Setting it to `false` will also disable `virtual-scroll`. |
|
||||
| clearable | `boolean` | `false` | Whether the value is clearable. |
|
||||
| default-value | `Array<string \| number> \| string \| number \| null` | `null` | Default value in uncontrolled mode. |
|
||||
| default-value | `Array<string \| number> \| string \| number \| null` | `null` | Default value. |
|
||||
| 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 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 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. |
|
||||
| render-tag | `(option: SelectBaseOption, onClose: () => void) => VNodeChild` | `undefined` | Render function of all the tag. |
|
||||
| show | `boolean` | `undefined` | Whether to show menu. |
|
||||
| show-arrow | `boolean` | `true` | Whether to show arrow. |
|
||||
| fallback-option | `false \| (value: string \| number) => SelectOption` | `value => ({ label: '' + value, value })` | The option to be created using the value which has no corresponding option value. If set to `false`, the fallback option won't be created and displayed. |
|
||||
| filterable | `boolean` | `false` | Whether options can be filtered. |
|
||||
| filter | `(pattern: string, option: Object) => boolean` | String search method. | Filter function. |
|
||||
| loading | `boolean` | `false` | Whether to show a loading state. |
|
||||
| max-tag-count | `number \| 'responsive'` | `undefined` | Maximum selected values to display while in `multiple` mode. `responsive` will keep all the tags in single line. |
|
||||
| multiple | `boolean` | `false` | Whether to allow selecting multiple values. |
|
||||
| options | `Array<SelectOption \| SelectGroupOption>` | `[]` | Options that can be selected. For more details see SelectOption Properties (below). |
|
||||
| placeholder | `string` | `'Please Select'` | Placeholder. |
|
||||
| remote | `boolean` | `false` | Allows options to be fetched asynchronously. Note that if `remote` is set, `filter` & `tag` won't work on `options`. |
|
||||
| render-label | `(option: SelectOption \| SelectGroupOption, selected: boolean) => VNodeChild` | `undefined` | Render function for each option label. |
|
||||
| render-option | `(info: { node: VNode, option: SelectOption \| SelectGroupOption, selected: boolean } }` | `undefined` | Render function for each option. |
|
||||
| render-tag | `(option: SelectBaseOption, onClose: () => void) => VNodeChild` | `undefined` | Render function for each option tag. |
|
||||
| show | `boolean` | `undefined` | Whether to show/open the option menu. |
|
||||
| show-arrow | `boolean` | `true` | Whether to show the dropdown arrow. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the select input. |
|
||||
| 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. |
|
||||
| tag | `boolean` | `false` | Whether users can create new options. This should be used with `filterable`. |
|
||||
| value | `Array<string \| number> \| string \| number \| null` | `undefined` | Value when being manually set. |
|
||||
| virtual-scroll | `boolean` | `true` | Whether to enable virtual scrolling. |
|
||||
| on-blur | `() => void` | `undefined` | Callback triggered when selection blur. |
|
||||
| on-clear | `() => void` | `undefined` | Callback triggered when selection clear. |
|
||||
| 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` | 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, option: SelectBaseOption \| null \| SelectBaseOption[]) => void` | `undefined` | Callback triggered when value updating. |
|
||||
| on-blur | `() => void` | `undefined` | Callback triggered when the selection element is blurred. |
|
||||
| on-clear | `() => void` | `undefined` | Callback triggered when the selection element is cleared. |
|
||||
| on-create | `(label: string) => SelectOption` | `label => ({ label, value: label })` | How to create an option when you type in a custom option. Note that `filter` will be applied to the created option too. And you'd better make sure that the value of the created option is not the same as any other option. |
|
||||
| on-focus | `() => void` | `undefined` | Callback triggered when the selection element is focussed on. |
|
||||
| on-scroll | `(e: ScrollEvent) => void` | `undefined` | Callback triggered when the options menu is scrolled. |
|
||||
| on-search | `(value: string) => void` | `undefined` | Callback triggered when a search is conducted. |
|
||||
| on-update:value | `(value: Array \| string \| number \| null, option: SelectBaseOption \| null \| SelectBaseOption[]) => void` | `undefined` | Callback triggered when the selected value is updated. |
|
||||
|
||||
### SelectOption Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| class | `string` | Customize the class name of the option. |
|
||||
| class | `string` | Customize the option's class. |
|
||||
| disabled | `boolean` | Whether to disable the option. |
|
||||
| label | `string \| ((option: SelectOption, selected: boolean) => VNodeChild)` | Label of the option. Note that if you are using render function, the default filter will filter the option. |
|
||||
| label | `string \| ((option: SelectOption, selected: boolean) => VNodeChild)` | Label of the option. Note that if you are using the `render` function, the default filter will filter the option. |
|
||||
| render | `(info: { node: VNode }) => VNodeChild` | Render the entire option. |
|
||||
| style | `string` | Customize the style of the option. |
|
||||
| value | `string \| number` | Should be unique in options. |
|
||||
| style | `string` | Customize the option's style. |
|
||||
| value | `string \| number` | Should be unique for each option. |
|
||||
|
||||
### SelectGroupOption Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| 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 of the group option. |
|
||||
| Name | Type | Description |
|
||||
| -------- | ------------------------------------------------------- | --------------------------------- |
|
||||
| children | `Array<SelectOption>` | Child select options. |
|
||||
| label | `string \| ((option: SelectGroupOption) => VNodeChild)` | Label of the group. |
|
||||
| key | `string \| number` | Should be unique for each option. |
|
||||
| render | `(info: { node: VNode }) => VNodeChild` | Render the entire option. |
|
||||
| type | `'group'` | Type of the group option. |
|
||||
|
||||
### Select Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------ | ---------- | ---------------------------- |
|
||||
| action | `()` | Slot in menu operation area. |
|
||||
| empty | `()` | Slot when menu has no data. |
|
||||
| Name | Parameters | Description |
|
||||
| ------ | ---------- | -------------------------------------- |
|
||||
| action | `()` | Options menu slot. |
|
||||
| empty | `()` | Empty state slot for the options menu. |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Lots of Options
|
||||
|
||||
1000 times of the ultimate answer.
|
||||
1000 times the answer to everything.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Max Tag Count
|
||||
|
||||
You can use a fixed number or use `responsive` to set a responsive max count.
|
||||
Maximum selected options to display. This can be a fixed number or the string `responsive` to set a responsive max count.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Menu Width
|
||||
|
||||
Menu width can fit its content. (In the situation virtual scroll will be disabled.)
|
||||
The options menu width can be made to fit its content. Using this disables virtual scrolling.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Multiple Select
|
||||
|
||||
Select multiple value.
|
||||
Allow the selection of multiple values.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Remote(Multiple)
|
||||
|
||||
Async example for multiple select.
|
||||
Asynchronous options example for a multiple select case.
|
||||
|
||||
```html
|
||||
<n-select
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Remote(Single)
|
||||
|
||||
Async example for single select.
|
||||
Asynchronous example for a single select case.
|
||||
|
||||
```html
|
||||
<n-select
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Select Person
|
||||
|
||||
I find in many scenes people want to make select a people picker. Here is an example that shows you how to customize the select.
|
||||
I've found that people often want to make a people picker. Here is an example that shows you how that can be done with a select.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
# Scroll Event
|
||||
|
||||
My colleague said he want use scroll status to async load options.
|
||||
A colleague of mine wanted to use a scroll event for loading options asynchronously; here's that example:
|
||||
|
||||
```html
|
||||
<n-select v-model:value="value" :options="options" @scroll="handleScroll" />
|
||||
<pre>
|
||||
{{
|
||||
{{
|
||||
JSON.stringify({
|
||||
scrollContentHeight,
|
||||
scrollContainerScrollTop,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Size
|
||||
|
||||
Select has different size.
|
||||
`n-select` comes in different sizes.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Create Option Dynamically
|
||||
|
||||
Use `tag` & `filterable` to create option dynamically.
|
||||
Use `tag` & `filterable` properties to create options dynamically.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Slider
|
||||
|
||||
As far as I know, it is awalys used as volumn control.
|
||||
As far as I know, it is always used as a volume control.
|
||||
|
||||
## Demos
|
||||
|
||||
@ -17,16 +17,16 @@ format
|
||||
|
||||
### Slider Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | Default value. |
|
||||
| disabled | `boolean` | `false` | Whether the slider is disabled. |
|
||||
| format-tooltip | `(value: number) => string \| number` | `undefined` | Format tooltip. |
|
||||
| marks | `{ [markValue: number]: string }` | `undefined` | Marks of the slider. |
|
||||
| max | `number` | `100` | Max value of the slider. |
|
||||
| min | `number` | `0` | Min value of the slider. |
|
||||
| range | `boolean` | `false` | Whether the slider uses range value. |
|
||||
| step | `number` | `1` | Step of the slider. |
|
||||
| tooltip | `boolean` | `true` | Whether to show tooltip. |
|
||||
| value | `number \| [number, number] \| null` | `undefined` | Value of the slider. |
|
||||
| on-update:value | `(value: number \| [number, number]) => void` | `undefined` | Callback on value update. |
|
||||
| Name | Type | Default | Description |
|
||||
| --------------- | --------------------------------------------- | ----------- | ------------------------------------ |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | Default value. |
|
||||
| disabled | `boolean` | `false` | Whether the slider is disabled. |
|
||||
| format-tooltip | `(value: number) => string \| number` | `undefined` | Format tooltip. |
|
||||
| marks | `{ [markValue: number]: string }` | `undefined` | Marks of the slider. |
|
||||
| max | `number` | `100` | Max value of the slider. |
|
||||
| min | `number` | `0` | Min value of the slider. |
|
||||
| range | `boolean` | `false` | Whether the slider uses range value. |
|
||||
| step | `number` | `1` | Step of the slider. |
|
||||
| tooltip | `boolean` | `true` | Whether to show tooltip. |
|
||||
| value | `number \| [number, number] \| null` | `undefined` | Value of the slider. |
|
||||
| on-update:value | `(value: number \| [number, number]) => void` | `undefined` | Callback on value update. |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Content
|
||||
|
||||
Add content into switch.
|
||||
Add switch content.
|
||||
|
||||
```html
|
||||
<n-switch>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Customize Checked Value
|
||||
|
||||
Use `checked-value` and `unchecked-value` to customize value.
|
||||
Use `checked-value` and `unchecked-value` to customize respective values.
|
||||
|
||||
```html
|
||||
<n-switch
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Switch
|
||||
|
||||
I have a Nintendo Switch, but have no time to play. It always make me recall the time when I played NDS, childhood is a happy time.
|
||||
I have a Nintendo Switch, but don't have time to play it. This reminds me of my childhood when I played NDS... a happier time.
|
||||
|
||||
## Demos
|
||||
|
||||
@ -17,20 +17,20 @@ customize-value
|
||||
|
||||
### Switch Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| checked-value | `string \| boolean \| number` | `true` | Value of checked status. |
|
||||
| default-value | `boolean` | `false` | Default value in uncontrolled mode. |
|
||||
| disabled | `boolean` | `false` | Whether to disable the switch. |
|
||||
| loading | `boolean` | `false` | Whether to show loading status. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of switch. |
|
||||
| value | `boolean` | `undefined` | Value in controlled mode. |
|
||||
| unchecked-value | `string \| boolean \| number` | `false` | Value of unchecked status. |
|
||||
| on-update:value | `(value: boolean) => void` | `undefined` | Callback when the component's value changes. |
|
||||
| Name | Type | Default | Description |
|
||||
| --------------- | -------------------------------- | ----------- | -------------------------------------------- |
|
||||
| checked-value | `string \| boolean \| number` | `true` | Value of checked state. |
|
||||
| default-value | `boolean` | `false` | Default value. |
|
||||
| disabled | `boolean` | `false` | Whether to disable the switch. |
|
||||
| loading | `boolean` | `false` | Whether to show loading state. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of the switch. |
|
||||
| value | `boolean` | `undefined` | Value when being set manually. |
|
||||
| unchecked-value | `string \| boolean \| number` | `false` | Value of unchecked state. |
|
||||
| on-update:value | `(value: boolean) => void` | `undefined` | Callback when the component's value changes. |
|
||||
|
||||
### Switch Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| --------- | ---------- | --------------------------------------- |
|
||||
| checked | `()` | Content when the switch is checked. |
|
||||
| unchecked | `()` | Content when the switch is not checked. |
|
||||
| Name | Parameters | Description |
|
||||
| --------- | ---------- | ------------------------------------- |
|
||||
| checked | `()` | Content when the switch is checked. |
|
||||
| unchecked | `()` | Content when the switch is unchecked. |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user