平面圖上的操作：點一下、長按、雙擊各做一件事

charles

這篇的內容（9 段）

1. 步驟 2：三種動作的完整寫法
2. 步驟 3：認識七個動作
3. 步驟 4：一個圖示三種亮度
4. 四個實務上的取捨
5. 一、雙擊在手機上不可靠
6. 二、不要把危險動作放在 tap
7. 三、cursor: pointer 不用自己加
8. 四、長按這件事沒人猜得到
9. 檢查清單

一個圖示可以做三件事：點一下、長按、快速點兩下。

這篇把三種動作全部寫完，而且每一段的程式碼都是完整可貼的 —— 包含被大多數教學省略的那一半：裡面呼叫到的腳本長什麼樣子、放在哪個檔案。



步驟 1：先知道「不寫會發生什麼」

這一條先講，因為它是「我點了沒反應」回報裡最大宗的原因。

1. 元素             沒寫 tap_action 時的預設行為
2. state-icon       跳出詳細資訊視窗（不是開關）
3. state-label      跳出詳細資訊視窗
4. image            跳出詳細資訊視窗（長按也是）
5. icon             什麼都不做

複製代碼

所以想要「點了就開關」，一定要明確寫出來。

很多人以為自己的卡片沒反應，其實是跳出了詳細資訊視窗，然後被當成「哦這個視窗跟我想要的不一樣」隨手關掉。

步驟 2：三種動作的完整寫法

1.   - type: state-icon
2.     entity: light.living_room
3.     title: 客廳主燈
4.     style: {top: 25%, left: 20%}
5.     tap_action:
6.       action: toggle
7.     hold_action:
8.       action: more-info
9.     double_tap_action:
10.       action: navigate
11.       navigation_path: /lovelace/living-room

複製代碼

你會看到什麼：

• 點一下 -> 燈開關，圖示顏色立刻變
  
• 按住不放約半秒再放開 -> 跳出燈的詳細視窗，可以調亮度色溫
  
• 快速點兩下 -> 跳到 living-room 那一頁
  

長按沒反應的話多半是按太短。HA 的判定是按住至少半秒再放開，這個時間寫死在前端，沒有地方可以調。

雙擊跳到的頁面是空白或 404，代表 navigation_path 指到不存在的頁。路徑要跟你儀表板網址列上看到的一模一樣，包含開頭的斜線。



步驟 3：認識七個動作

toggle —— 切換開關。適合燈、開關、風扇。

1.     tap_action:
2.       action: toggle

複製代碼

more-info —— 跳出詳細資訊視窗。感測器類的元素只能用這個（sensor 沒有開關可切）。

1.     tap_action:
2.       action: more-info

複製代碼

navigate —— 跳到另一個頁面。

1.     tap_action:
2.       action: navigate
3.       navigation_path: /lovelace/bedroom
4.       navigation_replace: true

複製代碼

navigation_replace 設 true 的話，這次跳轉不會留在瀏覽紀錄裡，按返回鍵會回到更前面那一頁。做牆上平板的時候很有用，不然按幾次返回會在兩頁之間彈來彈去。

路徑的三種寫法：

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

登入繼續閱讀使用 Google 登入