mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(auto-complete, cascader, color-picker, checkbox): en (#915)

Browse Source 
* NAutocomplete

* NCascader

* NCheckbox

* NColorPicker

* Update index.demo-entry.md

* Update index.demo-entry.md

* Update index.demo-entry.md

* Update virtual.demo.md

* Update index.demo-entry.md

* Update basic.demo.md
This commit is contained in:
Keagan Chisnall 2021-08-20 02:46:50 +10:00 committed by GitHub
parent 6d2dcd2246
commit eb0bf0e22c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 57 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/auto-complete/demos/enUS/after-select.demo.md
View File

@ -1,6 +1,6 @@
# Actions After Select
Blur after selection or clear after selection.
Choose whether the element blurs after a selection is made with `blur-after-select`.
```html
<n-space vertical>

2
src/auto-complete/demos/enUS/custom-input.demo.md
View File

@ -1,6 +1,6 @@
# Custom Input Element
You can replace auto-complete's input element.
You can also replace the input element of the auto-complete component.
```html
<n-auto-complete

26
src/auto-complete/demos/enUS/index.demo-entry.md
View File

@ -1,6 +1,6 @@
# Auto Complete
Use as search hint or something similar.
Use as a search hint or something similar.
## Demos
@ -18,26 +18,26 @@ after-select
| --- | --- | --- | --- |
| blur-after-select | `boolean` | `false` | Whether to blur after selection. |
| clear-after-select | `boolean` | `false` | Whether to clear after selection. |
| clearable | `boolean` | `false` | Whether autocomplete is clearable. |
| clearable | `boolean` | `false` | Whether auto complete is clearable. |
| default-value | `string` | `null` | Default value of auto complete. |
| disabled | `boolean` | `false` | Whether the auto complete is disabled. |
| loading | `boolean` | `false` | Whether to show loading status. |
| options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | Options of the auto complete. |
| placeholder | `string` | `'Please Input'` | Auto complete's prompt information. |
| loading | `boolean` | `false` | Whether to show a loading status. |
| options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | Auto complete options. |
| placeholder | `string` | `'Please Input'` | Auto complete's placeholder. |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Auto complete size. |
| value | `string` | `undefined` | Value of auto complete in controlled mode. |
| on-blur | `(event: FocusEvent) => void` | `undefined` | Callback function triggered on blur. |
| on-focus | `(event: FocusEvent) => void` | `undefined` | Callback function triggered on focus. |
| on-select | `(value: string) => void` | `undefined` | Callback function triggered when an option is selected. |
| on-update:value | `(value: string \| null) => void` | `undefined` | Callback function triggered when controllable data is updated. |
| value | `string` | `undefined` | Value of auto complete if being manually set. |
| on-blur | `(event: FocusEvent) => void` | `undefined` | On blur callback function. |
| on-focus | `(event: FocusEvent) => void` | `undefined` | On focus callback function. |
| on-select | `(value: string) => void` | `undefined` | On select callback function. |
| on-update:value | `(value: string \| null) => void` | `undefined` | On update callback function. |
### AutoCompleteOption Properties
| Name | Type | Description |
| -------- | --------- | ------------------------------ |
| disabled | `boolean` | Whether to disable the option. |
| label | `string` | Displayed label value. |
| value | `string` | Should be unique in options. |
| disabled | `boolean` | Whether the option is disabled. |
| label | `string` | Option label value. |
| value | `string` | Option ID (should be unique). |
### AutoCompleteGroupOption Properties

2
src/cascader/demos/enUS/action.demo.md
View File

@ -1,6 +1,6 @@
# Action Slot
Is there anybody needs action slot on cascader menu?
Is there anybody who needs an action slot on a cascader menu?
```html
<n-cascader

34
src/cascader/demos/enUS/index.demo-entry.md
View File

@ -1,6 +1,6 @@
# Cascader
Cascader can be used to select some tree structured data.
Cascader can be used to display and select tree structured data.
## Demos
@ -18,29 +18,29 @@ virtual
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| cascade | `boolean` | `true` | Whether to cascade checkbox when multiple. |
| cascade | `boolean` | `true` | Whether to cascade the checkbox selection onto children. |
| clearable | `boolean` | `false` | Whether the cascader is clearable. |
| default-value | `string \| number \| Array<number \| string> \| null` | `null` | Data selected by default in uncontrolled mode. |
| default-value | `string \| number \| Array<number \| string> \| null` | `null` | Data selected by default if no value is set. |
| disabled | `boolean` | `false` | Whether to disable the cascader. |
| expand-trigger | `'click' \| 'hover'` | `'click'` | If `remote` is set, `'hover'` won't work. |
| filterable | `boolean` | `false` | If `remote` is set, it won't work. |
| filterable | `boolean` | `false` | Note: If `remote` is set, this won't have any effect. |
| filter | `(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean` | A string based filter algorithm. | Filter function of the cascader. |
| leaf-only | `boolean` | `false` | If only allow value of leaf node to be in `value`. |
| 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 support multiple selection. |
| leaf-only | `boolean` | `false` | If only a leaf node can be selected `value`. |
| max-tag-count | `number \| 'responsive'` | `undefined` | Max tag count in multiple select mode. `responsive` will keep all the tags in single line. |
| multiple | `boolean` | `false` | Whether to allow multiple options being selected. |
| options | `Array<CascaderOption>` | required | Options of the cascader. |
| placeholder | `string` | `'Please Select'` | Prompt information. |
| placeholder | `string` | `'Please Select'` | Placeholder text. |
| remote | `boolean` | `false` | Whether to obtain data remotely. |
| separator | `string` | `' / '` | Option value separator. |
| show | `boolean` | `undefined` | Whether to show menu. |
| show-path | `boolean` | `true` | Whether to show path in selector. |
| separator | `string` | `' / '` | Selected option path value separator (used with `show-path`). |
| show | `boolean` | `undefined` | Whether to show the menu. |
| show-path | `boolean` | `true` | Whether to show the selected options as a path. |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Cascader size. |
| value | `string \| number \| Array<number \| string> \| null` | `undefined` | Value of the cascader in controlled mode. |
| value | `string \| number \| Array<number \| string> \| null` | `undefined` | Value of the cascader (if being set manually). |
| virtual-scroll | `boolean` | `true` | Whether to enable virtual scrolling. |
| on-blur | `() => void` | `undefined` | Callback on blurred. |
| on-focus | `() => void` | `undefined` | Callback on focused. |
| on-load | `(option: CascaderOption) => Promise<void>` | `undefined` | Callback when click unloaded node. Set `option.children` in the returned promise. Loading is end after the promise is resolved or rejected. |
| on-update:value | `(value: string \| number \| Array<string \| number> \| null) => void` | `undefined` | Callback executed when value changes. |
| on-load | `(option: CascaderOption) => Promise<void>` | `undefined` | Callback when a node is loaded. Set `option.children` in the returned promise. Loading will stop after the promise is resolved or rejected. |
| on-update:value | `(value: string \| number \| Array<string \| number> \| null) => void` | `undefined` | Callback executed when the value changes. |
## API
@ -50,11 +50,11 @@ virtual
| --------- | ------------------ | ------------------------------- |
| label | `string` | Label of the option. |
| value | `string \| number` | Value of the option. |
| disabled? | `boolean` | Whether this item is disabled. |
| children? | `CascaderOption` | The children data of this item. |
| disabled? | `boolean` | Whether this option is disabled. |
| children? | `CascaderOption` | The children options of this option. |
## Slots
| Name | Parameters | Description |
| ------ | ---------- | ---------------------------------------------------- |
| action | `()` | Action fill content displayed in the cascading menu. |
| action | `()` | Action content displayed in the cascading menu. |

2
src/cascader/demos/enUS/size.demo.md
View File

@ -1,6 +1,6 @@
# Size
Cascader has `small`, `medium` and `large` size.
Cascader has `small`, `medium` and `large` sizes.
```html
<n-space vertical>

4
src/cascader/demos/enUS/virtual.demo.md
View File

@ -1,8 +1,8 @@
# Large Data
Large data is ok. By default `virtual-scroll` is true, so the demo only wants to show you cascader work with large data.
Large datasets are ok. By default `virtual-scroll` is true, which is how cascader works with large sets of data.
In the example there are 5000 \* 2 \* 2 = 20000 entries.
In this example there are 5000 \* 2 \* 2 = 20000 entries.
```html
<n-space vertical>

2
src/checkbox/demos/enUS/grid.demo.md
View File

@ -1,6 +1,6 @@
# Grid
Use checkbox with grid.
Use checkboxes with a grid.
```html
<n-checkbox-group>

18
src/checkbox/demos/enUS/index.demo-entry.md
View File

@ -19,14 +19,14 @@ event
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| checked | `boolean` | `false` | Whether it is selected in the controlled mode. |
| default-checked | `boolean` | `false` | Whether selected by default in uncontrolled mode. |
| disabled | `boolean` | `false` | Whether to disable. |
| focusable | `boolean` | `true` | Whether to focus on selection. |
| indeterminate | `boolean` | `false` | Whether partly selected. |
| checked | `boolean` | `false` | Whether the checkbox is being checked manually. |
| default-checked | `boolean` | `false` | Whether the checkbox is checked by default. |
| disabled | `boolean` | `false` | Whether the checkbox is disabled. |
| focusable | `boolean` | `true` | Whether the checkbox gains focus after being checked. |
| indeterminate | `boolean` | `false` | Whether the checkbox can have a third indeterminate state. |
| label | `string` | `undefined` | Checkbox label. |
| value | `string \| number` | `undefined` | The value of the checkbox to be used in checkbox group. |
| on-update:checked | `(checked: boolean) => void` | `undefined` | Callback function triggered on checked status changes. |
| value | `string \| number` | `undefined` | The value of the checkbox to be used in a checkbox group. |
| on-update:checked | `(checked: boolean) => void` | `undefined` | Callback function triggered on a checked status change. |
### Checkbox Group Props
@ -36,8 +36,8 @@ event
| default-value | `Array<string \| number>` | `null` | Checkbox group's default selected value. |
| max | `number` | `undefined` | The maximum number of checkboxes that can be checked. |
| min | `number` | `undefined` | The minimum number of checkboxes that can be checked. |
| value | `Array<string \| number> \| null` | `undefined` | Controlled value of checkbox group. |
| on-update:value | `(value: string \| number)` | `undefined` | Callback when checkbox group's value changes. |
| value | `Array<string \| number> \| null` | `undefined` | Manually set values of a checkbox group. |
| on-update:value | `(value: string \| number)` | `undefined` | Callback when the checkbox group's value changes. |
## Slots

2
src/color-picker/demos/enUS/alpha.demo.md
View File

@ -1,6 +1,6 @@
# Alpha
Use `show-alpha` to control whether alpha channel can be adjusted.
Use `show-alpha` to control whether the alpha channel can be adjusted.
```html
<n-color-picker :show-alpha="false" />

2
src/color-picker/demos/enUS/basic.demo.md
View File

@ -1,6 +1,6 @@
# Basic
A basic color picker. Notice that if you choose a color from a mode, the new value will follow the mode.
A basic color picker. Note: when choosing a color in a particular mode, that's the mode that will be used.
```html
<n-color-picker />

2
src/color-picker/demos/enUS/form.demo.md
View File

@ -1,6 +1,6 @@
# Use with Form
It seems the example is useless. However since it's a data input component. I just put it here.
It seems this example is useless, but it's a data input component so I just left it here.
```html
<n-form :model="model">

14
src/color-picker/demos/enUS/index.demo-entry.md
View File

@ -1,6 +1,6 @@
# Color Picker
Compared with real world, its space is discrete.
Unlike the real world, these color values are discrete.
## Demos
@ -16,15 +16,15 @@ form
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| default-show | `boolean` | `undefined` | Whether to show panel by default. |
| default-show | `boolean` | `undefined` | Whether to show the color panel by default. |
| default-value | `string` | Black color value of 1st mode's corresponding value. | Default value of the picker. |
| modes | `Array<'rgb' \| 'hex' \| 'hsl' \| 'hsv'>` | `['rgb', 'hex', 'hsl']` | The value format of the picker. Notice that value will follow the mode once you select a new value from the picker. |
| to | `string \| HTMLElement` | `'body'` | Where to detach the panel. |
| show | `boolean` | `undefined` | Whether to show the panel. |
| show-alpha | `boolean` | `true` | Whether alpha can be adjusted. |
| to | `string \| HTMLElement` | `'body'` | Where to attach the panel to. |
| show | `boolean` | `undefined` | Whether the color panel is shown. |
| show-alpha | `boolean` | `true` | Whether the alpha channel can be adjusted. |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the picker. |
| value | `string \| null` | `undefined` | Value of the picker. |
| on-complete | `(value: string) => void` | `undefined` | Callback once the value is changed completely (not called during mousemove). |
| on-update:show | `(value: boolean) => void` | `undefined` | Callback once panel show status is changed. |
| on-update:show | `(value: boolean) => void` | `undefined` | Callback once panel the show status is changed. |
| on-update:value | `(value: string) => void` | `undefined` | Callback once the value is changed. |
| actions | `Array<'confirm'> \| null` | `null` | Show the type of button |
| actions | `Array<'confirm'> \| null` | `null` | The types of buttons to be shown in the panel. |

2
src/color-picker/demos/enUS/modes.demo.md
View File

@ -1,6 +1,6 @@
# Set Mode
Use `modes` to set available modes.
Use `modes` to set restrict the available modes.
```html
<n-color-picker :modes="['hex']" />