Checkerboard
Display a checkerboard pattern background, commonly used to indicate transparency.
Default
<template>
<PCheckerboard class="h-40 rounded-lg" />
</template>
Custom Size
<template>
<PCheckerboard :size="40" class="h-40 rounded-lg" />
</template>
Custom Colors
<template>
<PCheckerboard primary-color="#e879f9" background-color="#f0abfc" class="h-40 rounded-lg" />
</template>
With Content
Transparent Area
<template>
<PCheckerboard class="h-40 rounded-lg flex items-center justify-center">
<span class="text-lg font-bold">Transparent Area</span>
</PCheckerboard>
</template>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | string | number | 20 | Size of each checkerboard cell |
| primary-color | string | var(--color-gray-200) | Primary (darker) color |
| background-color | string | var(--color-background-100) | Background (lighter) color |
Slots
| Name | Description |
|---|---|
| default | Default slot |