DemoBlock
A wrapper container for demonstrating components on a checkerboard background, ideal for documentation examples and component previews. Automatically adapts to light and dark themes.
Basic Usage
Wrap content directly; the default checkerboard uses 8px squares.
<DemoBlock>
<div class="d-flex align-items-center gap-3 p-3">
<img src="https://placehold.co/80x60/9d6bff/white?text=Demo" class="rounded" alt="demo">
<span>Content on a checkerboard background</span>
</div>
</DemoBlock>Wrapping Component Demos
Great for showcasing transparent or white-background components like Button, Badge, and Avatar.
<DemoBlock>
<div class="d-flex flex-wrap gap-2 p-3">
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
</div>
</DemoBlock>Custom Checkerboard Size
Use the size prop to control the checkerboard square size in pixels. Default is 8.
<!-- Small squares -->
<DemoBlock :size="4">
<button class="btn btn-primary">Primary</button>
</DemoBlock>
<!-- Large squares -->
<DemoBlock :size="20">
<button class="btn btn-outline-secondary">Secondary</button>
</DemoBlock>Dark Mode Adaptation
When the <html> tag has data-bs-theme="dark", the checkerboard colors automatically switch to a dark palette, remaining clearly visible in dark mode.
<DemoBlock>
<div class="d-flex align-items-center gap-3 p-3">
<IconMoon :size="32" class="text-secondary" />
<span class="text-secondary">Toggle theme to see the checkerboard adapt</span>
</div>
</DemoBlock>Custom Checkerboard Colors
Use lightColor1 / lightColor2 to control the two checkerboard colors in light mode, and darkColor1 / darkColor2 for dark mode. Only override the ones you need — omitted props keep their defaults.
<DemoBlock lightColor1="#fff3cd" lightColor2="#fff9e6" :size="12">
<span class="badge bg-warning text-dark">Custom warm checkerboard</span>
</DemoBlock>Sliding Animation
Enable the checkerboard scrolling animation with animated, control the speed with duration, and choose from 8 directions with direction.
<DemoBlock animated :duration="2" direction="up-right">
<div class="d-flex justify-content-center p-4">
<button class="btn btn-primary">Button</button>
</div>
</DemoBlock><DemoBlock animated direction="up-right" />
<DemoBlock animated direction="left" :duration="4" />API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
size | Checkerboard square size (px) | number | 8 |
lightColor1 | Light mode checkerboard color 1 | string | #fcfcfc |
lightColor2 | Light mode checkerboard color 2 | string | #ffffff |
darkColor1 | Dark mode checkerboard color 1 | string | #1f2937 |
darkColor2 | Dark mode checkerboard color 2 | string | #111827 |
animated | Enable sliding animation | boolean | false |
duration | Animation speed (seconds) | number | 3 |
direction | Sliding direction | 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right' | 'up-right' |
Slots
| Slot | Description |
|---|---|
default | Demo content |