Pular para o conteúdo Herbst UI beta

Componente

Skeleton

Placeholders de carregamento. Use o skeleton base com qualquer forma, tamanho e animação, ou recorra aos presets prontos — text, avatar, button, input, card, list, form e table — para espelhar o layout real enquanto carrega.

Formas, tamanho e animação 

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbSkeletonImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-skeleton-shapes',
  imports: [HbSkeletonImports],
  template: `
    <div class="flex w-full max-w-md flex-col gap-4">
      <div class="flex items-center gap-3">
        <hb-skeleton hbShape="circle" hbSize="lg" />
        <div class="flex flex-1 flex-col gap-2">
          <hb-skeleton hbShape="text" hbSize="lg" hbWidth="70%" />
          <hb-skeleton hbShape="text" />
        </div>
      </div>

      <hb-skeleton hbHeight="6rem" hbRounded="lg" />

      <div class="flex items-center gap-3">
        <hb-skeleton hbShape="square" hbSize="md" hbAnimation="wave" />
        <hb-skeleton hbShape="square" hbSize="md" hbAnimation="none" />
        <hb-skeleton hbWidth="8rem" hbHeight="2rem" hbRounded="full" />
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoSkeletonShapesComponent {}

Text, avatar, button e card

List, form e table

Referência de API

hb-skeleton

PropriedadeDescriçãoTipoPadrão
[hbShape] A forma do placeholder. 'rectangle' | 'circle' | 'square' | 'text' 'rectangle'
[hbSize] Um tamanho predefinido para as formas circle, square e text. 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md'
[hbWidth] / [hbHeight] Largura e altura CSS explícitas, sobrescrevendo as dimensões predefinidas. string ''
[hbRounded] Sobrescrita do arredondamento dos cantos. 'none' | 'sm' | 'md' | 'lg' | 'full' —
[hbAnimation] O efeito de brilho: pulse, uma onda em movimento, ou nenhum. 'pulse' | 'wave' | 'none' 'pulse'

Presets — content

PropriedadeDescriçãoTipoPadrão
hb-skeleton-text Linhas de texto. [hbLines], [hbLastWidth] (última linha), [hbSize], [hbGap]. component hbLines 3, hbLastWidth 60%
hb-skeleton-avatar Um avatar circle/square/rounded; [hbText] adiciona duas linhas ao lado. [hbSize]. component hbShape circle
hb-skeleton-button / hb-skeleton-input Um placeholder em forma de botão ou input. [hbSize], [hbWidth]. component —
hb-skeleton-card Uma área de mídia, linhas de texto e rodapé opcional. [hbMedia], [hbMediaHeight], [hbLines], [hbFooter]. component hbMedia true, hbLines 3

Presets — layouts

PropriedadeDescriçãoTipoPadrão
hb-skeleton-list Linhas repetidas com avatar opcional. [hbItems], [hbAvatar], [hbLines]. component hbItems 5, hbAvatar true, hbLines 2
hb-skeleton-form Linhas de campo e um botão de envio opcional. [hbFields], [hbButton]. component hbFields 3, hbButton true
hb-skeleton-table Uma grade com cabeçalho opcional. [hbRows], [hbColumns], [hbHeader]. component hbRows 5, hbColumns 4, hbHeader true
[hbAnimation] Todo preset também aceita hbAnimation, aplicado a todas as suas partes. 'pulse' | 'wave' | 'none' 'pulse'