Placeholder

Basic Usage

<script setup>
import { Placeholder } from '@vrgl/vergil/components'
</script>

<template>
    <Placeholder/>
</template>

<style>
.placeholder {
    width: 300px;
    height: 80px;
}
</style>

Props

The Placeholder component features a Badge to display details. All Placeholder props are forwarded to its inner Badge.

<Placeholder label="Placeholder" outline size="sm"/>

Placeholder

API Reference

Props

prop	type	default
label	string
descendant	boolean
theme	'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral'	'brand'
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'md'
spacing	'' | 'compact' | 'extended'	''

Configuration options

Placeholder's configuration options allow to overwrite some Placeholder props' default values and may be overwritten under the placeholder root-level configuration option.

placeholder.<option>	type	default	global
theme	theme		✅
size	size		✅
radius	radius		✅
spacing	spacing		✅

Anatomy

<div.placeholder/>

<Badge.badge/>