element-plus/docs/en-US/component/loading.md
jeremywu c6bed151a5
epic(website): refactor website (#3426)
* feat(website): init viteperss (#3162)

* init vitepress

* Finish homepage

* relayout page

* partial finish

* update

* update use lang

* remove font weight; change font size

* docs: optimize docs folder structure

* reorganize project

* fix ssr issue

* fix build issues

Co-authored-by: Kevin <sxzz@sxzz.moe>
Co-authored-by: zouhang <zouhang@didiglobal.com>

* feat(website) integrate with crowdin (#3218)

- Introduce Crowdin CLI
- Add script for fetching Crowdin token from env
- Add script for local development

* fix formatting

* update codeblocks (#3249)

* feat(docs): update website preview script

- Update azure preview build script
- Eliminate dead links

* bootstrap docs

* fix homepage layout issue

* fix formating

* Finish ToC and codepen integration

* reorganized files and fix issue that causes demo unavailable after build

* feat(docs): migration documentations (#3283)

* feat(docs): migration documentations

- Move documentations to docs/

* remove unused files

* docs: [popconfirm] migrate document (#3285)

* feat(docs): migrate documentation from space.md to upload.md (#3292)

- Upload documentations acorrodingly

* docs: [date-picker] migrate document  (#3289)

* docs: [date-picker] migrate document

* fix: typo

* docs: [slider] migrate document (#3287)

* docs: migrate documents (#3290)

* docs: migrate-datetime-picker

* docs: migrate descriptions

* docs: migrate dialog

* docs: migrate divider

* docs: migrate drawer

* docs: migrate drapdown

* docs: fix drapdown

* docs: migrate empty

* docs: migrate form

* docs: add scoped for style

* docs: simplify toRefs

* chore: update doc (#3297)

* chore: update doc

* chore: update doc

* chore: update doc

* feat(docs): migrate documentations from infinite-scroll to page-header (#3303)

- Update docs accordingly
- Update CodePen icon to match style
- Update component name to match others

* docs: migrate documentions (#3293)

migrate list:
* image
* popover
* scrollbar
* radio
* rate
* skeleton
* select
* select-v2
* reault
* progress
* pagination

* chore: update doc (#3305)

Co-authored-by: 0song <0song@gmail.com>

* Fix broken pipeline

* chore: update demo plugin

* website perfection

* fix hydration bug

* docs: update guide (#3342)

* WIP docs

* docs: update docs

* add dark mode

* make dev fetch components from local instead of node_modules

Co-authored-by: msidolphin <msidolphin@outlook.com>
Co-authored-by: Aex <spryti@qq.com>
Co-authored-by: 0song <82012629+0song@users.noreply.github.com>
Co-authored-by: 0song <0song@gmail.com>
Co-authored-by: zouhang <zouhang@didiglobal.com>
Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

* fix(docs): fix codepen code example issue (#3380)

* fix(docs): fix codepen code example issue

- Add lang="ts" for all example files
- Fix codepen import error

* revert changes in resource.vue

* feat(docs): complete crowdin integration (#3408)

* Update mds for preparing the integration script

* deprecate old website

* update sponsors and even handler for resize

* update build script for preview

* fix preview-build error

* fix preview-build error

* fix preview-build error

* fix preview-build error

* fix preview-build error

* update deploy script and some bugs

* Fix existing issue

* chore(project): add dev preview workflow

* chore(project): rename dev to staging

* update the size of toc

* update staging-preview script

* update preview scripts

* enable website build for preview

* fix build error

* final commitment for update the details

* remove azure pipeline

* move docs ignores into docs and update date

Co-authored-by: Kevin <sxzz@sxzz.moe>
Co-authored-by: zouhang <zouhang@didiglobal.com>
Co-authored-by: msidolphin <msidolphin@outlook.com>
Co-authored-by: Aex <spryti@qq.com>
Co-authored-by: 0song <82012629+0song@users.noreply.github.com>
Co-authored-by: 0song <0song@gmail.com>
2021-09-17 00:18:50 +08:00

98 lines
5.9 KiB
Markdown

# Loading
Show animation while loading data.
## Loading inside a container
Displays animation in a container (such as a table) while loading data.
:::demo Element Plus provides two ways to invoke Loading: directive and service. For the custom directive `v-loading`, you just need to bind a `boolean` value to it. By default, the loading mask will append to the element where the directive is used. Adding the `body` modifier makes the mask append to the body element.
loading/basic
:::
## Customization
You can customize loading text, loading spinner and background color.
:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, the `element-loading-spinner`, `element-loading-background`, and `element-loading-svg` attributes are used to set the icon class name, background color value, and loading icon, respectively.
loading/customization
:::
:::warning
Although the `element-loading-svg` attribute supports incoming HTML fragments, it is very dangerous to dynamically render arbitrary HTML on the website, because it is easy to cause [XSS attack](https://en.wikipedia.org/wiki/Cross-site_scripting). Please make sure that the content of `element-loading-svg` is trustworthy. **Never** assign user-submitted content to the `element-loading-svg` attribute.
:::
## Full screen loading
Show a full screen animation while loading data.
:::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default.
loading/fullscreen
:::
## Service
You can also invoke Loading with a service. Import Loading service:
```ts
import { ElLoading } from 'element-plus'
```
Invoke it:
```ts
ElLoading.service(options)
```
The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method:
```ts
const loadingInstance = ElLoading.service(options)
nextTick(() => {
// Loading should be closed asynchronously
loadingInstance.close()
})
```
Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:
```ts
const loadingInstance1 = ElLoading.service({ fullscreen: true })
const loadingInstance2 = ElLoading.service({ fullscreen: true })
console.log(loadingInstance1 === loadingInstance2) // true
```
Calling the `close` method on any one of them can close this full screen Loading.
If Element Plus is imported entirely, a globally method `$loading` will be registered to `app.config.globalProperties`. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.
## Options
| Attribute | Description | Type | Accepted Values | Default |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | --------------- | ------------- |
| target | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | object/string | — | document.body |
| body | same as the `body` modifier of `v-loading` | boolean | — | false |
| fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true |
| lock | same as the `lock` modifier of `v-loading` | boolean | — | false |
| text | loading text that displays under the spinner | string | — | — |
| spinner | class name of the custom spinner | string | — | — |
| background | background color of the mask | string | — | — |
| custom-class | custom class name for Loading | string | — | — |
## Directives
| Name | Description | Type |
| -------------------------- | -------------------------------------------- | ------- |
| v-loading | show animation while loading data | boolean |
| element-loading-text | loading text that displays under the spinner | string |
| element-loading-spinner | class name of the custom spinner | string |
| element-loading-background | background color of the mask | string |