Diff
Diff 组件显示两个项目的并排比较。
| 类名 | 类型 | |
|---|---|---|
| diff | 组件 | 容器元素 |
| diff-item-1 | 部分 | 第一个项目 |
| diff-item-2 | 部分 | 第二个项目 |
| diff-resizer | 部分 | 调整大小控件 |
<figure class="$$diff aspect-16/9" tabindex="0"> <div class="$$diff-item-1" role="img"> <img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" /> </div> <div class="$$diff-item-2" role="img" tabindex="0"> <img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" /> </div> <div class="$$diff-resizer"></div> </figure>
<figure class="$$diff aspect-16/9" tabindex="0">
<div class="$$diff-item-1" role="img">
<img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
</div>
<div class="$$diff-item-2" role="img" tabindex="0">
<img
alt="daisy"
src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
</div>
<div class="$$diff-resizer"></div>
</figure>
<figure class="$$diff aspect-16/9" tabindex="0">
<div class="$$diff-item-1" role="img">
<img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
</div>
<div class="$$diff-item-2" role="img" tabindex="0">
<img
alt="daisy"
src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
</div>
<div class="$$diff-resizer"></div>
</figure>
<figure class="$$diff aspect-16/9" tabindex="0">
<div class="$$diff-item-1" role="img">
<img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
</div>
<div class="$$diff-item-2" role="img" tabindex="0">
<img
alt="daisy"
src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
</div>
<div class="$$diff-resizer"></div>
</figure>DAISY
DAISY
<figure class="$$diff aspect-16/9" tabindex="0"> <div class="$$diff-item-1" role="img"> <div class="bg-primary text-primary-content grid place-content-center text-9xl font-black"> DAISY </div> </div> <div class="$$diff-item-2" role="img" tabindex="0"> <div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div> </div> <div class="$$diff-resizer"></div> </figure>
<figure class="$$diff aspect-16/9" tabindex="0">
<div class="$$diff-item-1" role="img">
<div class="bg-primary text-primary-content grid place-content-center text-9xl font-black">
DAISY
</div>
</div>
<div class="$$diff-item-2" role="img" tabindex="0">
<div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div>
</div>
<div class="$$diff-resizer"></div>
</figure>
<figure class="$$diff aspect-16/9" tabindex="0">
<div class="$$diff-item-1" role="img">
<div class="bg-primary text-primary-content grid place-content-center text-9xl font-black">
DAISY
</div>
</div>
<div class="$$diff-item-2" role="img" tabindex="0">
<div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div>
</div>
<div class="$$diff-resizer"></div>
</figure>
<figure class="$$diff aspect-16/9" tabindex="0">
<div class="$$diff-item-1" role="img">
<div class="bg-primary text-primary-content grid place-content-center text-9xl font-black">
DAISY
</div>
</div>
<div class="$$diff-item-2" role="img" tabindex="0">
<div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div>
</div>
<div class="$$diff-resizer"></div>
</figure>你有问题吗？ 在 GitHub 上提问 或 Discord 服务器
你发现错误了吗？ 在 GitHub 上提交 issue
你喜欢 daisyUI 吗？ 分享出去吧！
支持 daisyUI 的开发： Open Collective
