@zeedhi/zd-skeletonloader-common

Skeleton Loader

O componente ZdSkeletonLoader é usado para indicar ao usuário que algo está carregando.

Light

Dark

Instalação

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);

Uso Básico

Para utilizá-lo, defina a propriedade component como "ZdSkeletonLoader" e adicione um type.
Exemplo:

{
  "name": "SkeletonLoader",
  "component": "ZdSkeletonLoader",
  "type": "card",
}

Propriedades

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.

Type

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.

Abreviação

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:

Types

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:

Referência

Na página do Skeleton Loader, no site ofical do Vuetify, tem exemplos práticos e visuais utilizando o componente.