lovelace card mod

การ์ด-mod3

ช่วยให้คุณใช้สไตล์ CSS กับองค์ประกอบต่างๆ ของส่วนหน้าของ Home Assistant

กำลังติดตั้ง

ติดตั้งโดยใช้ HACS หรือดูคำแนะนำนี้

การปรับปรุงประสิทธิภาพ

แม้ว่า card-mod จะสามารถติดตั้งเป็นทรัพยากร lovelace ได้ แต่ฟังก์ชันการทำงานบางอย่างจะได้รับประโยชน์อย่างมากจากการติดตั้งเป็นโมดูลส่วนหน้าแทน

ในการทำเช่นนั้น ให้เพิ่มสิ่งต่อไปนี้ลงในไฟล์ configuration.yaml ของคุณ และรีสตาร์ท Home Assistant:

 frontend :
  extra_module_url :
    - /local/card-mod.js

คุณจะต้องปรับเส้นทางนั้นตามตำแหน่งที่คุณติดตั้ง card-mod.js หากคุณติดตั้งผ่าน HACS นี่อาจเป็น /hacsfiles/lovelace-card-mod/card-mod.js

คำจำกัดความของทรัพยากรใดๆ ที่เพิ่มโดยอัตโนมัติโดย HACS สามารถคงไว้เหมือนเดิมหลังจากเพิ่ม extra_module_url แล้ว

เริ่มต้นอย่างรวดเร็ว

• เปิดการ์ดของคุณในตัวแก้ไข GUI
• คลิกปุ่ม "แสดงรหัส EDITOR" ที่ด้านล่าง
• เพิ่มสิ่งต่อไปนี้ที่ด้านล่างของรหัส:

 card_mod :
  style : |
    ha-card {
      color: red;
    }

คุณควรเห็นข้อความในการ์ดเปลี่ยนเป็นสีแดงขณะที่คุณพิมพ์
คุณควรเห็นไอคอนแปรงเล็กๆ โผล่ขึ้นมาใกล้ๆ ปุ่ม "SHOW VISUAL EDITOR" สิ่งนี้บ่งชี้ว่าการ์ดใบนี้มีรหัส mod ของการ์ดซึ่งจะไม่แสดงในโปรแกรมแก้ไขภาพ

การใช้งาน

การ์ดจัดแต่งทรงผม

การ์ดได้รับการออกแบบโดยเพิ่มสิ่งต่อไปนี้ในการกำหนดค่าการ์ด:

 card_mod :
  style : <STYLES>

หากเป็นรูปแบบที่ง่ายที่สุด <STYLES> คือสตริงของ CSS ซึ่งจะถูกแทรกเข้าไปในองค์ประกอบ <ha-card> ของการ์ด

หมายเหตุ: card-mod ใช้งานได้กับการ์ดที่มีองค์ประกอบ ha-card เท่านั้น ซึ่งรวมถึงการ์ดเกือบทุกใบที่สามารถ มองเห็นได้ แต่ไม่รวม เช่น conditional , entity_filter , vertical-stack , horizontal-stack , grid

โปรดทราบว่าการ์ดเหล่านั้นมักจะรวมการ์ดอื่นๆ ไว้ด้วย ซึ่งตัวดัดแปลงการ์ด สามารถ ใช้งานได้
ดูคู่มือสำหรับการ์ดแต่ละใบเพื่อดูวิธีระบุพารามิเตอร์สำหรับการ์ดที่ให้มา

องค์ประกอบด้านล่างสุดที่สามารถจัดสไตล์ได้คือ <ha-card>

ภาพหน้าจอขององค์ประกอบ ha-card ในตัวตรวจสอบ Chrome DOM

เคล็ดลับ: ธีม Home Assistant ใช้ตัวแปร CSS สิ่งเหล่านี้สามารถตั้งค่าและใช้ใน card-mod - นำหน้าด้วยขีดกลางสองอัน:

 card_mod :
  style : |
    ha-card {
      --ha-card-background: teal;
      color: var(--primary-color);
    }

การจัดรูปแบบเอนทิตี ป้าย และองค์ประกอบ

