標題卡片徽章：用 type: button 和可見性條件，把區塊標題變成一條控制列

charles

這篇的內容（11 段）

1. 兩種徽章，不要搞混
2. 步驟 1：先有一張標題卡片
3. 步驟 2：加 entity 徽章顯示數值
4. 步驟 3：加 button 徽章
5. 步驟 4：可見性條件
6. 範例二：異常提示列
7. 範例三：場景快捷
8. 步驟 7：搭配區域卡片
9. 幾個實務上的建議
10. 三、區分「資訊」和「動作」
11. 做完之後你會發現的事

在 Sections 版面裡，每個區塊上面那一行字叫標題卡片（Heading card）。很多人以為它就只是一行字。

它右邊可以掛一排小徽章：有的顯示數值、有的按下去會動作，而且每一個都能設「什麼時候才出現」。



效果是：標題列平常很乾淨，只有兩個數字；家裡有東西開著、有東西出問題的時候，才多出對應的按鈕。等於不多佔一格空間就多了一排控制項。

兩種徽章，不要搞混

• entity 徽章（`type: entity`）—— 綁一顆實體，顯示它的圖示和狀態。也可以加動作
  
• button 徽章（`type: button`）—— 不綁實體，你自己給圖示和文字，按下去執行動作
  

`type: button` 是 HA 2026.2 加的。網路上 2025 年的文章只會講 entity 徽章，所以你會看到有人說「按鈕徽章就是加了 tap_action 的 entity 徽章」—— 那是兩回事。entity 徽章一定要綁實體、顯示的是那顆實體的名字和狀態；button 徽章可以寫任意文字，例如「全部關燈」。

步驟 1：先有一張標題卡片

• 儀表板 → 編輯模式
  
• 在一個 Sections 區塊裡按新增卡片 → 搜尋 標題（Heading）
  
• 填標題文字，選一個圖示
  

或者直接用程式碼編輯器：

1. type: heading
2. heading: 客廳
3. heading_style: title
4. icon: mdi:sofa

複製代碼

你會看到什麼：區塊上方出現一行粗體的「客廳」和一個沙發圖示。

heading_style 只有兩個值：`title`（大，預設）和 `subtitle`（小）。一個區塊裡有分組的時候，主標用 title、子標用 subtitle。

步驟 2：加 entity 徽章顯示數值

1. type: heading
2. heading: 客廳
3. heading_style: title
4. icon: mdi:sofa
5. badges:
6.   - type: entity
7.     entity: sensor.living_room_temperature
9.   - type: entity
10.     entity: sensor.living_room_humidity

複製代碼

你會看到什麼：標題右邊出現兩個小標籤，長得像「溫度計圖示 26.5 °C」「水滴圖示 58 %」。它們沒有底色，比一般的徽章小，刻意設計成不搶戲。

比放兩張 tile 卡片省非常多空間，而且數字和房間名在同一行，不用眼睛來回跑。

三個預設值要知道：

• 預設就會顯示狀態。不想要數值、只想要圖示的話加 `show_state: false`
  
• 預設不上色。圖示是灰的，不管實體開著還關著
  
• 舊寫法 `entities:` 已經棄用，改用 `badges:`。舊的還能跑，但視覺化編輯器不會認得
  

要它跟著狀態變色：

1.   - type: entity
2.     entity: light.living_room
3.     color: state

複製代碼

`color: state` 是一個特別的值，意思是「依照這顆實體的狀態、網域、裝置類別自動上色」—— 燈開了變黃、門開了變紅，跟 Tile 卡片的行為一樣。而且如果那顆燈支援 RGB，圖示會直接變成燈現在的顏色。

要它固定某個顏色：

1.   - type: entity
2.     entity: binary_sensor.front_door
3.     color: red

複製代碼

這裡有一個會讓你以為壞掉的行為：指定固定顏色的時候，只有實體處於「啟用」狀態才會上色。門關著的時候那個徽章還是灰的，開著才變紅。這是刻意的（不然滿排都是紅色就沒有警示效果了），但第一次看到會以為 `color: red` 沒生效。

怎麼證明：去「設定 → 工具 → 狀態」，把那顆 binary_sensor 手動設成 `on`，徽章立刻變紅。

以下還有約 80% 的內容
登入後即可閱讀完整教學

登入繼續閱讀使用 Google 登入