taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add link for individual props/events/slots/configs/icons

Browse Source
This commit is contained in:
Justineo
2021-10-20 01:11:27 +08:00
parent df2b6892d2
commit b0dcdbb873
162 changed files with 2176 additions and 2073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
one/docs/en-US/components/select.md
View File

@@ -8,7 +8,7 @@
### Size variants
Available size variants for the `ui` prop: `xs`/`s`/`m`/`l`.
Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l`.
[[ demo src="/demo/select/size.vue" ]]
@@ -20,13 +20,13 @@ Can be used with embedded `OptionGroup`s & `Option`s.
### Searchable options
Use the `searchable` prop to make options searchable.
Use the [`searchable`](#props-searchable) prop to make options searchable.
[[ demo src="/demo/select/searchable.vue" ]]
### Multiple selections
Use the `multiple` prop to enable multiple selections.
Use the [`multiple`](#props-multiple) prop to enable multiple selections.
[[ demo src="/demo/select/multiple.vue" ]]
@@ -36,20 +36,20 @@ Use the `multiple` prop to enable multiple selections.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `options` | `Array<Object>` | `-` | [^options] |
| `value` | `Array<*>|*` | - | [^value] |
| `multiple` | `boolean` | `false` | Whether users can select multiple items. |
| `max` | `number` | - | The max items users can select. |
| `placeholder` | `string` | `select.placeholder` | Placeholder text when no option is selected. |
| `clearable` | `boolean` | `false` | Whether the select is clearable. |
| `searchable` | `boolean` | `false` | Whether the options are searchable. |
| `filter` | `function` | - | Filter function for the options. The type is `function(option: Object): boolean`. The type of `option` is the same as the `options` prop. The return value denotes whether the option is shown inside the options dropdown. |
| `expanded` | `boolean=` | `false` | [^expanded] |
| `disabled` | `boolean=` | `false` | Whether the select is disabled. |
| `readonly` | `boolean=` | `false` | Whether the select is read-only. |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| ``ui`` | `string=` | - | [^ui] |
| ``options`` | `Array<Object>` | `-` | [^options] |
| ``value`` | `Array<*>|*` | - | [^value] |
| ``multiple`` | `boolean` | `false` | Whether users can select multiple items. |
| ``max`` | `number` | - | The max items users can select. |
| ``placeholder`` | `string` | `select.placeholder` | Placeholder text when no option is selected. |
| ``clearable`` | `boolean` | `false` | Whether the select is clearable. |
| ``searchable`` | `boolean` | `false` | Whether the options are searchable. |
| ``filter`` | `function` | - | Filter function for the options. The type is `function(option: Object): boolean`. The type of `option` is the same as the [`options`](#props-options) prop. The return value denotes whether the option is shown inside the options dropdown. |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | Whether the select is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the select is read-only. |
| ``overlay-class`` | `string | Array | Object=` | - | See the [`overlay-class`](./overlay#props-overlay-class) prop of the [`Overlay`](./overlay) component. |
| ``overlay-style`` | `string | Array | Object=` | - | See the [`overlay-style`](./overlay#props-overlay-style) prop of the [`Overlay`](./overlay) component. |
^^^ui
Style variants.
@@ -71,7 +71,7 @@ The list of options with the option type being `{label, value, options, disabled
| -- | -- | -- |
| `label` | `string` | The descriptive label of the option. |
| `value` | `*` | The value of the option. |
| `options` | `Array<Object>=` | The child options of current option. The item type is the same as the items of the `options` prop. |
| `options` | `Array<Object>=` | The child options of current option. The item type is the same as the items of the [`options`](#props-options) prop. |
| `disabled` | `boolean=` | Whether the option is disabled. |
+++
^^^
@@ -96,14 +96,14 @@ Whether the dropdown menu is expanded.
| Name | Description |
| -- | -- |
| `default` | The content of the options dropdown layer. Can be used to place `Option`s or `OptionGroups`s when the `options` prop is not specified. |
| `before` | [^slot-before] |
| `after` | The content after the options in the dropdown layer. No default content. |
| `label` | [^slot-label] |
| `group-label` | [^slot-group-label] |
| `option-label` | [^slot-option-label] |
| `option` | [^slot-option] |
| `trigger` | [^slot-trigger] |
| ``default`` | The content of the options dropdown layer. Can be used to place `Option`s or `OptionGroups`s when the [`options`](#props-options) prop is not specified. |
| ``before`` | [^slot-before] |
| ``after`` | The content after the options in the dropdown layer. No default content. |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``trigger`` | [^slot-trigger] |
^^^slot-before
The content before the options in the dropdown layer. No default content.
@@ -182,7 +182,7 @@ The entire drop-down trigger area. Displays the select input by default.
+++Scope properties
| Name | Type | Description |
| --- | --- | --- |
| `attrs` | `Object` | Attributes that need to be output to the trigger element, including `aria-*`/`disabled`, etc., can be output using `v-bind="attrs"`. |
| `attrs` | `Object` | Attributes that need to be output to the trigger element, including `aria-*` / `disabled`, etc., can be output using `v-bind="attrs"`. |
| `value` | `*` | The value of the selected option. |
| `select` | `function(value: *): void` | To select a specified value. |
| `handlers` | `Object` | [^handlers-desc] |
@@ -203,8 +203,8 @@ The element used to bind `handlers` needs to support focus acquisition so that v
| Name | Description |
| -- | -- |
| `change` | [^event-change] |
| `toggle` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown menu is to be expanded or collapsed. |
| ``change`` | [^event-change] |
| ``toggle`` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown menu is to be expanded or collapsed. |
^^^event-change
:::badges
@@ -214,11 +214,11 @@ The element used to bind `handlers` needs to support focus acquisition so that v
Triggers when the selected option changed. The callback parameter list is `(value: *)` and `value` is the value of the selected option.
^^^
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `select.placeholder` | `string` | `@@select.placeholder` | The placeholder text when no option is selected. |
| ``select.placeholder`` | `string` | `@@select.placeholder` | The placeholder text when no option is selected. |
:::tip
`@@` prefixed values denote corresponding properties in the locale settings.
@@ -228,5 +228,5 @@ Triggers when the selected option changed. The callback parameter list is `(valu
| Name | Description |
| -- | -- |
| `expand` | Expand the dropdown layer. |
| `collapse` | Collapse the dropdown layer. |
| ``expand`` | Expand the dropdown layer. |
| ``collapse`` | Collapse the dropdown layer. |