daisyUI Stat 组件完全指南：用 stats 块优雅展示数字与数据

daisyUI Stat 组件完全指南：用 stats 块优雅展示数字与数据

【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui

导读

Stat 是 daisyUI 提供的一组用于在区块中展示数字和数据的组件类，常用于仪表盘、统计面板、运营看板等场景。本文以 skills/daisyui/components/stat.md 为核心，结合 stat.css 源码 与 官方组件文档页/components/stat/+page.md)，完整讲解stats容器的类名体系、基础语法、图标/图片、方向控制、响应式切换、自定义配色等全部用法，并深入剖析其底层 Grid 布局与分隔线实现原理，帮助你写出可直接上线的数据展示区块。

Stat 组件是什么

Stat 组件用于在页面中以独立的区块展示数字与数据（如访问量、点赞数、下载量、用户数等）。它由外层容器stats和内层若干stat数据项组成，每个数据项内部又可拆分为标题（stat-title）、数值（stat-value）、描述（stat-desc）三部分，还可以附加图形（stat-figure）与操作按钮（stat-actions）。

在 daisyUI 的组件技能文档（skills/daisyui/components/stat.md）中，Stat 是独立成篇的标准组件，文档站点的对应示例页位于 packages/docs/src/routes/(routes)/components/stat/+page.md/components/stat/+page.md)。

类名总览

Stat 组件的类名分为三层：组件容器、内部部件（part）与方向修饰符（direction）。

其中前六项由组件技能文档明确列出，stat-actions与方向类在 stat.css 源码 中均有对应的样式实现。

基础语法

Stat 组件的标准 HTML 结构如下：

<div class="stats {MODIFIER}"> <div class="stat">{CONTENT}</div> </div>

使用规则：

• {MODIFIER}是可选的，可以是方向类名（stats-horizontal或stats-vertical）之一；
• 默认布局为横向（horizontal），想要纵向排列时使用stats-vertical类；
• 将stat-title、stat-value、stat-desc放在同一个stat元素内部。

基础示例：单个数据块

最简单的用法是只有一个stat数据项，外层容器可以自由叠加shadow、rounded等 Tailwind 工具类美化外观：

<div class="stats shadow"> <div class="stat"> <div class="stat-title">Total Page Views</div> <div class="stat-value">89,400</div> <div class="stat-desc">21% more than last month</div> </div> </div>

效果上，stat-title显示为较小的灰色标题，stat-value以 2rem、800 字重的醒目大号字体突出核心数字，stat-desc则以小号灰色文字承载趋势说明。这也是官方文档中“~Stat”示例的完整结构（见 +page.md/components/stat/+page.md#L35-L53)）。

多数据块并列展示

在同一个stats容器中放入多个stat，即可实现多指标并列展示。此时 daisyUI 会自动在每个数据块之间绘制分隔线：

<div class="stats shadow"> <div class="stat"> <div class="stat-title">Downloads</div> <div class="stat-value">31K</div> <div class="stat-desc">Jan 1st - Feb 1st</div> </div> <div class="stat"> <div class="stat-title">New Users</div> <div class="stat-value">4,200</div> <div class="stat-desc">↗︎ 400 (22%)</div> </div> <div class="stat"> <div class="stat-title">New Registers</div> <div class="stat-value">1,200</div> <div class="stat-desc">↘︎ 90 (14%)</div> </div> </div>

描述文字中可以放心使用↗︎、↘︎等箭头字符表达涨跌趋势，与text-secondary等颜色类组合即可做出清晰的涨跌提示。

带图标或图片的 stat（stat-figure）

stat-figure用于在数据块右侧放置图标、头像图片等图形内容。它的典型场景是搭配text-primary、text-secondary给不同指标涂上主题色，或嵌入 daisyUI 的avatar组件展示用户头像：

<div class="stats shadow"> <div class="stat"> <div class="stat-figure text-primary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-8 w-8 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path> </svg> </div> <div class="stat-title">Total Likes</div> <div class="stat-value text-primary">25.6K</div> <div class="stat-desc">21% more than last month</div> </div> <div class="stat"> <div class="stat-figure text-secondary"> <div class="avatar avatar-online"> <div class="w-16 rounded-full"> <img src="/images/your-avatar.webp" alt="user avatar" /> </div> </div> </div> <div class="stat-value">86%</div> <div class="stat-title">Tasks done</div> <div class="stat-desc text-secondary">31 tasks remaining</div> </div> </div>

需要说明的是：stat-title、stat-value、stat-desc三者的书写顺序不强制固定，官方示例中既有“标题→数值→描述”的顺序，也有“数值→标题→描述”的排列，均能正常渲染。

内容居中排列

给每个stat加上place-items-center，即可让标题、数值、描述在数据块内水平居中，适合强调型指标卡：

<div class="stats shadow"> <div class="stat place-items-center"> <div class="stat-title">Downloads</div> <div class="stat-value">31K</div> <div class="stat-desc">From January 1st to February 1st</div> </div> <div class="stat place-items-center"> <div class="stat-title">Users</div> <div class="stat-value text-secondary">4,200</div> <div class="stat-desc text-secondary">↗︎ 40 (2%)</div> </div> </div>

