Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

mod kartu 3

Memungkinkan Anda menerapkan gaya CSS ke berbagai elemen frontend Home Assistant.

Menginstal

Instal menggunakan HACS atau lihat panduan ini.

Peningkatan kinerja

Meskipun card-mod dapat dipasang sebagai sumber daya lovelace, beberapa fungsi akan mendapat manfaat besar jika dipasang sebagai modul frontend.

Untuk melakukannya, tambahkan yang berikut ke file configuration.yaml Anda dan mulai ulang Home Assistant: 

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

Anda harus menyesuaikan jalur tersebut sesuai dengan tempat Anda menginstal card-mod.js . Jika Anda menginstal melalui HACS, ini mungkin /hacsfiles/lovelace-card-mod/card-mod.js .

Definisi sumber daya apa pun yang ditambahkan secara otomatis oleh HACS dapat dipertahankan bahkan setelah menambahkan extra_module_url .

Mulai cepat

  • Buka kartu Anda di editor GUI
  • Klik tombol "TAMPILKAN EDITOR KODE" di bagian bawah
  • Tambahkan yang berikut ini ke bagian bawah kode: 
 card_mod :
  style : |
    ha-card {
      color: red;
    }

Anda akan melihat teks kartu berubah menjadi merah saat Anda mengetik.
Anda juga akan melihat ikon kuas kecil muncul di dekat tombol "SHOW VISUAL EDITOR". Ini menunjukkan bahwa kartu ini mempunyai kode mod kartu yang tidak akan ditampilkan di editor visual.

Mulai Cepat

Penggunaan

Kartu gaya

Kartu ditata dengan menambahkan yang berikut ini ke konfigurasi kartu: 

 card_mod :
  style : <STYLES>

Jika bentuknya paling sederhana, <STYLES> adalah string CSS yang akan dimasukkan ke dalam elemen <ha-card> pada kartu.

CATATAN: card-mod hanya berfungsi pada kartu yang mengandung elemen ha-card. Ini mencakup hampir semua kartu yang dapat dilihat , tetapi tidak misalnya conditional , entity_filter , vertical-stack , horizontal-stack , grid .

Namun perlu diperhatikan bahwa kartu tersebut sering kali menyertakan kartu lain, yang dapat digunakan oleh mod kartu.
Lihat manual setiap kartu untuk mengetahui cara menentukan parameter untuk kartu yang disertakan.

Elemen paling bawah yang bisa ditata adalah <ha-card> .

Tangkapan layar elemen ha-card di inspektur Chrome DOM

ha-kartu

TIPS: Tema Home Assistant menggunakan variabel CSS. Keduanya dapat diatur dan digunakan dalam card-mod - diawali dengan dua tanda hubung: 

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

Entitas penataan gaya, lencana, dan elemen

Dalam entities dan kartu glance , setiap entitas dapat memiliki opsi. Elemen tersebut dapat ditata secara individual dengan menambahkan parameter card_mod ke konfigurasi entitas.

Untuk kasus tersebut, gaya dimasukkan ke dalam shadowRoot, dan elemen paling bawah diakses melalui :host .

Hal ini juga berlaku untuk melihat lencana dan elemen dalam kartu 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;
        }

Mengubah ikon

Dengan card-mod terinstal, elemen <ha-icon> - digunakan misalnya oleh entities , glance , dan banyak kartu lainnya - akan menyetel ikonnya ke nilai yang ditemukan dalam variabel CSS --card-mod-icon (jika ada).

Ini juga akan mengatur warna ikon ke nilai yang ditemukan dalam variabel CSS --card-mod-icon-color jika ada. Ini mengabaikan status entitas, tetapi akan tetap redup kecuali Anda juga menyetel --card-mod-icon-dim ke none . 

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

Templat

Semua gaya mungkin berisi templat jinja2 yang akan diproses oleh backend Home Assistant.

card-mod juga menyediakan variabel berikut untuk templat:

  • config - Seluruh konfigurasi kartu, entitas, atau lencana - ( config.entity mungkin menarik)
  • user - Nama pengguna yang sedang login
  • browser - browser_id browser Anda, jika Anda telah menginstal browser_mod
  • hash - Apa pun yang muncul setelah # di URL saat ini (Ini hanya dipertimbangkan pada pemuatan pertama. Ini tidak diperbarui secara dinamis)

Navigasi DOM

Home Assistant banyak menggunakan sesuatu yang disebut shadow DOM. Hal ini memungkinkan penggunaan kembali komponen dengan mudah (seperti ha-card atau ha-icon ) tetapi menyebabkan beberapa masalah saat mencoba menerapkan gaya CSS pada berbagai hal.

Saat menjelajahi kartu di pemeriksa elemen browser Anda, Anda mungkin menemukan baris yang mengatakan sesuatu seperti " #shadow-root (open) " (persis seperti yang tertulis tergantung pada browser Anda) dan memperhatikan bahwa elemen di dalamnya tidak mewarisi gaya dari luar.

Untuk memberi gaya pada elemen di dalam akar bayangan, Anda perlu membuat style: kamus, bukan string.

Untuk setiap entri kamus, kuncinya akan digunakan untuk memilih satu atau beberapa elemen melalui fungsi querySelector() yang dimodifikasi. Nilai entri kemudian akan dimasukkan ke dalam elemen tersebut.

CATATAN: Fungsi querySelector() yang dimodifikasi akan menggantikan tanda dolar ( $ ) dengan #shadow-root di pemilih.

Prosesnya bersifat rekursif, jadi nilainya juga bisa berupa kamus. Kunci " . " (titik) akan memilih elemen saat ini.