ใน entities และการ์ด glance แต่ละเอนทิตีสามารถมีตัวเลือกได้ องค์ประกอบเหล่านั้นสามารถจัดสไตล์แยกกันได้โดยการเพิ่มพารามิเตอร์ card_mod ให้กับการกำหนดค่าเอนทิตี

ในกรณีเหล่านั้น สไตล์จะถูกแทรกเข้าไปใน shadowRoot และองค์ประกอบที่อยู่ด้านล่างสุดจึงเข้าถึงได้ผ่าน :host

นอกจากนี้ยังใช้กับการดูป้ายและองค์ประกอบในการ์ด picture-elements

 type : entities
entities :
  - entity : light.bed_light
    card_mod :
      style : |
        :host {
          color: red;
          }
  - entity : light.ceiling_lights
    card_mod :
      style : |
        :host {
          color: green;
        }
  - entity : light.kitchen_lights
    card_mod :
      style : |
        :host {
          color: blue;
        }

การเปลี่ยนไอคอน

เมื่อติดตั้ง card-mod แล้ว องค์ประกอบ <ha-icon> ที่ใช้ เช่น โดย entities glance และการ์ดอื่นๆ อีกมากมาย จะตั้งค่าไอคอนของให้เป็นค่าที่พบในตัวแปร CSS --card-mod-icon (ถ้ามี)

นอกจากนี้ยังจะตั้งค่าสีไอคอนให้เป็นค่าที่พบในตัวแปร CSS --card-mod-icon-color หากมี สิ่งนี้จะละเว้นสถานะของเอนทิตี แต่จะยังคงสลัวเว้นแต่คุณจะตั้ง --card-mod-icon-dim เป็น none ด้วย

- entity : light.bed_light
  card_mod :
    style : |
      :host {
        --card-mod-icon: mdi:bed;
      }

เทมเพลต

สไตล์ทั้งหมดอาจมีเทมเพลต jinja2 ที่จะประมวลผลโดยแบ็คเอนด์ Home Assistant

card-mod ยังทำให้ตัวแปรต่อไปนี้พร้อมใช้งานสำหรับเทมเพลต:

• config - การกำหนดค่าทั้งหมดของการ์ด เอนทิตี หรือตราสัญลักษณ์ - ( config.entity อาจเป็นที่สนใจเป็นพิเศษ)
• user - ชื่อของผู้ใช้ที่เข้าสู่ระบบในปัจจุบัน
• browser - browser_id ของเบราว์เซอร์ของคุณ หากคุณติดตั้ง browser_mod ไว้
• hash - อะไรก็ตามที่ตามหลัง # ใน URL ปัจจุบัน (พิจารณาเฉพาะในการโหลดครั้งแรกเท่านั้น ไม่มีการอัปเดตแบบไดนามิก)

การนำทาง DOM

Home Assistant ใช้ประโยชน์จากสิ่งที่เรียกว่า Shadow DOM อย่างกว้างขวาง ซึ่งช่วยให้นำส่วนประกอบต่างๆ มาใช้ซ้ำได้ง่าย (เช่น ha-card หรือ ha-icon ) แต่ทำให้เกิดปัญหาบางอย่างเมื่อพยายามใช้สไตล์ CSS กับสิ่งต่างๆ

เมื่อสำรวจการ์ดในตัวตรวจสอบองค์ประกอบเบราว์เซอร์ของคุณ คุณอาจเจอบรรทัดที่เขียนว่า " #shadow-root (open) " (แน่นอนว่าสิ่งที่กล่าวนั้นขึ้นอยู่กับเบราว์เซอร์ของคุณ) และสังเกตเห็นว่าองค์ประกอบภายในนั้นไม่ได้สืบทอด สไตล์จากภายนอก

เพื่อที่จะจัดสไตล์องค์ประกอบภายใน shadow-root คุณจะต้องสร้าง style: พจนานุกรม แทนที่จะเป็นสตริง

สำหรับแต่ละรายการพจนานุกรม คีย์จะถูกใช้เพื่อเลือกองค์ประกอบหนึ่งรายการหรือหลายรายการผ่านฟังก์ชัน querySelector() ที่แก้ไขแล้ว ค่าของรายการจะถูกฉีดเข้าไปในองค์ประกอบเหล่านั้น

