跳至主要內容
樂高資訊科技有限公司 UI Components daisyUI extensions
Tailwind CSS 4 + daisyUI 5 Vanilla JavaScript No React / Vue

保留經典設計，重構成現代 UI 元件庫

這個專案將過去自行製作、仍具有視覺特色的 HTML Components，重新整理為可重用的 daisyUI 擴充元件。元件沿用 Tailwind 與 daisyUI 的主題變數、尺寸與互動規則，同時維持原設計最有辨識度的部分。

瀏覽全部元件 查看使用方式
元件
6
Demo
7
主題
2

GETTING STARTED

如何使用

本專案同時保留原始碼與編譯完成的 dist。開發元件時重新建置；其它專案則可直接載入編譯後的 CSS，再依需要加入個別 JavaScript。

1

安裝相依套件

npm install

安裝 Tailwind、daisyUI、Tabler Icons 與 Picture Box 選配套件。

2

建立發佈檔案

npm run build

輸出 CSS、共用 JavaScript、Tabler 圖示與彩色 SVG 至 dist。

3

載入元件庫

<link rel="stylesheet"
   href="/dist/ui-components.css">

CSS 元件只需這一個檔案；需要行為的元件再載入對應 script。

純 CSS 擴充

Alert Animation、Field Soft、Floating Label Frame 與 Color Icon Button 載入 CSS 後即可使用。

按需載入 JavaScript

Block Loader 載入 block-loader.js；Picture Box 載入 picture-box.js，FilePond Adapter 則為選配。

COMPONENT CATALOG

元件與 Demo

每個元件都保留 daisyUI 原本的語意與狀態，新增的 class 或 API 只負責擴充能力。

6 components · 7 demos
CSS modifier .alert-animation

Alert Animation

替 daisyUI Alert 加入獨立的移動斜紋層，可搭配語意色、soft、outline、dash 與方向變體。

<div class="alert alert-info alert-animation">
   系統正在同步資料
</div>
開啟 Demo 使用文件
JavaScript UicBlockLoader

Block Loader

以四色 Orbit 動畫與主題遮罩阻擋整頁或指定元素，並管理 aria-busy、inert 與焦點還原。

const oLoader = UicBlockLoader.show(oPanel, {
   text: '更新資料中'
});
await oLoader.hide();
開啟 Demo 使用文件
CSS modifier .field-soft

Field Soft

柔化 input、select、file input 與 textarea 的框線及 focus outline，也能與各欄位的 Ghost 樣式共用。

<input class="input field-soft"
   placeholder="姓名">
開啟 Demo 使用文件
CSS component .floating-label-frame

Floating Label Frame

以真正分段的內框與 focus 外框呈現浮動標籤，不必用背景色遮住欄位線條，並可搭配 Field Soft。

<label class="floating-label floating-label-frame">
   <input class="input field-soft">
   ...
</label>
開啟 Demo 使用文件

圖片預覽與尺寸指引

Core + optional FilePond adapter

JavaScript Optional adapter [data-picture-box]

Picture Box

呈現圖片目標尺寸、比例尺規、預覽與生命週期狀態；可單獨使用原生 file input，也能選配 FilePond。

<div data-picture-box
   data-width="1200" data-height="800">
   <input type="file" accept="image/*">
</div>
完整 Demo 響應式 Demo 使用文件
CSS modifier .btn-color-icon

Color Icon Button

讓 daisyUI Button 呈現專案彩色 SVG，可使用純圖示、固定文字、join 群組或 200ms 互動展開標籤。

<button class="btn btn-square btn-color-icon">
   <img src="/icons/color/save.svg" alt="">
</button>
開啟 Demo 使用文件