-
Notifications
You must be signed in to change notification settings - Fork 28
docs: add english document #17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
elonehoo
wants to merge
25
commits into
ecomfe:master
Choose a base branch
from
elonehoo:master
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
25 commits
Select commit
Hold shift + click to select a range
fd29bfc
chore: remove yarn.lock
elonehoo 9544d10
docs: update docs
elonehoo 4b56b79
feat: add english documentation for accordion
elonehoo 247451a
Merge branch 'ecomfe:master' into master
elonehoo 916dd9d
docs:add anchor
elonehoo b8dcf9e
docs: update docs
elonehoo 943fcbd
docs: add offset en vue
elonehoo 3ac14b3
docs: remove component name of api area
elonehoo 59a9597
docs: update docs
elonehoo 159e32c
docs: remove offset
elonehoo f8cfe22
docs: update docs
elonehoo 6d0b7e6
docs: add autocomplete
elonehoo 28de4eb
docs: update docs
elonehoo c38016a
docs: add badge
elonehoo bc83e82
Merge branch 'ecomfe:master' into master
elonehoo 4613500
Merge branch 'master' of https://github.com/xiaoxunyao/veui-docs
elonehoo ba9872d
docs: remove yarn
elonehoo 0e148aa
docs: update docs
elonehoo 7d96762
docs: update docs
elonehoo 26d41bd
docs: add cascader
elonehoo 1e3c074
docs: refine english translation
Justineo c2e7d36
Merge branch 'ecomfe:master' into master
elonehoo 6d6cfc5
docs: docs update
elonehoo 5dd4b0a
docs: docs update
elonehoo 0f7ef86
docs: update docs
elonehoo File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
# Accordion | ||
|
||
:::tip | ||
The `Accordion` component needs to be used by the inline [`Collapse`](./collapse) component. | ||
::: | ||
|
||
## Demos | ||
|
||
### Size variants | ||
|
||
Available size variants for the [`ui`](#props-ui) prop: `s` / `m`. | ||
|
||
[[ demo src="/demo/accordion/size.vue" ]] | ||
|
||
### Style | ||
|
||
Use the [`ui`](#props-ui) property to apply style variants. | ||
|
||
[[ demo src="/demo/accordion/variant.vue" ]] | ||
|
||
### Multiple | ||
|
||
Use the [`multiple`](#props-multiple) property to allow multiple panels to be expanded at the same time. | ||
|
||
[[ demo src="/demo/accordion/multiple.vue" ]] | ||
|
||
### Icon position | ||
|
||
Use the [`toggle-position`](#props-toggle-position) property to set the position of the toggle icon. | ||
|
||
[[ demo src="/demo/accordion/position.vue" ]] | ||
|
||
## API | ||
|
||
### Props | ||
|
||
| Name | Type | Default | Description | | ||
| -- | -- | -- | -- | | ||
| ``ui`` | `string=` | - | [^ui] | | ||
| ``multiple`` | `boolean=` | `false` | Whether to allow multiple panels to be expanded at the same time. | | ||
| ``disabled`` | `boolean=` | `false` | Whether accordion is disabled. | | ||
| ``expanded`` | `string | Array<string>` | - | [^expanded] | | ||
| ``toggle-position`` | `string` | `'start'` | [^toggle-position] | | ||
|
||
^^^ui | ||
Style variants. A space-separated enum list. Only one of `simple` / `basic` / `strong` can be used. The default style will be used if not set. Only one of `bordered` / `borderless` can be used. | ||
|
||
+++Enum | ||
| Value | Description | | ||
| -- | -- | | ||
| `simple` | Simple style. | | ||
| `basic` | Basic style. | | ||
| `strong` | Strong style. | | ||
| `bordered` | Bordered style. | | ||
| `borderless` | Borderless style. | | ||
| `dull` | The title area does not change style in response to mouse interaction. | | ||
| `s` | Small size style. | | ||
| `m` | Medium size style. | | ||
+++ | ||
^^^ | ||
|
||
^^^expanded | ||
:::badges | ||
`.sync` | ||
::: | ||
|
||
The identifier of the expanded accordion panels, corresponding to the [`name`](./collapse#props-name) properties of the inline `Collapse` components. When `multiple` is `true`, it is an array of accordion panel identifiers. | ||
^^^ | ||
|
||
^^^toggle-position | ||
The position of the toggle icon. | ||
|
||
+++Enum | ||
| Value | Description | | ||
| -- | -- | | ||
| `start` | The toggle icon is at the start position. Default value. | | ||
| `end` | The toggle icon is at the end position. | | ||
| `none` | Do not show the toggle icon. | | ||
+++ | ||
^^^ | ||
|
||
### Slots | ||
|
||
| Name | Description | | ||
| -- | -- | | ||
| ``default`` | The content area, which is used to place inline `Collapse` components. | | ||
|
||
### Events | ||
|
||
| Name | Description | | ||
| -- | -- | | ||
| ``toggle`` | [^toggle] | | ||
|
||
^^^toggle | ||
Triggered when clicking on the internal panel title to trigger expand/collapse. The callback parameters are `(expand: boolean, name: string, expanded)`. | ||
|
||
+++Props | ||
| Name | Type | Description | | ||
| -- | -- | -- | | ||
| `expand` | `boolean` | Whether to expand the collapsible panel. | | ||
| `name` | `string` | The name of the collapsible panel. | | ||
| `expanded` | `string | Array<string>` | Identifiers of all currently expanded accordion panel. | | ||
+++ | ||
^^^ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
# Anchor | ||
|
||
## Demos | ||
|
||
### Basic anchor | ||
|
||
Use the [`container`](#props-container) prop to set the container where scrolling occurs. When the `Anchor` component is not in the container (i.e. it does not scroll with the container), there's no need to set the [`sticky`](#props-sticky ) prop. | ||
|
||
[[ demo src="/demo/anchor/normal.vue" ]] | ||
|
||
### Sticky anchor | ||
|
||
When the `Anchor` component is in the container (rolling with the container), the [`sticky`](#props-sticky) prop can be set to control the attachment of the component when it scrolls out of the container. | ||
|
||
[[ demo src="/demo/anchor/sticky.vue" ]] | ||
|
||
### Specify offset | ||
|
||
Use the [`target-offset`](#props-target-offset) prop to control where the anchor scrolls into the container and becomes active. | ||
|
||
Use the [`sticky-offset`](#props-sticky-offset) prop to control where in the container the `Anchor` starts to attach. | ||
|
||
[[ demo src="/demo/anchor/offset.vue" ]] | ||
|
||
## API | ||
|
||
### Props | ||
|
||
| Name | Types | Default | Description | | ||
| -- | -- | -- | -- | | ||
| ``items`` | `Array<{value, label, children}>` | `[]` | [^items] | | ||
| ``sticky`` | `boolean=` | `false` | Whether to apply sticky effect. | | ||
| ``container`` | `string | HTMLElement | Window=` | - | The container which the `Anchor` component attaches to and checks active state against. | | ||
| ``target-offset`` | `string | number=` | `0` | When an anchor is at the `target-offset` position of the container, then the corresponding anchor link is active. The numeric type value is a `px` value, or a percentage string such as `'10%'` can also be used, which will be calculated based on the height of the `container`. | | ||
| ``sticky-offset`` | `string | number=` | `0` | For a sticky `Anchor`, when the container scrolls to the `sticky-offset` position, then the `Anchor` starts to attach. Different value types have the same meaning as the [`target-offset`](#props-target-offset) prop. | | ||
|
||
^^^items | ||
The datasource array. The type of each item is `{label, value, children, ...}`. | ||
|
||
+++Properties | ||
| Name | Type | Description | | ||
| -- | -- | -- | | ||
| `label` | `string` | The descriptive labe of the item. | | ||
| `value` | `string` | The value of the item, usually an in-page hash, such as `#button`. | | ||
| `children` | `Array<Object>=` | The children array of the item, with the same type as the [`items`](#props-items) array item. | | ||
+++ | ||
^^^ | ||
|
||
### Slots | ||
|
||
| Name | Description | | ||
| -- | -- | | ||
| ``item`` | [^slot-item] | | ||
| ``item-label`` | [^slot-item-label] | | ||
|
||
^^^slot-item | ||
Renders each anchor link. | ||
|
||
Default content: anchor link. | ||
|
||
See the [`items`](#props-items) prop for scope properties details. | ||
^^^ | ||
|
||
^^^slot-item-label | ||
Renders the label of each anchor link. | ||
|
||
Default content: the `label` of the anchor link. | ||
|
||
See the [`items`](#props-items) prop for scope properties details. | ||
^^^ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,138 @@ | ||
# Autocomplete | ||
|
||
## Demos | ||
|
||
### Basic Trigger | ||
|
||
Set [`suggest-trigger`](#props-suggest-trigger) specify trigger suggestions. | ||
|
||
[[ demo src="/demo/autocomplete/normal.vue" ]] | ||
|
||
### Strict | ||
|
||
Set [`strict`](#props-strict) property to strict mode. If the input value does not exactly match the recommended value, the input value will be cleared when the focus is out of focus. | ||
|
||
[[ demo src="/demo/autocomplete/strict.vue" ]] | ||
|
||
### Custom Search | ||
|
||
Set [`match`](#props-match) property to customize the highlighting logic; Set [`filter`](#props-filter) property to customize the search hit logic. | ||
|
||
:::tip | ||
`match` is used to highlight the logic of matching text; while `filter` is to control whether it is hit or not. By default, `filter` will filter out nodes are not matched by `match`, and will include non-leaf nodes. If you want all leaf nodes in the search results, you can filter out non-leaf nodes by rewriting `filter`. | ||
::: | ||
|
||
[[ demo src="/demo/autocomplete/custom.vue" ]] | ||
|
||
## API | ||
|
||
### Props | ||
|
||
| Name | Type | Default | Description | | ||
| -- | -- | -- | -- | | ||
| ``datasource`` | `Array<string | Object>=` | `[]` | [^datasource] | | ||
| ``value`` | `*` | - | [^prop-value] | | ||
| ``disabled`` | `boolean=` | `false` | Whether disabled state. | | ||
| ``readonly`` | `boolean=` | `false` | Whether read only status. | | ||
| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | Supports custom highlighting logic, and matches case-insensitive substrings by default. | | ||
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | Support custom search hit logic. | | ||
| ``suggest-trigger`` | `string | Array<string>=` | `'input'` | Trigger the suggestion drop-down panel, the available values are: `'input'`, `'focus'`. | | ||
| ``expanded`` | `boolean=` | `false` | [^expanded] | | ||
| ``placeholder`` | `string=` | - | Placeholder. | | ||
| ``clearable`` | `boolean=` | `false` | Whether clear button is displayed. | | ||
| ``composition`` | `boolean=` | `false` | Whether perceive value of input method input process. | | ||
| ``select-on-focus`` | `boolean=` | `false` | Whether to automatically select the input box text when focused. | | ||
| ``maxlength`` | `number=` | - | The length of the input string is limited. | | ||
| ``strict`` | `boolean=` | `false` | Maximum input length. | | ||
| ``get-length`` | `function(string): number=` | Customize character length calculation function. | | ||
| ``trim`` | `boolean | string=` | `false` | [^trim] | | ||
| ``autofocus`` | `boolean=` | `false` | Focus automatically. | | ||
|
||
^^^datasource | ||
Data source array, item is `Object`, field is `{label, value, children, ...}`. | ||
|
||
+++Field | ||
| Name | Type | Description | | ||
| -- | -- | -- | | ||
| `label` | `string` | Text description of the node. | | ||
| `value` | `string` | Value corresponding to the node is generally an in-page hash, such as `#button`. | | ||
| `children` | `Array<Object>=` | Child node array of the node, Array item type is the same as the [`items`](#props-items) array item. | | ||
+++ | ||
^^^ | ||
|
||
^^^prop-value | ||
:::badges | ||
`v-model` | ||
::: | ||
|
||
Selected value. | ||
^^^ | ||
|
||
^^^expanded | ||
:::badges | ||
`.sync` | ||
::: | ||
|
||
Whether the panel should be expanded (if there is no option in `suggestions`, panel will be closed even if it is `true`). | ||
^^^ | ||
|
||
^^^trim | ||
Remove before and after spaces. When it is `true`, the before and after spaces will be removed; when it is `false`, the before and after spaces will not be removed. When it is set to a string, it will be removed in the specified way. | ||
|
||
+++Enum | ||
| Value | Description | | ||
| -- | -- | | ||
| `both` | Remove spaces at both ends. Equivalent to the behavior when `true`. | | ||
| `start` | Remove front space. | | ||
| `end` | Remove end spaces. | | ||
+++ | ||
^^^ | ||
|
||
### Slots | ||
|
||
| Name | Description | | ||
| -- | -- | | ||
| ``suggestions`` | [^slot-suggestions] | | ||
| ``option-label`` | [^slot-option-label] | | ||
|
||
^^^slot-suggestions | ||
|
||
Pull down to suggest the panel slot. | ||
|
||
+++Scopes | ||
| Name | Type | Description | | ||
| -- | -- | -- | | ||
| `datasource` | `Array<string | Object>` | data source, type is the same as the [`datasource`](#props-datasource) property. | | ||
| `keyword` | `string` | Search keyword. | | ||
+++ | ||
^^^ | ||
|
||
^^^slot-option-label | ||
|
||
Option slot in the drop down panel. | ||
|
||
+++Scopes | ||
| Name | Type | Description | | ||
| -- | -- | -- | | ||
| `label` | `string` | Node copy used to display, if doesn't exist, it will take `value`. | | ||
| `value` | `string` | Actually select the value. | | ||
| `matches` | `Array<{text: string, matched: boolean}>` | Case of matching, a node may be divided into multiple texts, `text` indicates the text, and `matched` indicates whether the text matches. | | ||
+++ | ||
^^^ | ||
|
||
### Events | ||
|
||
| Name | Description | | ||
| -- | -- | | ||
| ``input`` | [^event-input] | | ||
| ``select`` | Triggered when suggestion is adopted, the parameter is current value. | | ||
| ``toggle`` | Triggered when expanded state of prompt panel is switched, callback parameter is `(expanded: boolean)`. `expanded` indicates whether operation will trigger prompt panel to expand or collapse. | | ||
| ``clear`` | Triggers when current value is cleared. | | ||
|
||
^^^event-input | ||
:::badges | ||
`v-model` | ||
::: | ||
|
||
Event will be triggered when inputting in `input` or selecting a value in drop down panel. Parameter is current input value or the `value` of selected item when selected. | ||
^^^ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
# Badge | ||
|
||
## Demos | ||
|
||
### Text badge | ||
|
||
Badge content can be text. | ||
|
||
[[ demo src="/demo/badge/text.vue" ]] | ||
|
||
### Numeric badge | ||
|
||
The content can also be a number and can be can be displayed as “<var>max</var>+” when exceeding the maximum value. | ||
|
||
[[ demo src="/demo/badge/number.vue" ]] | ||
|
||
### Corner badge | ||
|
||
When no badge content is provided, the badge will be displayed in the upper right corner in a dot style. | ||
|
||
[[ demo src="/demo/badge/corner-dot.vue" ]] | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 少了个标题,Dot badge 吧 |
||
### Dot badge | ||
|
||
When no slot content is provided, the badge will be displayed in a dot style. | ||
|
||
[[ demo src="/demo/badge/dot.vue" ]] | ||
|
||
## API | ||
|
||
### Props | ||
|
||
| Name | Type | Default | Description | | ||
| -- | -- | -- | -- | | ||
| ``type`` | `string=` | `'error'` | [^type] | | ||
| ``value`` | `string | number` | - | The badge content value. When it is of type `number`, it is limited by the [`max`](#props-max) prop. `max` is ignored when it is of type `string`. | | ||
| ``max`` | `number=` | `badge.max` | The maximum value of the badge, when `value` exceeds this value, the badge content will be displayed as “<var>max</var>+”. Ignored when `value` is `string`. | | ||
| ``hidden`` | `boolean=` | `false` | Whether the badge is hidden. | | ||
|
||
^^^type | ||
The status type of the badge. The optional values for built-in styles are as follows. When using other values, you need to define the styles for `.veui-badge-{type}`. | ||
|
||
+++Enum | ||
| Value | Description | | ||
| -- | -- | | ||
| `info` | Info style. | | ||
| `success` | Success style. | | ||
| `warning` | Warning style. | | ||
| `error` | Error style. | | ||
| `aux` | Aux style. | | ||
+++ | ||
^^^ | ||
|
||
### Slots | ||
|
||
| Name | Description | | ||
| -- | -- | | ||
| ``default`` | The target content that the badge needs to display upon. | |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.