你的第一張可點平面圖：Picture Elements 從零開始

charles

這篇的內容（18 段）

1. 第一步：加入卡片
2. 第二步：先把預設的元素刪掉
3. 第三步：切到 YAML 模式
4. 第四步：貼上這段
5. 座標是怎麼回事
6. 一、是百分比，不是像素
7. 三、不要寫 top: 24（要寫 24%）
8. 第五步：把其他房間加上去
9. 四種最常用的元素類型
10. 1. state-icon（狀態圖示）
11. 2. state-label（狀態文字）
12. 3. icon（固定圖示）
13. 4. image（圖片）
14. 調整圖示大小和顏色
15. 常見問題
16. 問題一：圖示都擠在左上角
17. 問題二：點了沒反應
18. 做到這裡你應該有

圖片準備好了，這篇做出第一張可以點的平面圖。

做完這篇你就有成果了。



第一步：加入卡片

照這個順序點：

• 打開你的儀表板
  
• 右上角鉛筆圖示（編輯模式）
  
• ＋ 新增卡片
  
• 搜尋框打 picture
  
• 選 圖片元素（Picture Elements）
  

第二步：先把預設的元素刪掉

HA 會自動幫你放一個 State Badge 的元素當範例。

先刪掉它，不然會擋住你的視線。

第三步：切到 YAML 模式

這是我的建議：一開始就用 YAML，不要用圖形介面。

理由：

• 圖形介面調座標很慢（一格一格點）
  
• YAML 可以複製貼上，做第二個房間只要改兩個字
  
• 出問題的時候你看得到全貌
  

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

登入繼續閱讀使用 Google 登入