Skeleton Loader

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

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

Type

A propriedade Type é do tipo String e seu valor é uma Lista de um ou mais itens.

Tipos predefinidos:

É 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:

Resultado:

Types

A propriedade Types é usada para criar um modelo composto por vários itens.

Exemplo:

Resultado:

Referência

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