DemoBlock 演示区块

用于展示组件实例的包装容器，提供棋盘格背景，适合在文档示例或组件预览场景中使用。自动适配明暗主题。

基础用法

直接包裹内容即可，默认使用 8px 大小的棋盘格。

<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>棋盘格背景上的内容</span>
  </div>
</DemoBlock>

包裹组件演示

适合展示 Button、Badge、Avatar 等半透明或白底组件时使用。

<DemoBlock>
  <div class="d-flex flex-wrap gap-2 p-3">
    <span class="badge bg-primary">主要徽章</span>
    <span class="badge bg-success">成功徽章</span>
    <span class="badge bg-danger">危险徽章</span>
    <span class="badge bg-warning text-dark">警告徽章</span>
    <span class="badge bg-info">信息徽章</span>
  </div>
</DemoBlock>

自定义棋盘格大小

通过 size prop 控制棋盘格大小（单位 px），默认 8。

<!-- 小方格 -->
<DemoBlock :size="4">
  <button class="btn btn-primary">主要按钮</button>
</DemoBlock>

<!-- 大方格 -->
<DemoBlock :size="20">
  <button class="btn btn-outline-secondary">次要按钮</button>
</DemoBlock>

暗黑模式适配

当 html 标签的 data-bs-theme="dark" 时，棋盘格颜色自动切换为深色系，在暗色主题下依然清晰可辨。

<DemoBlock>
  <div class="d-flex align-items-center gap-3 p-3">
    <IconMoon :size="32" class="text-secondary" />
    <span class="text-secondary">切换主题查看棋盘格自动适配效果</span>
  </div>
</DemoBlock>

自定义棋盘格颜色

通过 lightColor1 / lightColor2 控制明亮模式的两种棋盘格颜色，darkColor1 / darkColor2 控制暗黑模式的两种棋盘格颜色。填一个覆盖一个，未填的保持默认。

<DemoBlock lightColor1="#fff3cd" lightColor2="#fff9e6" :size="12">
  <span class="badge bg-warning text-dark">自定义暖色棋盘格</span>
</DemoBlock>

滑动动画

通过 animated 开启棋盘格滑动动画，direction 控制 8 个滑动方向。

<DemoBlock animated :duration="2" direction="up-right">
  <div class="d-flex justify-content-center p-4">
    <button class="btn btn-primary">按钮</button>
  </div>
</DemoBlock>

<DemoBlock animated direction="up-right" />
<DemoBlock animated direction="left" :duration="4" />

API

Props

Prop	说明	类型	默认值
size	棋盘格方格大小（px）	number	8
lightColor1	明亮模式棋盘格颜色-1	string	#fcfcfc
lightColor2	明亮模式棋盘格颜色-2	string	#ffffff
darkColor1	暗黑模式棋盘格颜色-1	string	#1f2937
darkColor2	暗黑模式棋盘格颜色-2	string	#111827
animated	是否开启滑动动画	boolean	false
duration	动画速度（秒）	number	3
direction	滑动方向	'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right'	'up-right'

Slots

插槽	说明
default	演示内容