Skeleton

A toggle control for switching between two states.

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

{
  "wait": "Loading client-side content..."
}

Accent

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

{
  "wait": "Loading client-side content..."
}

Examples

Something more complex

Example of a loading indicator for a task creation form.

{
  "wait": "Loading client-side content..."
}

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.