自己寫 CSS 太麻煩了

前幾天做出的介面雖然功能 OK，但自己刻 CSS 實在太累了。一堆方框和按鈕要調半天才好看。

既然這個工具是要給一般人用的，介面美觀很重要。與其花時間慢慢調 CSS，不如直接用現成的 UI 框架省事。

為什麼選 MDUI

我本來想用 Bootstrap 或 Tailwind，但後來發現了 MDUI 這個框架。

MDUI 的優勢：

• 基於 Material Design 3，設計很現代
• Web Components，可以直接在 HTML 裡用
• 支援暗色模式和動態顏色
• 不需要 React 或 Vue，直接就能用

最重要的是文件很完整，學習成本低。

安裝很簡單

直接用 npm 安裝：

npm install mdui

然後在 HTML 裡引入：

import 'mdui/mdui.css';
import 'mdui';

重構介面

把原本陽春的 HTML 改成 MDUI 元件：

原本的按鈕：

<button id="delete-btn">刪除選取的 APP</button>

改成 MDUI 的按鈕：

<mdui-button variant="filled" id="delete-btn">刪除選取的 APP</mdui-button>

看起來立刻專業很多！

加入 Card 和 List

把裝置列表改成卡片式設計：

<mdui-card variant="elevated">
  <mdui-card-content>
    <h3>連接的裝置</h3>
    <mdui-list>
      <mdui-list-item>
        <mdui-icon slot="icon">phone_android</mdui-icon>
        <div slot="headline">我的手機</div>
        <div slot="supporting-text">1234567890ABCDEF</div>
      </mdui-list-item>
    </mdui-list>
  </mdui-card-content>
</mdui-card>

APP 列表也改成 List 元件，每個項目都有 checkbox：

<mdui-list>
  <mdui-list-item>
    <mdui-checkbox slot="icon"></mdui-checkbox>
    <div slot="headline">Chrome 瀏覽器</div>
    <div slot="supporting-text">com.android.chrome</div>
  </mdui-list-item>
</mdui-list>

加入載入動畫

用 MDUI 的 Progress 元件顯示載入狀態：

<mdui-circular-progress></mdui-circular-progress>

取得 APP 列表時顯示轉圈圈，載入完成後隱藏。使用者體驗好很多。

暗色模式

MDUI 內建暗色模式，只要加一行就能切換：

import { setTheme } from 'mdui/functions/setTheme.js';
setTheme('dark');

可以讓使用者選擇淺色或深色主題。

改造後的效果

重新設計後，整個介面煥然一新：

• 卡片式設計看起來更專業
• 按鈕和元件都有 Material Design 的動畫效果
• 支援暗色模式
• 載入狀態有進度提示

從土炮 CSS 變成 Material Design，質感提升超多！

遇到的問題

Web Components 語法不熟

需要時間適應 <mdui-button> 這種寫法，跟一般 HTML 不太一樣。

事件處理有點不同

MDUI 元件的事件監聽方式跟原生 HTML 有些差異，需要查文件。

打包檔案變大

加入 MDUI 後專案大小增加不少，不過換來的是開發效率和美觀度。