# CSkeleton

Os componentes CSkeleton servem para simular o loading dos elementos da página enquanto eles não estiverem carregados ainda, mantendo o padrão visual do Design System.

Foram desenvolvidos três tipos de componentes:

CSkeletonCircle
CSkeletonBlock
CSkeletonImage

Exemplos

API

# Exemplo de CSkeleton

Componente de avatar:

Componente de bloco

Componente de imagem

Classe do CSkeleton sem componente:

<template>
  <div class="c-container"> 
      <p class="c-text-b3" style="margin:1rem 0;">Componente de avatar:</p>
      <c-skeleton-circle />

      <p class="c-text-b3" style="margin:1rem 0;">Componente de bloco</p>
      <c-skeleton-block />

      <p class="c-text-b3" style="margin:1rem 0;">Componente de imagem</p>
      <c-skeleton-image />

      <p class="c-text-b3" style="margin:1rem 0;">Classe do CSkeleton sem componente:</p>
      <div class="c-skeleton c-skeleton--md" />
  </div>
</template>
<template>
  <div class="c-container"> 
      <p class="c-text-b3" style="margin:1rem 0;">Componente de avatar:</p>
      <c-skeleton-circle />

      <p class="c-text-b3" style="margin:1rem 0;">Componente de bloco</p>
      <c-skeleton-block />

      <p class="c-text-b3" style="margin:1rem 0;">Componente de imagem</p>
      <c-skeleton-image />

      <p class="c-text-b3" style="margin:1rem 0;">Classe do CSkeleton sem componente:</p>
      <div class="c-skeleton c-skeleton--md" />
  </div>
</template>

# CSkeletonCircle API

O componente CSkeletonCircle para ser implementado basta importá-lo e adicionar aos components:

import { CSkeletonCircle } from '@estrategiahq/coruja-web-ui';

export default {
  components: {
    CSkeletonCircle
  },

1
2
3
4
5
6

E então incluir a tag no seu html:

<c-skeleton-circle />

# Props

As props disponíveis para configurar o componente são:

Nome	Tipo	Default	Descrição
size	`string`	`11.25rem`	Indica o diâmetro do círculo.

# CSkeletonBlock API

O componente CSkeletonBlock para ser implementado basta importá-lo e adicionar aos components:

import { CSkeletonBlock } from '@estrategiahq/coruja-web-ui';

export default {
  components: {
    CSkeletonBlock
  },

1
2
3
4
5
6

E então incluir a tag no seu html:

<div style="height:3rem; width:18.75rem">
  <c-skeleton-block />
</div>

1
2
3

# Props

As props disponíveis para configurar o componente são:

Nome	Tipo	Default	Descrição
width	`string`	`auto`	Indica a largura do bloco.
height	`string`	`inherit`	Indica a altura do bloco.
radius	`string`	`2rem`	Indica a curvatura dos cantos do bloco (Caso queira um bloco sem curvatura nos cantos 0).

# CSkeletonImage API

O componente CSkeletonImage para ser implementado basta importá-lo e adicionar aos components:

import { CSkeletonImage } from '@estrategiahq/coruja-web-ui';

export default {
  components: {
    CSkeletonImage
  },

1
2
3
4
5
6

E então incluir a tag no seu html:

<c-skeleton-image />

# Props

As props disponíveis para configurar o componente são:

Nome	Tipo	Default	Descrição
height	`string`	`18.75rem`	Indica a altura do bloco de imagem.
width	`string`	`18.75rem`	Indica a largura do bloco de imagem.

# CSkeleton Class

Além disso, o Design System disponibiliza a classe CSS .c-skeleton que você pode usar livremente na sua tag em conjunto com alguma altura e largura:

<div style="height:3rem; width:18.75rem" class="c-skeleton"></div>

Também estão disponíveis dimensões predefinidas, para uso em conjunto com .c-skeleton:

<div class="c-skeleton c-skeleton--sm"></div>

Alturas das classes (width auto):

c-skeleton--sm: 1rem
c-skeleton--md: 2rem
c-skeleton--lg: 3rem