方向控制：horizontal 与 vertical

stats容器默认横向排布（stats-horizontal），各数据块从左到右依次排列，块间分隔线为右侧竖线。需要纵向堆叠时，把容器类换成stats-vertical：

<div class="stats stats-vertical shadow"> <div class="stat"> <div class="stat-title">Downloads</div> <div class="stat-value">31K</div> </div> <div class="stat"> <div class="stat-title">New Users</div> <div class="stat-value">4,200</div> </div> <div class="stat"> <div class="stat-title">New Registers</div> <div class="stat-value">1,200</div> </div> </div>

纵向模式下，分隔线自动从右侧竖线切换为底部横线，块与块之间上下分隔。

响应式切换：小屏纵向、大屏横向

借助 Tailwind 的断点前缀，可以让同一组数据在小屏纵向排列、大屏横向排列，这是移动端看板的常见做法：

<div class="stats stats-vertical lg:stats-horizontal shadow"> <div class="stat"> <div class="stat-title">Downloads</div> <div class="stat-value">31K</div> </div> <div class="stat"> <div class="stat-title">New Users</div> <div class="stat-value">4,200</div> </div> <div class="stat"> <div class="stat-title">New Registers</div> <div class="stat-value">1,200</div> </div> </div>

核心写法是stats-vertical lg:stats-horizontal：默认（小屏）为纵向，达到lg（1024px）断点后切换为横向。

自定义配色与操作按钮（stat-actions）

stat-actions部分用来放置按钮等交互元素。与常规卡片不同，stats容器默认不携带背景色，因此自定义时通常会叠加bg-base-100、border、border-base-300等类构建卡片外观，再配合btn组件放入操作按钮：

<div class="stats bg-base-100 border border-base-300"> <div class="stat"> <div class="stat-title">Account balance</div> <div class="stat-value">$89,400</div> <div class="stat-actions"> <button class="btn btn-xs btn-success">Add funds</button> </div> </div> <div class="stat"> <div class="stat-title">Current balance</div> <div class="stat-value">$89,400</div> <div class="stat-actions"> <button class="btn btn-xs">Withdrawal</button> <button class="btn btn-xs">Deposit</button> </div> </div> </div>

源码级实现原理

Stat 组件的全部样式集中在 packages/daisyui/src/components/stat.css，理解这段源码能帮你更精准地做自定义。

容器与数据项的 Grid 布局

.stats容器使用inline-grid+grid-flow-col（横向流）实现多块并排，并带有rounded-box（圆角）与overflow-x-auto（内容溢出时可横向滚动）；.stat数据项则是一个grid-template-columns: repeat(1, 1fr)的单列网格，配合gap-x-4 px-6 py-4控制内部间距（stat.css）。

标题、数值、描述的排版规则

• .stat-title：font-size: 0.75rem，颜色为text-base-content/60（基于当前文本色 60% 透明度），并设置whitespace-nowrap防止换行；
• .stat-value：font-size: 2rem、font-weight: 800，是整块最醒目的元素；
• .stat-desc：与标题同为0.75rem+text-base-content/60的次级样式；
• .stat-figure：通过col-start-2 row-span-3 row-start-1定位到右侧、跨越标题/数值/描述三行，place-self-center justify-self-end保证垂直居中并靠右（stat.css）。

分隔线如何实现

数据块之间的分隔线没有使用边框工具类，而是直接写在.stat:not(:last-child)伪类上：border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)。其中var(--border)读取 daisyUI 基础样式提供的边框宽度变量，颜色用color-mix取当前文本色 10% 的透明度，因此分隔线会自动跟随主题色与深浅模式变化，无需额外配置（stat.css）。

方向修饰符的差异

• .stats-horizontal：维持grid-flow-col横向流，分隔线为右侧竖线（border-inline-end）；
• .stats-vertical：切换为grid-flow-row纵向流并启用overflow-y-auto，分隔线改为底部横线（border-block-end）（stat.css）。

此外，基础样式位于@layer daisyui.l1.l2.l3，方向修饰符位于@layer daisyui.l1.l2。由于层叠层（@layer）中靠后声明的层优先级更高，方向类能够可靠地覆盖基础块的分隔线方向，这也是“先写基础、再写方向修饰符”这一设计能生效的底层原因。

使用前提与自定义前缀说明

• Stat 属于 daisyUI 组件体系，需先通过 daisyUI 插件正确接入 Tailwind（可参考 packages/daisyui/index.js 与 plugin.json）；
• 文档站示例中的类名前缀占位符（$$）在真实代码中无需书写，直接使用stats、stat等类名即可；
• 若项目通过插件配置了自定义类名前缀（仓库中 addPrefix.js 与文档站 PrefixEdit.svelte 均涉及前缀处理），则所有类名需统一加上对应前缀后再使用。

结语

Stat 组件以极少的类名覆盖了数据展示区的全部常见形态：单块、多块、带图、居中、横向、纵向、响应式切换与按钮操作，且颜色、分隔线全部基于主题变量自动适配。从 技能文档 到 示例页面/components/stat/+page.md) 再到 核心样式源码，你可以对照三层资料快速掌握它，并依据源码自由扩展出自定义的数据看板。

【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui