Skeleton

A toggle control for switching between two states.

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

<template>
  <div class="flex items-center gap-4">
    <B24Skeleton class="h-12 w-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

app.config.ts

export default defineAppConfig({
  b24ui: {
    skeleton: {
      slots: {
        base: 'animate-pulse rounded-(--ui-border-radius-md) '
      },
      variants: {
        accent: {
          default: 'bg-(--ui-color-g-glass-grey-bg-1)',
          accent: 'bg-(--ui-color-g-glass-grey-bg-2)',
          less: 'bg-(--ui-color-g-glass-grey-bg-3)'
        }
      },
      defaultVariants: {
        accent: 'default'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        skeleton: {
          slots: {
            base: 'animate-pulse rounded-(--ui-border-radius-md) '
          },
          variants: {
            accent: {
              default: 'bg-(--ui-color-g-glass-grey-bg-1)',
              accent: 'bg-(--ui-color-g-glass-grey-bg-2)',
              less: 'bg-(--ui-color-g-glass-grey-bg-3)'
            }
          },
          defaultVariants: {
            accent: 'default'
          }
        }
      }
    })
  ]
})

Separator

Divides content in a horizontal or vertical manner.

Checkbox

A toggle input for marking as checked or unchecked.