跳至主要内容

層次與深度

AppFuse Web 以邊框與背景色建立視覺層次，而非傳統的陰影。這種設計在淺色和深色主題下都能保持清晰的層級區分。

設計原則​

  • 以背景色區分層級：使用 base-100 → base-200 → base-300 建立深度
  • 以邊框劃分區域：使用 border-base-300 劃分相鄰區塊
  • 陰影僅用於浮層：只有脫離文件流的浮動元素使用陰影

背景色層級​

層級Class用途
Level 0bg-base-100頁面主背景、卡片內容區域
Level 1bg-base-200側邊欄、表格標頭、區塊背景
Level 2bg-base-300邊框色、hover 狀態、分隔線
// 背景層級範例
<main className="bg-base-100">                    {/* Level 0: 頁面 */}
  <aside className="bg-base-200">                  {/* Level 1: 側邊欄 */}
    <nav>...</nav>
  </aside>
  <div className="border border-base-300">         {/* Level 2 作為邊框 */}
    <table>
      <thead className="bg-base-200">              {/* Level 1: 表頭 */}
        <tr>...</tr>
      </thead>
      <tbody>...</tbody>
    </table>
  </div>
</main>

--depth CSS 變數​

DaisyUI 的 --depth 變數控制元件的立體感：

值效果說明
0扁平無邊框陰影效果
1立體顯示邊框陰影效果（Fusion 主題預設值）
/* Fusion 主題設定 */
--depth: 1;  /* 啟用立體邊框效果 */

Ghost Variant 強制扁平​

Button 的 ghost variant 強制使用 --depth: 0，確保 ghost 按鈕不受主題 --depth 設定影響：

// ghost variant 內部樣式
'[--depth:0] hover:bg-transparent hover:bg-none hover:border-transparent'

陰影使用規範​

陰影僅用於脫離文件流的浮動元素：

元素陰影原因
Dropdown 選單shadow-lg浮動於內容之上，需要明確的層級區分
Dialog / Modalshadow-lg覆蓋全頁面的浮層
Toast 訊息shadow-lg浮動通知
Tooltipshadow-lg浮動提示
卡片—不使用陰影，以邊框區分
按鈕—不使用陰影，以 --depth 控制立體感
表格—不使用陰影，以背景色區分
// ✅ Do：浮動元素使用陰影
<div className="dropdown-content shadow-lg">...</div>

// ❌ Don't：非浮動元素使用陰影
<div className="card shadow-lg">...</div>   {/* 卡片應使用邊框 */}

--noise 變數​

--noise 變數控制噪點紋理效果，Fusion 主題設為 0（無噪點）：

--noise: 0;  /* 無噪點紋理 */

相關文件​