Placeholder

Placeholder is a container filled with shapes with a defined background. The elements created in this way replace the content in the component by recreating the appearance of the component and are displayed when charging data/waiting for data. It can also be used to build mockups.

Props

size

Element size

type:String

default:md

values:xs, sm, md, lg, xl, full

shape

Type of element

type:String

default:wrapper

values:wrapper, line, avatar, square, image, checkbox, btn

cols

If the element is the type 'wrapper', does it have columns

type:Boolean

default:false

lines

The number of lines if the element is type 'line'

type:Number

default:1

gap

Distance between elements or lines (gap)

type:Number

default:2

values:0, 2, 3, 4, 5, 6, 7, 8

pulse

Whether the content should pulsate (animation)

type:Boolean

default:false

Examples

Container for placeholder

wiersz 1

wiersz 2

<placeholder>
  <div>wiersz 1</div>
  <div>wiersz 2</div>  
</placeholder>

One line container

<placeholder cols>
  <placeholder shape="line" />
</placeholder>

Container with many lines and columns

<placeholder cols>
  <placeholder shape="line" :lines="3" class="w-full" />
  <placeholder shape="line" :lines="3" class="w-full" />
</placeholder>

Container with lines combinations

<placeholder :gap="3">
  <placeholder shape="line" size="lg" />
  <placeholder shape="line" :lines="3" size="xs" />
</placeholder>

Container with lines and avatar combinations

<placeholder :gap="5" cols>
  <placeholder shape="avatar" size="lg" />
  <placeholder :gap="3">
    <placeholder shape="line" size="md" />
    <placeholder shape="line" :lines="2" size="xs" />
  </placeholder>
</placeholder>

Container with checkbox and line

<placeholder :gap="0" cols>
  <placeholder shape="checkbox" class="mx-4" />
  <placeholder shape="line" size="md" class="w-full" />
</placeholder>

Container with a pulsating image and lines

<placeholder :gap="5" pulse>
  <placeholder shape="image" class="h-24" />
  <placeholder :gap="3">
    <placeholder shape="line" size="md" />
    <placeholder shape="line" :lines="2" size="xs" />
  </placeholder>
</placeholder>

Avatar placeholder

xs

sm

md

lg

xl

xs

<placeholder shape="avatar" size="xs" />

sm

<placeholder shape="avatar" size="sm" />

md

<placeholder shape="avatar" size="md" />

lg

<placeholder shape="avatar" size="lg" />

xl

<placeholder shape="avatar" size="xl" />

Button placeholder

xs

sm

md

lg

xl

xs

<placeholder shape="btn" size="xs" />

sm

<placeholder shape="btn" size="sm" />

md

<placeholder shape="btn" size="md" />

lg

<placeholder shape="btn" size="lg" />

xl

<placeholder shape="btn" size="xl" />

Using with component

WARNING

PlaceHolders contain defined Tailwind classes, but their proper arrangement, sizes, spacing, margins - should be defined on the components/view side where the placeholder will be used.

Example of mapping the poem in the table

TASK-8782

You can't compress the program without quantifying the open-source SSD pixel!

In Progress

<!-- komponent -->
<table-row :row="row">
    <div class="flex-none w-[80px]">TASK-8782</div>
    <div class="grow">You can't compress the program without quantifying the open-source SSD pixel!</div>
    <div class="flex-none flex gap-2 w-[120px]"><IconStopwatch class="w-4 h-4" /><span>In Progress</span></div>
</table-row>
<!-- placeholder -->
<placeholder cols class="px-4 sm:px-6 py-2" :gap="0">
  <placeholder shape="checkbox" />
  <placeholder cols :gap="4" class="mx-4">
    <placeholder shape="line" size="md" class="flex-none w-[80px]" />
    <placeholder shape="line" size="sm" class="grow" :lines="2" />
    <div class="flex-none flex gap-2 w-[120px]">
      <placeholder shape="square" class="w-4 h-4" />
      <placeholder shape="line" size="sm" class="mt-0.5 w-full" />
    </div>
  </placeholder>
</placeholder>