🎉 daisyUI 5.0 升级指南

堆叠

堆叠组件在视觉上将元素彼此堆叠。

类名		类型
堆叠
组件
将子元素彼此堆叠
堆叠-顶部
修饰符
将子元素对齐到顶部
堆叠-底部
修饰符
将子元素对齐到底部[默认]
堆叠-起始
修饰符
将子元素对齐到起始位置（水平方向）
堆叠-结束
修饰符
将子元素对齐到结束位置（水平方向）

你可以使用w-*和h-*类来设置堆叠组件的宽度和高度，使所有项目大小相同。

堆叠中的 3 个 div

1
2
3
<div class="$$stack h-20 w-32">
  <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
  <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
  <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">
    3
  </div>
</div>
<div class="$$stack h-20 w-32">
  <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
  <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
  <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">
    3
  </div>
</div>

堆叠的图片

Tailwind CSS example 1 Tailwind CSS example 2 Tailwind CSS example 3
<div class="$$stack w-48">
  <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="rounded-box" />
  <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="rounded-box" />
  <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="rounded-box" />
</div>
<div class="$$stack w-48">
  <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="rounded-box" />
  <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="rounded-box" />
  <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="rounded-box" />
</div>

堆叠的卡片

A
B
C
<div class="$$stack size-28">
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>
<div class="$$stack size-28">
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>

堆叠的卡片（顶部方向）

A
B
C
<div class="$$stack $$stack-top size-28">
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>
<div class="$$stack $$stack-top size-28">
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>

堆叠的卡片（起始方向）

A
B
C
<div class="$$stack $$stack-start size-28">
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>
<div class="$$stack $$stack-start size-28">
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>

堆叠的卡片（结束方向）

A
B
C
<div class="$$stack $$stack-end size-28">
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>
<div class="$$stack $$stack-end size-28">
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>

带阴影的堆叠卡片

A
B
C
<div class="$$stack">
  <div class="$$card bg-base-200 text-center shadow-md">
    <div class="$$card-body">A</div>
  </div>
  <div class="$$card bg-base-200 text-center shadow">
    <div class="$$card-body">B</div>
  </div>
  <div class="$$card bg-base-200 text-center shadow-sm">
    <div class="$$card-body">C</div>
  </div>
</div>
<div class="$$stack">
  <div class="$$card bg-base-200 text-center shadow-md">
    <div class="$$card-body">A</div>
  </div>
  <div class="$$card bg-base-200 text-center shadow">
    <div class="$$card-body">B</div>
  </div>
  <div class="$$card bg-base-200 text-center shadow-sm">
    <div class="$$card-body">C</div>
  </div>
</div>

堆叠的卡片

通知 1

你有 3 条未读消息。点击此处查看。

通知 2

你有 3 条未读消息。点击此处查看。

通知 3

你有 3 条未读消息。点击此处查看。

<div class="$$stack">
  <div class="$$card shadow-md bg-base-100">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 1</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="$$card shadow-md bg-base-100">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 2</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="$$card shadow-md bg-base-100">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 3</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
</div>
<div class="$$stack">
  <div class="$$card shadow-md bg-base-100">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 1</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="$$card shadow-md bg-base-100">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 2</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="$$card shadow-md bg-base-100">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 3</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
</div>
你发现 bug 了吗？ 在 GitHub 上提交 issue
你喜欢 daisyUI 吗？ 发帖宣传一下吧！
支持 daisyUI 的开发： Open Collective
daisyUI store

NEXUS
官方 daisyUI 仪表盘模板

在 daisyUI 商店中可用

更多详情
请升级你的浏览器