Bubble Card：不用 card-mod 也能客製的卡片組

charles

上一篇講 card-mod，這篇講一個不需要 card-mod 的選擇。



Bubble Card 是什麼

一個極簡風格的卡片組，特色是：

• 現代的彈出視窗（pop-up） —— 點一下從底部滑出來
  
• 內建的樣式管線 —— 不用裝 card-mod
  
• 模組商店 —— 超過一百個社群做的模組可以直接套用
  

安裝

• HACS → 前端 → 搜尋 Bubble Card → 下載
  
• Ctrl+F5
  

最基本的卡片

1. type: custom:bubble-card
2. card_type: button
3. entity: light.living_room
4. name: 客廳
5. icon: mdi:sofa

複製代碼

card_type 有哪些

• button —— 按鈕（最常用）
  
• pop-up —— 彈出視窗
  
• separator —— 分隔線（用來分段）
  
• cover —— 窗簾控制
  
• climate —— 冷暖氣
  
• media-player —— 媒體播放
  
• select —— 下拉選單
  
• horizontal-buttons-stack —— 橫向的按鈕列（可以捲動）
  
• calendar —— 行事曆
  

button 的四種子型態

1. type: custom:bubble-card
2. card_type: button
3. button_type: slider      # slider / switch / state / name
4. entity: light.living_room

複製代碼

• slider —— 整張卡片就是亮度滑桿，左右滑就能調（很好用）
  
• switch —— 純開關
  
• state —— 只顯示狀態
  
• name —— 只顯示名稱
  

slider 是 Bubble Card 最受歡迎的功能 ——
在手機上滑一下就調好亮度，比點開詳細視窗再拉滑桿快太多。

彈出視窗（這是它的招牌）



做法：在一個分頁裡放一個 pop-up 卡片，然後用按鈕觸發它。

第一步：建立彈出視窗

1. type: custom:bubble-card
2. card_type: pop-up
3. hash: "#living-room"
4. name: 客廳
5. icon: mdi:sofa

複製代碼

hash 是這個彈窗的「網址代號」，要以 # 開頭。

第二步：在彈窗底下放你要的卡片

在同一個 vertical-stack 裡，pop-up 卡片後面的卡片
都會出現在彈窗裡：

1. type: vertical-stack
2. cards:
3.   - type: custom:bubble-card
4.     card_type: pop-up
5.     hash: "#living-room"
6.     name: 客廳
7.     icon: mdi:sofa
9.   - type: tile
10.     entity: light.living_room
11.     features:
12.       - type: light-brightness
14.   - type: tile
15.     entity: climate.living_room
17.   - type: history-graph
18.     entities:
19.       - sensor.living_room_temperature

複製代碼

第三步：做一個按鈕來開它

1. type: custom:bubble-card
2. card_type: button
3. button_type: name
4. name: 客廳
5. icon: mdi:sofa
6. tap_action:
7.   action: navigate
8.   navigation_path: "#living-room"

複製代碼

點那個按鈕，彈窗就從底部滑出來。

為什麼這個設計好：

• 主頁保持乾淨 —— 只有幾個大按鈕
  
• 詳細控制藏在彈窗裡 —— 需要才打開
  
• 手機上的體驗很好 —— 就像原生 App
  
• 按返回鍵會關閉彈窗（因為是用網址 hash 做的）
  

橫向按鈕列

1. type: custom:bubble-card
2. card_type: horizontal-buttons-stack
3. 1_name: 客廳
4. 1_icon: mdi:sofa
5. 1_link: "#living-room"
6. 2_name: 主臥
7. 2_icon: mdi:bed
8. 2_link: "#bedroom"
9. 3_name: 廚房
10. 3_icon: mdi:stove
11. 3_link: "#kitchen"
12. 4_name: 浴室
13. 4_icon: mdi:shower
14. 4_link: "#bathroom"
15. auto_order: true

複製代碼

一排可以左右捲動的按鈕，放在頁面最上面當導覽列。

這個配彈出視窗是 Bubble Card 最經典的用法。



客製外觀：不用 card-mod

Bubble Card 有自己的樣式管線。

在卡片編輯器裡：

• Styling options → Custom styles & JS templates
  
• 直接寫 CSS
  

或者用 YAML：

1. type: custom:bubble-card
2. card_type: button
3. entity: light.living_room
4. styles: |
5.   .bubble-button-background {
6.     opacity: 1 !important;
7.     background: {% if is_state('light.living_room','on') %}
8.       linear-gradient(90deg, #FFC107 0%, #FF9800 100%)
9.     {% else %}
10.       var(--card-background-color)
11.     {% endif %} !important;
12.   }
13.   .bubble-icon {
14.     color: {{ 'white' if is_state('light.living_room','on') else 'grey' }};
15.   }

複製代碼

一樣支援 Jinja 範本。

模組商店（Module Store）

這是 Bubble Card 比較特別的功能。

• 卡片編輯器 → Modules 區段
  
• 可以從商店安裝社群做好的模組（超過一百個）
  
• 也可以自己寫模組，寫一次到處套用
  

常見的模組：

• 風扇轉動動畫（速度對應實際風速）
  
• 卡片依狀態變色
  
• 圖示脈動
  
• 進度條
  
• 各種佈景主題風格
  

套用的方式：

1. type: custom:bubble-card
2. card_type: button
3. entity: fan.living_room
4. modules:
5.   - fan_animation
6.   - color_by_state

複製代碼

一張卡片可以套用多個模組。

自己寫模組

• 在模組編輯器寫 CSS 和／或 JavaScript 範本
  
• 可以做一個自訂的設定介面（例如顏色選擇器）
  
• 存檔之後，任何卡片都能套用
  

這個設計解決了 card-mod 的一個痛點：
用 card-mod 的話，同樣的 CSS 要在每張卡片上複製一次。

Bubble Card 的模組寫一次，到處套用。



Bubble Card vs Mushroom vs 原生 Tile

原生 Tile

• 官方維護，永遠不會壞
  
• 功能夠用
  
• 客製化有限（要配 card-mod）
  

Mushroom

• 最受歡迎的第三方卡片組
  
• 風格統一、好看
  
• 卡片類型很多（燈、冷氣、人物、警報…）
  
• 配 card-mod 可以做很多變化
  

Bubble Card

• 彈出視窗是獨門功能
  
• slider 按鈕在手機上很好用
  
• 自帶樣式系統，不用 card-mod
  
• 模組商店省很多時間
  

我的建議

• 先用原生 Tile，能滿足就不要裝東西
  
• 想要統一的好看風格 → Mushroom
  
• 想要 App 般的彈窗體驗 → Bubble Card
  
• 三個可以混用（我自己就是混用的）
  

混用的原則：

• 主頁的導覽用 Bubble Card（橫向按鈕 + 彈窗）
  
• 彈窗裡面用原生 Tile（可靠、功能完整）
  
• 需要特殊外觀的地方用 Mushroom
  

一個共同的提醒

這三個裡面只有 Tile 是官方的。

Mushroom 和 Bubble Card 都是社群維護的，
HA 大版本更新時有壞掉的可能。

我的做法：

• 家人最常用的那一頁盡量用原生卡片
  
• 自己玩的頁面再用第三方的
  
• 更新 HA 之前先看那些外掛有沒有人回報問題
  

---

下一篇：自訂主題 ——
從 CSS 變數開始，一次改變整個 HA 的外觀。