Vue Skeleton Component

Usage

Use the Skeleton component as-is to display a placeholder.

<template>
  <div class="flex items-center gap-4">
    <B24Skeleton class="size-12 rounded-full" />

    <div class="grid gap-2">
      <B24Skeleton class="h-4 w-[250px]" />
      <B24Skeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>

Accent

Use the accent prop to change the variant of the Skeleton.

<template>
  <div class="grid gap-2">
    <B24Skeleton accent="default" class="h-4 w-[250px]" />
    <B24Skeleton accent="accent" class="h-4 w-[200px]" />
    <B24Skeleton accent="less" class="h-4 w-[150px]" />
  </div>
</template>

Examples

Something more complex

Example of a loading indicator for a task creation form.

<template>
  <div class="w-full flex flex-col flex-nowrap p-4 bg-base-50 dark:bg-base-dark">
    <div class="mb-4 flex flex-row flex-nowrap items-center justify-between gap-2 ">
      <B24Skeleton class="ml-xs2 h-xs2 w-[38%] rounded-3xs" />
      <div class="flex flex-row flex-nowrap items-center justify-between gap-4">
        <div class="border-2 border-gray-200 dark:border-gray-800 size-[40px] rounded-2xs flex items-center justify-center">
          <B24Skeleton class="h-xs2 w-[10px] rounded-3xs" />
        </div>
        <div class="border-2 border-gray-200 dark:border-gray-800 h-[40px] w-[150px] px-lg rounded-2xs flex items-center justify-center">
          <B24Skeleton class="h-xs2 w-full rounded-3xs" />
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-white/10 rounded-md p-lg flex flex-col flex-nowrap items-start justify-between">
      <div class="mb-12 w-full flex flex-col items-start justify-start gap-2">
        <B24Skeleton class="h-xs2 w-[76%] rounded-3xs mb-1.5" />
        <B24Skeleton class="h-xs w-[76%] rounded-3xs" />
        <B24Skeleton class="h-xs w-[76%] rounded-3xs" />
        <B24Skeleton class="h-xs w-[40%] rounded-3xs" />
      </div>

      <div class="mb-3 bg-gray-20 dark:bg-gray-900 w-full h-14 rounded-md" />
      <div class="mb-6 bg-gray-20 dark:bg-gray-900 w-full h-40 rounded-md" />
      <B24Skeleton class="mb-4 h-xs w-[42%] rounded-3xs" />
      <div class="mb-4 pt-4 w-full flex flex-row flex-nowrap items-center justify-between gap-2 border-t-1 border-t-gray-100 dark:border-t-gray-900 overflow-hidden">
        <div class="flex flex-row flex-nowrap items-center justify-between gap-4">
          <div class="bg-green-350 dark:bg-green-800 h-[40px] w-[100px] px-lg rounded-2xs flex items-center justify-center">
            <B24Skeleton class="h-xs2 w-full rounded-3xs bg-gray-50" />
          </div>
          <div class="border-2 border-gray-200 dark:border-gray-800 h-[40px] w-[150px] px-lg rounded-2xs flex items-center justify-center">
            <B24Skeleton class="h-xs2 w-full rounded-3xs" />
          </div>
        </div>
        <div class="flex flex-row flex-nowrap items-center justify-between gap-4">
          <div class="w-[140px]">
            <B24Skeleton class="h-xs2 w-full rounded-3xs" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`accent`	`'default'`	`"default" \| "accent" \| "less"`
`b24ui`		`{ base?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{}`

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/skeleton.ts

export default {
  slots: {
    base: 'animate-pulse rounded-(--ui-border-radius-md) '
  },
  variants: {
    accent: {
      default: 'bg-(--ui-color-g-glass-grey-bg-1) edge-dark:bg-(--ui-color-g-glass-grey-bg-3)',
      accent: 'bg-(--ui-color-g-glass-grey-bg-3) light:bg-(--ui-color-g-glass-grey-bg-2) edge-dark:bg-(--ui-color-g-glass-grey-bg-1)',
      less: 'bg-(--ui-color-tech-push) dark:bg-(--ui-color-g-content-grey-3)'
    }
  },
  defaultVariants: {
    accent: 'default'
  }
}

Separator

Divides content in a horizontal or vertical manner.

Checkbox

A toggle input for marking as checked or unchecked.