O componente ZdSkeletonLoader é usado para indicar ao usuário que algo está carregando.
Os pacotes @zeedhi/zd-skeletonloader-common
e @zeedhi/zd-skeletonloader-vue
são necessários para usar o componente
Utilize o comando abaixo para instalar ambos automaticamente:
npm install @zeedhi/zd-skeletonloader
Registre o componente no arquivo zeedhi.ts
import Vue from 'vue';
import { ZdSkeletonLoader } from '@zeedhi/zd-skeletonloader';
Vue.component('ZdSkeletonLoader', ZdSkeletonLoader);
Para utilizá-lo, defina a propriedade component
como "ZdSkeletonLoader"
e adicione um type
.
Exemplo:
{
"name": "SkeletonLoader",
"component": "ZdSkeletonLoader",
"type": "card",
}
Nome | Tipo | Default | Descrição |
---|---|---|---|
boilerplate | boolean | false | Define se o componente será animado. |
dark | boolean | false | Define se o componente será composto das cores do tema dark. |
elevation | number | string | undefined | Designa uma elevação para o componente. Valores variam de 0 a 24. |
height | number | string | undefined | Define a altura do componente. |
light | boolean | false | Define se o componente será composto das cores do tema light. |
loading | boolean | false | Define se o componente vai exibir animação de loading ao passar o mouse. |
maxHeight | number | string | undefined | Define a altura máxima para o componente. |
minHeight | number | string | undefined | Define a altura mínima para o componente. |
maxWidth | number | string | undefined | Define a largura máxima para o componente. |
minWidth | number | string | undefined | Define a largura mínima para o componente. |
tile | boolean | false | Define se o componente terá border-radius |
transition | string | undefined | Define a transição do componente. |
type* | string | undefined | Especifica os tipos de esqueletos que serão renderizados. |
types* | object | {} | Cria layouts predefinidos para usar na propriedade type. |
width | number | string | undefined | Define a largura do componente. |
A propriedade Type
é do tipo String
e seu valor é uma Lista
de um ou mais itens.
Tipos predefinidos:
Nome | Composição |
---|---|
actions | button@2 |
article | heading |
button | button |
card | image, card-heading |
card-avatar | image, list-item-avatar |
card-heading | heading |
chip | chip |
date-picker | list-item, card-heading, divider, date-picker-options, date-picker-days, actions |
date-picker-options | text, avatar@2 |
date-picker-days | avatar@28 |
heading | heading |
image | image |
list-item | text |
list-item-avatar | avatar, text |
list-item-two-line | sentences |
list-item-avatar-two-line | avatar, sentences |
list-item-three-line | avatar, paragraph, paragraph: text@3 |
paragraph | text@3 |
sentences | text@2 |
table | table-heading, table-thead, table-tbody, table-tfoot |
table-heading | heading, text |
table-thead | heading@6 |
table-tbody | table-row-divider@6 |
table-row-divider | table-row, divider |
table-row | table-cell@6 |
table-cell | text |
table-tfoot | text@2, avatar@2 |
text | text |
É possível usar os tipos predefinidos listados acima ou os itens de sua composição separadamente.
Além disso, é possível criar seus próprios Types
.
Para mais detalhes, veja Types.
Para evitar de usar um tipo várias vezes, é possível multiplicá-lo usando tipo@quantidade
Também se aplica para Types.
Exemplo:
{ "name": "SkeletonLoaderAvatar", "component": "ZdSkeletonLoader", "type": "avatar@4" }
Resultado:
A propriedade Types
é usada para criar um modelo composto por vários itens.
Exemplo:
{ "name": "SkeletonLoaderProfile", "component": "ZdSkeletonLoader", "types": {"profile":"image, avatar, text@2"}, "type": "profile" }
Resultado:
Na página do Skeleton Loader, no site ofical do Vuetify, tem exemplos práticos e visuais utilizando o componente.