From 6ae7eb61eb69df62c757d8531fb439e7522384a9 Mon Sep 17 00:00:00 2001 From: Bbbtt04 <2393714045@qq.com> Date: Wed, 21 Sep 2022 17:29:53 +0800 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=A4=B4?= =?UTF-8?q?=E5=83=8F=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/en-US/components/avatar/index.md | 114 ++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 packages/devui-vue/docs/en-US/components/avatar/index.md diff --git a/packages/devui-vue/docs/en-US/components/avatar/index.md b/packages/devui-vue/docs/en-US/components/avatar/index.md new file mode 100644 index 0000000000..85be64da04 --- /dev/null +++ b/packages/devui-vue/docs/en-US/components/avatar/index.md @@ -0,0 +1,114 @@ +# Avatar + +Display user's avatar. + +#### When + +When users want to display their own profile avatar. + +### Basic Rules + +When the profile picture gadget transfers the name attribute, the profile picture field is displayed based on certain rules. For details, please see API. + +:::demo + +```vue + + + +``` + +::: + +### Basic Configuration + +The width, height, and whether the avatar is a circular can be set. In addition, the display fields of the avatar can be customized, and the customized image can be transferred. + +:::demo + +```vue + + + +``` + +::: + +### Special Display + +The avatar component processes some special situations, for example, the user does not exist or the default avatar is displayed. For details, please see API. + +:::demo + +```vue + + + +``` + +::: + +### Avatar Parameter + +| Parameter | Type | Default | Description | Jump to Demo | +| :---------- | :------------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------ | +| name | `string` | -- | Required. The input character string is used to create a profile picture. | [Basic Rules](#basic-rules) | +| gender | `string \| male \| female` | -- | Optional. The profile picture color is differentiated by gender. The input string can be in the format of
`female \| male` | [Basic Rules](#basic-rules) | +| width | `number` | 40 | Optional. Width of the avatar`px` | [Basic Configuration](#basic-configuration) | +| height | `number` | 40 | Optional. Set the height of the avatar`px` | [Basic Configuration](#basic-configuration) | +| is-round | `boolean` | true | Optional. Indicating whether to display a circular avatar | [Basic Configuration](#basic-configuration) | +| img-src | `string` | -- | Optional. Import a customized image as the avatar | [Basic Configuration](#basic-configuration) | +| custom-text | `string` | -- | Optional. Input the customized display text | [Basic Configuration](#basic-configuration) | + +### Other Instructions + +#### Basic Profile Picture Display Rules + +- `Begin with Chinese`: Use the last two characters. +- `Begin with English`: Use the first two characters. +- `Use multiple English names together`: Use the first two letters of the first English name. +- `Not starting with Chinese or English`: Use the first two characters. + +#### Basic Profile Picture Display Rules + +- If`name`，`customText`，`imgSrc`are not transferred, the user who uses the avatar does not exist. + +- If the values of`name`，`customText`，`imgSrc` are empty, the user who uses the avatar does not have a nickname and the default avatar is used. + +#### Display Priority + +imgSrc > customText > name From 643a7d951c831c9c522307ea8c06df2ebfc3ae2d Mon Sep 17 00:00:00 2001 From: Bbbtt04 <89759610+Bbbtt04@users.noreply.github.com> Date: Fri, 23 Sep 2022 10:05:40 +0800 Subject: [PATCH 2/2] Update packages/devui-vue/docs/en-US/components/avatar/index.md Co-authored-by: Kagol --- packages/devui-vue/docs/en-US/components/avatar/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/docs/en-US/components/avatar/index.md b/packages/devui-vue/docs/en-US/components/avatar/index.md index 85be64da04..37c0accdfe 100644 --- a/packages/devui-vue/docs/en-US/components/avatar/index.md +++ b/packages/devui-vue/docs/en-US/components/avatar/index.md @@ -2,7 +2,7 @@ Display user's avatar. -#### When +#### When to Use When users want to display their own profile avatar.