หมายเหตุ: ฟังก์ชัน querySelector() ที่ถูกแก้ไขจะแทนที่เครื่องหมายดอลลาร์ ( $ ) ด้วย #shadow-root ในตัวเลือก

กระบวนการนี้เป็นแบบเรียกซ้ำ ดังนั้นค่าจึงอาจเป็นพจนานุกรมด้วย ปุ่ม " . " (จุด) จะเลือกองค์ประกอบปัจจุบัน

ตัวอย่าง:

มาเปลี่ยนสีของชื่อระดับที่สามทั้งหมด ( ### like this ) ในการ์ดมาร์กดาวน์ และเปลี่ยนพื้นหลังด้วย

หากเราดูการ์ดในตัวตรวจสอบองค์ประกอบของ Chrome จะมีลักษณะดังนี้:

องค์ประกอบ <ha-card> คือองค์ประกอบฐาน และจากนั้นเราจะเห็นว่าเราต้องผ่าน #shadow-root หนึ่งรายการเพื่อไปถึง <h3> #shadow-root นั้นอยู่ภายในองค์ประกอบ <ha-markdown> ดังนั้นตัวเลือกของเราจะเป็น:

 ha-markdown$

ซึ่งจะค้นหาองค์ประกอบแรก <ha-markdown> จากนั้นตามด้วย #shadow-root ทั้งหมดภายในนั้น

ในการเพิ่มพื้นหลังให้กับ <ha-card> เราต้องการนำสไตล์ไปใช้กับองค์ประกอบฐานโดยตรง ซึ่งมีคีย์

 .

สิ่งนี้ทำให้ได้สไตล์สุดท้าย:

 card_mod :
  style :
    ha-markdown$ : |
      h3 {
        color: purple;
      }
    . : |
      ha-card {
        background: teal;
      } 

หมายเหตุ: กลุ่มตัวเลือกของคิวจะค้นหาทีละองค์ประกอบโดยคั่นด้วยช่องว่างหรือ " $ "
สำหรับแต่ละขั้นตอน ระบบจะเลือกเฉพาะรายการแรกเท่านั้น
แต่สำหรับตัวเลือกสุดท้ายของเชน (เช่น ในคีย์พจนานุกรมที่กำหนด) องค์ประกอบที่ตรงกัน ทั้งหมด จะถูกเลือก เชนที่ลงท้ายด้วย $ เป็นกรณีพิเศษเพื่อความสะดวกในการเลือก shadowroots ขององค์ประกอบทั้งหมด

ตัวอย่างต่อไปนี้จะเลือกองค์ประกอบ div ในเครื่องหมายแรกบนการ์ดแผนที่:

 "ha-map $ ha-entity-marker $ div" : |

แต่สิ่งต่อไปนี้จะเลือกองค์ประกอบ div ในเครื่องหมายแผนที่ทั้งหมดบนการ์ดแผนที่ (เนื่องจากเราสิ้นสุดคีย์แรกบนตัวเลือก ha-entity-marker $ และเริ่มการค้นหาใหม่ภายในแต่ละผลลัพธ์สำหรับ div ):

 " ha-map $ ha-entity-marker $ " :
  "div" : |

หมายเหตุ 2: ปฏิบัติตามหมายเหตุข้างต้น เนื่องจากการเพิ่มประสิทธิภาพลำดับการโหลดในระดับสูงที่ใช้ใน Home Assistant จึงไม่รับประกันว่าองค์ประกอบ ha-entity-marker จะมีอยู่ในเวลาที่ card-mod กำลังมองหาองค์ประกอบเหล่านั้น หากคุณหักโซ่อีกครั้ง:

 " ha-map $ " :
  " ha-entity-marker $ " :
    "div" : |

จากนั้น card-mod จะสามารถลองค้นหาจากจุด ha-map $ ครั้งในภายหลัง ซึ่งอาจนำไปสู่ผลลัพธ์ที่เสถียรยิ่งขึ้น

ในระยะสั้น; หากสิ่งต่าง ๆ ดูเหมือนจะทำงานเป็นระยะ ๆ ให้ลองแยกโซ่ออกเป็นหลายขั้นตอน

เคล็ดลับการแก้ไขข้อบกพร่อง

การนำทาง DOM อาจทำได้ยากในช่วง 2-3 ครั้งแรก แต่คุณจะเข้าใจได้ในที่สุด

เพื่อช่วยคุณ คุณสามารถใช้ Element inspector ของเบราว์เซอร์เพื่อดูว่า card-mod ดำเนินการขั้นตอนใดบ้าง

• เปิดตัวตรวจสอบองค์ประกอบและค้นหาองค์ประกอบฐาน (เช่น <ha-card> ) ซึ่งควรมีองค์ประกอบ <card-mod> ไม่ว่าคุณจะระบุสไตล์หรือไม่ก็ตาม
• ตรวจสอบให้แน่ใจว่าได้เลือกองค์ประกอบ <card-mod> แล้ว
• เปิดคอนโซลของเบราว์เซอร์ (ใน Chrome คุณสามารถกด Esc เพื่อเปิดคอนโซลและผู้ตรวจสอบในเวลาเดียวกัน)
• พิมพ์ $0.card_mod_input แล้วกด Enter
  นี่คือข้อมูลสไตล์ที่ได้รับขั้นตอนของห่วงโซ่ ถ้าเป็นเชือก แสดงว่าคุณอยู่ที่ปลายโซ่ หากเป็นวัตถุ คุณสามารถไปยังจุดถัดไปได้
• พิมพ์ $0.card_mod_children แล้วกด Enter
  นี่คือชุดขององค์ประกอบ <card-mod> ใดๆ ในขั้นตอนถัดไปของห่วงโซ่ใดๆ การคลิก "card-mod" ใน value: ของรายการที่กำหนดจะนำคุณไปยังองค์ประกอบ <card-mod> ในตัวตรวจสอบ และคุณสามารถตรวจสอบส่วนที่เหลือของห่วงโซ่ต่อไปได้
• คุณยังสามารถใช้ $0.card_mod_parent เพื่อค้นหาพาเรนต์ขององค์ประกอบ <card-mod> ใดๆ ในห่วงโซ่

สำหรับข้อมูลเพิ่มเติม คุณสามารถใช้สิ่งต่อไปนี้ในการกำหนดค่าการ์ดที่คุณประสบปัญหา มันอาจช่วยคุณได้หรือไม่ก็ได้

 card_mod :
  debug : true

จัดรูปแบบการ์ดที่ไม่มีองค์ประกอบ <ha-card>

การ์ดที่ไม่มี <ha-element> ยังคงสามารถจัดสไตล์ได้โดยใช้การ์ด custom:mod-card ที่ให้มา

นี่เป็นสิ่งจำเป็นใน บาง กรณีเท่านั้น และมีแนวโน้มที่จะนำมาซึ่งปัญหามากกว่าที่จะแก้ไขได้

เป็นไปได้มากว่าการ์ดของคุณมีการ์ดอีกใบ ซึ่งในกรณี นี้ คือการ์ดที่คุณควรใช้สไตล์

คำเตือนก็พอแล้ว

ฉันรู้ว่าฉันกำลังทำอะไรอยู่

 type : custom:mod-card
card :
  type : vertical-stack # for example
  ...
card_mod :
  style : |
    ha-card {
      ...
    }

mod-card จะสร้างองค์ประกอบ <ha-card> โดยลบพื้นหลังและเส้นขอบออก แล้วใส่การ์ดของคุณเข้าไปข้างใน

ตัวอย่างเพิ่มเติม

กรณีทดสอบทั้งหมดของฉันมีอยู่ในไดเร็กทอรี test/views

คุณสามารถสาธิตใน docker ได้โดยไปที่ไดเร็กทอรี test และเรียกใช้:

 docker-compose up

จากนั้นไปที่ http://localhost:8125 และเข้าสู่ระบบด้วยชื่อผู้ใช้ dev และรหัสผ่าน dev

หรือคุณสามารถใช้ vscode devcontainer และรันงาน " Run hass "

ธีมส์

สำหรับคำแนะนำเกี่ยวกับวิธีพัฒนาธีมการ์ด-ม็อด โปรดดูที่ README-themes.md

การพัฒนา

สำหรับการเพิ่มพลังการจัดรูปแบบการ์ด-ม็อดให้กับการ์ดที่คุณกำหนดเอง โปรดดูที่ README-developers.md

---