daisyUI 常用组件速查（按使用频率排序）
基于：
- daisyUI
🔥 第一梯队（高频核心组件）
👉 后台 / 表单 / 页面核心
1️⃣ Button（按钮）
<button class="btn">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-error">错误</button>常用组合
<button class="btn btn-primary btn-sm">小按钮</button>
<button class="btn btn-outline">描边按钮</button>
<button class="btn btn-ghost">幽灵按钮</button>
<button class="btn loading">加载中</button>2️⃣ Input（输入框）
<input class="input input-bordered" placeholder="请输入内容">常用组合
<input class="input input-primary" placeholder="主要输入框">
<input class="input input-error" placeholder="错误状态">
<input class="input input-bordered w-full" placeholder="全宽">3️⃣ Select（下拉框）
<select class="select select-bordered">
<option>选项1</option>
<option>选项2</option>
</select>4️⃣ Textarea（多行输入）
<textarea class="textarea textarea-bordered" placeholder="输入内容"></textarea>5️⃣ Checkbox / Radio（选择）
<input type="checkbox" class="checkbox">
<input type="radio" class="radio">6️⃣ Card（卡片）
<div class="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">标题</h2>
<p>内容</p>
<button class="btn btn-primary">操作</button>
</div>
</div>7️⃣ Alert（提示）
<div class="alert alert-success">成功提示</div>
<div class="alert alert-error">错误提示</div>8️⃣ Badge（标签）
<span class="badge">默认</span>
<span class="badge badge-primary">主要</span>9️⃣ Table（表格）
<table class="table">
<thead>
<tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>18</td></tr>
</tbody>
</table>🔟 Modal（弹窗）
<dialog id="my_modal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">标题</h3>
<p>内容</p>
<div class="modal-action">
<form method="dialog">
<button class="btn">关闭</button>
</form>
</div>
</div>
</dialog>
<button class="btn" onclick="my_modal.showModal()">打开弹窗</button>⚡ 第二梯队（常用辅助组件）
1️⃣ Navbar（导航栏）
<div class="navbar bg-base-100">
<div class="flex-1">Logo</div>
<div class="flex-none">
<button class="btn">登录</button>
</div>
</div>2️⃣ Drawer（侧边栏）
<div class="drawer">
<input id="drawer-toggle" type="checkbox" class="drawer-toggle">
<div class="drawer-content">
<label for="drawer-toggle" class="btn btn-primary">打开菜单</label>
</div>
<div class="drawer-side">
<ul class="menu p-4 w-80 bg-base-200">
<li><a>首页</a></li>
<li><a>用户</a></li>
</ul>
</div>
</div>3️⃣ Menu（菜单）
<ul class="menu bg-base-200 w-56">
<li><a>首页</a></li>
<li><a>用户</a></li>
</ul>4️⃣ Dropdown（下拉菜单）
<div class="dropdown">
<label tabindex="0" class="btn">菜单</label>
<ul tabindex="0" class="dropdown-content menu p-2 bg-base-100 shadow w-52">
<li><a>选项1</a></li>
<li><a>选项2</a></li>
</ul>
</div>5️⃣ Tabs（标签页）
<div role="tablist" class="tabs tabs-boxed">
<a role="tab" class="tab tab-active">Tab1</a>
<a role="tab" class="tab">Tab2</a>
</div>6️⃣ Progress（进度条）
<progress class="progress progress-primary w-56" value="50" max="100"></progress>7️⃣ Loading（加载动画）
<span class="loading loading-spinner"></span>8️⃣ Tooltip（提示）
<button class="btn" data-tip="提示内容">悬停</button>9️⃣ Divider（分割线）
<div class="divider">分割</div>💀 最实用总结
核心组件：
button / input / table / modal / card
后台结构：
drawer / menu / navbar
增强组件：
alert / badge / loading / tooltip🚀 使用建议
- 不需要死记组件
- 多复制官方示例
- 多组合 class
- 多做页面练习
👉 实战优先，记忆其次
📌 推荐练习
- 登录页（input + button）
- 表格列表（table）
- 弹窗操作（modal）
- 后台布局（drawer + menu）
👉 做完这些基本就能上手项目
下面是 daisyui+alpinejs的示例
<html lang="en" data-theme="bumblebee-custom">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Not Found</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/alpinejs" defer></script>
</head>
<body class="bg-base-200 min-h-screen p-6">
<div x-data="{ open: false }" class="max-w-5xl mx-auto">
<div class="flex justify-end">
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn m-1 gap-2 group">
<div class="bg-base-100 group-hover:border-base-content/20 border-base-content/10 grid shrink-0 grid-cols-2 gap-0.5 rounded-md border p-1 transition-colors">
<div class="bg-base-content size-1 rounded-full"></div>
<div class="bg-primary size-1 rounded-full"></div>
<div class="bg-secondary size-1 rounded-full"></div>
<div class="bg-accent size-1 rounded-full"></div>
</div>
<span>Theme</span>
<svg
width="12px"
height="12px"
class="inline-block h-2 w-2 fill-current opacity-60 transition-transform group-hover:rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2048 2048">
<path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
</svg>
</div>
<ul tabindex="-1" class="dropdown-content bg-base-300 rounded-box z-1 h-96 w-56 overflow-y-auto p-2 shadow-2xl">
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Light" value="light" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Dark" value="dark" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Cupcake" value="cupcake" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Bumblebee" value="bumblebee" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Emerald" value="emerald" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Corporate" value="corporate" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Synthwave" value="synthwave" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Retro" value="retro" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Cyberpunk" value="cyberpunk" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Valentine" value="valentine" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Halloween" value="halloween" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Garden" value="garden" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Forest" value="forest" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Aqua" value="aqua" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Lofi" value="lofi" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Pastel" value="pastel" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Fantasy" value="fantasy" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Wireframe" value="wireframe" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Black" value="black" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Luxury" value="luxury" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Dracula" value="dracula" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="CMYK" value="cmyk" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Autumn" value="autumn" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Business" value="business" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Acid" value="acid" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Lemonade" value="lemonade" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Night" value="night" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Coffee" value="coffee" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Winter" value="winter" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Dim" value="dim" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Nord" value="nord" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Sunset" value="sunset" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Caramellatte" value="caramellatte" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Abyss" value="abyss" /></li>
<li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Silk" value="silk" /></li>
</ul>
</div>
</div>
<section class="card bg-base-100 shadow mt-4">
<div class="card-body">
<h2 class="card-title">弹窗示例</h2>
<p class="text-base-content/70">点击按钮打开弹窗，测试不同主题下的视觉效果。</p>
<div>
<button class="btn btn-primary" @click="open = true">打开弹窗</button>
</div>
</div>
</section>
<div class="modal" :class="{ 'modal-open': open }">
<div class="modal-box">
<h3 class="font-bold text-lg">Hello!</h3>
<p class="py-4">这就是 daisyUI + Alpine</p>
<div class="modal-action">
<button class="btn" @click="open = false">关闭</button>
</div>
</div>
</div>
</div>
<div x-data="{ subMenuOpen: false }" class="max-w-5xl mx-auto mt-6">
<div class="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">Alpine 控制子菜单</h2>
<p class="text-base-content/70">
通过 Alpine 添加/删除 <code>menu-dropdown-show</code> 类来控制子菜单展开状态。
</p>
<ul class="menu bg-base-200 rounded-box w-72">
<li><a>Item 1</a></li>
<li>
<span
class="menu-dropdown-toggle cursor-pointer"
:class="{ 'menu-dropdown-show': subMenuOpen }"
@click="subMenuOpen = !subMenuOpen">
Parent
</span>
<ul class="menu-dropdown" :class="{ 'menu-dropdown-show': subMenuOpen }">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<section
class="max-w-5xl mx-auto mt-6"
x-data="{
currentTheme: 'bumblebee-custom',
themes: ['light','dark','cupcake','bumblebee','emerald','corporate','synthwave','retro','cyberpunk','valentine','halloween','garden','forest','aqua','lofi','pastel','fantasy','wireframe','black','luxury','dracula','cmyk','autumn','business','acid','lemonade','night','coffee','winter','dim','nord','sunset','caramellatte','abyss','silk'],
applyTheme(theme) {
this.currentTheme = theme;
document.documentElement.setAttribute('data-theme', theme);
}
}"
x-init="currentTheme = document.documentElement.getAttribute('data-theme') || 'light'">
<div class="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">主题预览网格</h2>
<p class="text-base-content/70">点击任意卡片即可切换页面主题。</p>
<div class="rounded-box grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
<template x-for="theme in themes" :key="theme">
<button
type="button"
class="border-base-content/20 hover:border-base-content/40 overflow-hidden rounded-lg border outline-2 outline-offset-2 outline-transparent transition"
:class="{ 'outline-base-content!': currentTheme === theme }"
@click="applyTheme(theme)">
<div :data-theme="theme" class="bg-base-100 text-base-content w-full cursor-pointer font-sans text-left">
<div class="grid grid-cols-5 grid-rows-3">
<div class="bg-base-200 col-start-1 row-span-2 row-start-1"></div>
<div class="bg-base-300 col-start-1 row-start-3"></div>
<div class="bg-base-100 col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 p-2">
<div class="font-bold" x-text="theme"></div>
<div class="flex flex-wrap gap-1">
<div class="bg-primary flex aspect-square w-5 items-center justify-center rounded lg:w-6"><div class="text-primary-content text-sm font-bold">A</div></div>
<div class="bg-secondary flex aspect-square w-5 items-center justify-center rounded lg:w-6"><div class="text-secondary-content text-sm font-bold">A</div></div>
<div class="bg-accent flex aspect-square w-5 items-center justify-center rounded lg:w-6"><div class="text-accent-content text-sm font-bold">A</div></div>
<div class="bg-neutral flex aspect-square w-5 items-center justify-center rounded lg:w-6"><div class="text-neutral-content text-sm font-bold">A</div></div>
</div>
</div>
</div>
</div>
</button>
</template>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="niah-table">
<!-- head -->
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</section>
<div
class="max-w-5xl mx-auto mt-6"
x-data="{
expanded: { '1': true, '2': true },
rows: [
{ id: '1', parentId: null, level: 0, name: 'Cy Ganderton', job: 'Quality Control Specialist', color: 'Blue' },
{ id: '2', parentId: '1', level: 1, name: 'Hart Hagerty', job: 'Desktop Support Technician', color: 'Purple' },
{ id: '3', parentId: '2', level: 2, name: 'Brice Swyre', job: 'Tax Accountant', color: 'Red' },
{ id: '4', parentId: null, level: 0, name: 'Alice Johnson', job: 'Product Manager', color: 'Green' },
{ id: '5', parentId: '4', level: 1, name: 'Tom Clark', job: 'UI Engineer', color: 'Orange' }
],
hasChildren(id) {
return this.rows.some((row) => row.parentId === id);
},
isExpanded(id) {
return !!this.expanded[id];
},
toggle(id) {
this.expanded[id] = !this.isExpanded(id);
},
isVisible(row) {
if (!row.parentId) return true;
let parent = this.rows.find((item) => item.id === row.parentId);
while (parent) {
if (!this.isExpanded(parent.id)) return false;
if (!parent.parentId) return true;
parent = this.rows.find((item) => item.id === parent.parentId);
}
return true;
}
}">
<div class="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">Tree Table 示例</h2>
<p class="text-base-content/70">点击箭头可展开/收起子节点。</p>
<div class="overflow-x-auto rounded-box border border-base-content/5 bg-base-100">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<template x-for="row in rows" :key="row.id">
<tr x-show="isVisible(row)">
<th x-text="row.id"></th>
<td>
<div class="flex items-center gap-2" :style="`padding-left: ${row.level * 1.5}rem`">
<button
type="button"
class="btn btn-ghost btn-xs"
x-show="hasChildren(row.id)"
@click="toggle(row.id)">
<span x-text="isExpanded(row.id) ? '▾' : '▸'"></span>
</button>
<span x-show="!hasChildren(row.id)" class="w-5 inline-block"></span>
<span x-text="row.name"></span>
</div>
</td>
<td x-text="row.job"></td>
<td x-text="row.color"></td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
评论 (0)