Contoh:

Mari kita ubah warna semua judul tingkat ketiga ( ### like this ) di kartu penurunan harga, dan juga ubah latar belakangnya.

Jika kita melihat kartu di elemen inspektur chrome, tampilannya seperti ini:

penurunan harga-kartu-dom

Elemen <ha-card> adalah basisnya, dan dari sana kita melihat bahwa kita perlu melewati satu #shadow-root untuk mencapai <h3> . #shadow-root itu ada di dalam elemen <ha-markdown> , jadi pemilih kita akan menjadi: 

 ha-markdown$

yang akan menemukan elemen <ha-markdown> pertama dan kemudian semua #shadow-root di dalamnya.

Untuk menambahkan latar belakang ke <ha-card> , kami ingin menerapkan gaya ke elemen dasar secara langsung, yang memiliki kunci 

 .

Ini memberikan gaya terakhir: 

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

Navigasi DOM

CATATAN: Rantai pemilih antrian akan mencari satu elemen pada satu waktu yang dipisahkan oleh spasi atau " $ ".
Untuk setiap langkah, hanya kecocokan pertama yang akan dipilih.
Namun untuk pemilih akhir rantai (yaitu dalam kunci kamus tertentu) semua elemen yang cocok akan dipilih. Rantai yang diakhiri dengan $ adalah kasus khusus untuk kenyamanan, memilih akar bayangan dari semua elemen.

Misalnya berikut ini akan memilih elemen div pada penanda pertama pada kartu peta: 

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

Namun yang berikut ini akan memilih elemen div di semua penanda peta pada kartu peta (karena kita mengakhiri kunci pertama pada pemilih ha-entity-marker $ dan memulai pencarian baru dalam setiap hasil untuk div ): 

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

CATATAN 2: Mengikuti catatan di atas; karena tingginya tingkat optimasi urutan pemuatan yang digunakan di Home Assistant, tidak ada jaminan bahwa elemen ha-entity-marker ada pada saat card-mod mencarinya. Jika Anda memutus rantai sekali lagi: 

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

maka card-mod akan dapat mencoba kembali mencari dari titik ha-map $ di lain waktu, yang dapat memberikan hasil yang lebih stabil.

Pendeknya; jika segala sesuatunya tampak berjalan sebentar-sebentar - coba bagi rantai menjadi beberapa langkah.

Kiat men-debug

Navigasi DOM mungkin sulit dilakukan pada beberapa kali pertama, namun pada akhirnya Anda akan dapat menguasainya.

Untuk membantu Anda, Anda dapat menggunakan inspektur Elemen browser Anda untuk melihat langkah apa yang diambil card-mod.

  • Buka pemeriksa elemen dan temukan elemen dasar (misalnya <ha-card> ). Ini harus berisi elemen <card-mod> baik Anda menentukan gaya atau tidak.
  • Pastikan elemen <card-mod> dipilih.
  • Buka konsol browser (di chrome Anda dapat menekan Esc untuk membuka konsol dan inspektur secara bersamaan).
  • Ketik $0.card_mod_input dan tekan enter.
    Ini adalah informasi gaya yang diberikan pada langkah rantai. Jika ini adalah string, Anda berada di ujung rantai. Jika itu sebuah objek, Anda dapat melanjutkan ke langkah berikutnya.
  • Ketik $0.card_mod_children dan tekan enter.
    Ini adalah kumpulan elemen <card-mod> apa pun di langkah berikutnya dalam rantai mana pun. Mengklik "card-mod" di value: dari item yang disetel akan membawa Anda ke elemen <card-mod> di inspektur, dan Anda dapat terus memeriksa sisa rantai.
  • Anda juga dapat menggunakan $0.card_mod_parent untuk menemukan induk elemen <card-mod> mana pun dalam sebuah rantai.

Untuk informasi lebih lanjut, Anda dapat menggunakan yang berikut ini pada konfigurasi kartu yang bermasalah. Ini mungkin membantu Anda atau tidak. 

 card_mod :
  debug : true

Menata kartu tanpa elemen <ha-card>

Kartu yang tidak memiliki <ha-element> masih dapat ditata dengan menggunakan kartu custom:mod-card yang disediakan.

Hal ini hanya diperlukan dalam beberapa kasus, dan kemungkinan besar akan membawa lebih banyak masalah daripada penyelesaiannya.

Kemungkinan besar kartu Anda berisi kartu lain, dalam hal ini kartu itulah yang harus Anda terapkan gayanya.

Peringatan yang cukup.

Saya tahu apa yang saya lakukan 
 type : custom:mod-card
card :
  type : vertical-stack # for example
  ...
card_mod :
  style : |
    ha-card {
      ...
    }

Mod-card akan membuat elemen <ha-card> - dengan latar belakang dan batas yang dihapus - dan memasukkan kartu Anda ke dalamnya.

Lebih banyak contoh

Semua kasus pengujian saya tersedia di direktori test/views .

Anda dapat melakukan demo di buruh pelabuhan dengan masuk ke direktori test dan menjalankan: 

 docker-compose up

Lalu buka http://localhost:8125 dan masuk dengan nama pengguna dev dan kata sandi dev .

Atau Anda bisa menggunakan vscode devcontainer dan menjalankan tugas " Run hass ".

Tema

Untuk petunjuk tentang cara mengembangkan tema card-mod, lihat README-themes.md.

Perkembangan

Untuk menambahkan kekuatan penataan mod kartu ke kartu kustom Anda, lihat README-developers.md.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua