test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: update skeleton doc (#1863)

Browse Source
This commit is contained in:
0song 2021-04-20 10:43:45 +08:00 committed by GitHub
parent 0d676acbc2
commit 910f38ef38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
website/docs/en-US/skeleton.md
View File

@ -169,6 +169,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
<el-card
:body-style="{ padding: '0px', marginBottom: '1px' }"
v-for="item in lists"
:key="item.name"
>
<img :src="item.imgUrl" class="image multi-content" />
<div style="padding: 14px;">

9
website/docs/es/skeleton.md
View File

@ -1,6 +1,6 @@
## Skeleton
When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
### Basic usage
@ -39,7 +39,7 @@ We have provided a switch flag indicating whether showing the loading animation,
:::
### Customized Template
### Customized Template
ElementPlus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
@ -136,7 +136,7 @@ export default defineComponent({
### Rendering a list of data
Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
:::tip
@ -169,6 +169,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
<el-card
:body-style="{ padding: '0px', marginBottom: '1px' }"
v-for="item in lists"
:key="item.name"
>
<img :src="item.imgUrl" class="image multi-content" />
<div style="padding: 14px;">
@ -298,7 +299,7 @@ export default defineComponent({
| Attribute | Description | Type | Acceptable Value | Default Value |
| ------- | ---------------- | ------- | ------------ | ------ |
| animated | whether showing the animation | boolean | true / false | false |
| animated | whether showing the animation | boolean | true / false | false |
| count | how many fake items to render to the DOM | number | integer | 1 |
| loading | whether showing the real DOM | boolean | true / false | false |
| rows | numbers of the row, only useful when no template slot were given | number | integer | 3 |

9
website/docs/fr-FR/skeleton.md
View File

@ -1,6 +1,6 @@
## Skeleton
When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
### Basic usage
@ -39,7 +39,7 @@ We have provided a switch flag indicating whether showing the loading animation,
:::
### Customized Template
### Customized Template
ElementPlus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
@ -136,7 +136,7 @@ export default defineComponent({
### Rendering a list of data
Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
:::tip
@ -169,6 +169,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
<el-card
:body-style="{ padding: '0px', marginBottom: '1px' }"
v-for="item in lists"
:key="item.name"
>
<img :src="item.imgUrl" class="image multi-content" />
<div style="padding: 14px;">
@ -298,7 +299,7 @@ export default defineComponent({
| Attribute | Description | Type | Acceptable Value | Default Value |
| ------- | ---------------- | ------- | ------------ | ------ |
| animated | whether showing the animation | boolean | true / false | false |
| animated | whether showing the animation | boolean | true / false | false |
| count | how many fake items to render to the DOM | number | integer | 1 |
| loading | whether showing the real DOM | boolean | true / false | false |
| rows | numbers of the row, only useful when no template slot were given | number | integer | 3 |

9
website/docs/jp/skeleton.md
View File

@ -1,6 +1,6 @@
## Skeleton
When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
### Basic usage
@ -39,7 +39,7 @@ We have provided a switch flag indicating whether showing the loading animation,
:::
### Customized Template
### Customized Template
ElementPlus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
@ -136,7 +136,7 @@ export default defineComponent({
### Rendering a list of data
Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
:::tip
@ -169,6 +169,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
<el-card
:body-style="{ padding: '0px', marginBottom: '1px' }"
v-for="item in lists"
:key="item.name"
>
<img :src="item.imgUrl" class="image multi-content" />
<div style="padding: 14px;">
@ -298,7 +299,7 @@ export default defineComponent({
| Attribute | Description | Type | Acceptable Value | Default Value |
| ------- | ---------------- | ------- | ------------ | ------ |
| animated | whether showing the animation | boolean | true / false | false |
| animated | whether showing the animation | boolean | true / false | false |
| count | how many fake items to render to the DOM | number | integer | 1 |
| loading | whether showing the real DOM | boolean | true / false | false |
| rows | numbers of the row, only useful when no template slot were given | number | integer | 3 |