lovelace card mod
Card-mod 3.4.3
홈어시스턴트 프런트엔드의 다양한 요소에 CSS 스타일을 적용할 수 있습니다.
HACS를 사용하여 설치하거나 이 가이드를 참조하세요.
카드 모드는 lovelace 리소스로 설치될 수 있지만 일부 기능은 대신 프런트엔드 모듈로 설치하면 큰 이점을 얻을 수 있습니다.
그렇게 하려면 configuration.yaml 파일에 다음을 추가하고 홈어시스턴트를 다시 시작하세요.
frontend :
extra_module_url :
- /local/card-mod.js card-mod.js 설치한 위치에 따라 해당 경로를 조정해야 합니다. HACS를 통해 설치한 경우 이는 아마도 /hacsfiles/lovelace-card-mod/card-mod.js 일 것입니다.
HACS에 의해 자동으로 추가된 모든 리소스 정의는 extra_module_url 추가한 후에도 그대로 유지될 수 있습니다.
card_mod :
style : |
ha-card {
color: red;
} 입력하는 동안 카드의 텍스트가 빨간색으로 바뀌는 것을 볼 수 있습니다.
또한 "SHOW VISUAL EDITOR(비주얼 편집기 표시)" 버튼 근처에 작은 브러시 아이콘이 나타나는 것을 볼 수 있습니다. 이는 이 카드에 비주얼 편집기에 표시되지 않는 카드 모드 코드가 있음을 나타냅니다.
카드 구성에 다음을 추가하여 카드 스타일을 지정합니다.
card_mod :
style : <STYLES> 가장 간단한 형식인 경우 <STYLES> 는 카드의 <ha-card> 요소에 삽입될 CSS 문자열입니다.
참고: 카드 모드는 ha-카드 요소가 포함된 카드에서만 작동합니다. 여기에는 볼 수 있는 거의 모든 카드가 포함되지만
conditional,entity_filter,vertical-stack,horizontal-stack,grid등은 포함되지 않습니다.하지만 이러한 카드에는 카드 모드가 작동 할 수 있는 다른 카드가 포함되는 경우가 많습니다.
포함된 카드에 대한 매개변수를 지정하는 방법을 보려면 각 카드의 설명서를 참조하십시오.
스타일을 지정할 수 있는 가장 아래쪽 요소는 <ha-card> 입니다.
팁: 홈어시스턴트 테마는 CSS 변수를 사용합니다. 두 개의 대시가 앞에 붙는 카드 모드에서 설정하고 사용할 수 있습니다.
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;
} 카드 모드가 설치되면 <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 템플릿이 포함될 수 있습니다.
카드 모드는 또한 템플릿에 다음 변수를 사용할 수 있도록 합니다.
config - 카드, 엔터티 또는 배지의 전체 구성 - ( config.entity 특히 중요할 수 있음)user - 현재 로그인된 사용자의 이름browser - browser_mod가 설치된 경우 브라우저의 browser_idhash - 현재 URL에서 # 뒤에 오는 모든 항목(이것은 첫 번째 로드 시에만 고려되며 동적으로 업데이트되지 않습니다.) 홈어시스턴트는 Shadow DOM이라는 것을 광범위하게 사용합니다. 이를 통해 구성 요소(예: ha-card 또는 ha-icon )를 쉽게 재사용할 수 있지만 CSS 스타일을 사물에 적용하려고 할 때 몇 가지 문제가 발생합니다.
브라우저 요소 검사기에서 카드를 탐색할 때 " #shadow-root (open) "(정확히 말하는 내용은 브라우저에 따라 다름)과 같은 줄을 발견하고 내부 요소가 외부에서 온 스타일.
섀도우 루트 내부 요소의 스타일을 지정하려면 style: 문자열이 아닌 사전).
각 사전 항목에 대해 키는 수정된 querySelector() 함수를 통해 하나 또는 여러 요소를 선택하는 데 사용됩니다. 그러면 항목 값이 해당 요소에 주입됩니다.
참고: 수정된
querySelector()함수는 선택기에서 달러 기호($)를#shadow-root로 대체합니다.
프로세스는 재귀적이므로 값은 사전일 수도 있습니다. " . "(마침표) 키를 누르면 현재 요소가 선택됩니다.
마크다운 카드의 모든 3단계 제목( ### like this )의 색상을 변경하고 배경도 변경해 보겠습니다.
크롬의 요소 검사기에서 카드를 보면 다음과 같습니다.
<ha-card> 요소는 기본이고 여기서부터 <h3> 에 도달하려면 하나의 #shadow-root 거쳐야 한다는 것을 알 수 있습니다. 해당 #shadow-root <ha-markdown> 요소 내에 있으므로 선택기는 다음과 같습니다.
ha-markdown$
첫 번째 <ha-markdown> 요소를 찾은 다음 그 안에 있는 모든 #shadow-root 찾습니다.
<ha-card> 에 배경을 추가하기 위해 키가 있는 기본 요소에 직접 스타일을 적용하려고 합니다.
.
최종 스타일은 다음과 같습니다.
card_mod :
style :
ha-markdown$ : |
h3 {
color: purple;
}
. : |
ha-card {
background: teal;
} 
참고: 대기열의 선택기 체인은 공백이나 "
$"로 구분된 한 번에 하나의 요소를 찾습니다.
각 단계마다 첫 번째 일치 항목만 선택됩니다.
그러나 체인의 최종 선택자(즉, 주어진 사전 키)의 경우 일치하는 모든 요소가 선택됩니다.$로 끝나는 체인은 편의상 모든 요소의 섀도우루트를 선택하는 특별한 경우입니다.예를 들어 다음은 지도 카드의 첫 번째 마커에 있는
div요소를 선택합니다."ha-map $ ha-entity-marker $ div" : |그러나 다음은 지도 카드의 모든 지도 마커에 있는 div 요소를 선택합니다(
ha-entity-marker $선택기의 첫 번째 키를 끝내고div에 대한 각 결과 내에서 새 검색을 시작하기 때문입니다)." ha-map $ ha-entity-marker $ " : "div" : |
참고 2: 위의 참고에 이어; 홈어시스턴트에서 사용되는 높은 수준의 로드 순서 최적화로 인해 카드 모드가 해당 항목을 찾을 때
ha-entity-marker요소가 존재한다고 보장할 수 없습니다. 체인을 다시 한 번 끊는 경우:" ha-map $ " : " ha-entity-marker $ " : "div" : |그러면 카드 모드는 나중에
ha-map $지점에서 다시 찾아볼 수 있게 되어 보다 안정적인 결과를 얻을 수 있습니다.간단히 말해서; 간헐적으로 작동하는 것 같으면 체인을 여러 단계로 나누어 보십시오.
DOM 탐색은 처음 몇 번은 제대로 수행하기가 까다로울 수 있지만 결국에는 익숙해질 것입니다.
도움을 받으려면 브라우저 요소 검사기를 사용하여 카드 모드가 수행하는 단계를 확인할 수 있습니다.
<ha-card> )를 찾습니다. 여기에는 스타일 지정 여부에 관계없이 <card-mod> 요소가 포함되어야 합니다.<card-mod> 요소가 선택되었는지 확인하세요.$0.card_mod_input 입력하고 Enter를 누르세요.$0.card_mod_children 입력하고 Enter를 누르세요.<card-mod> 요소의 집합입니다. 설정된 항목의 value: 에서 "card-mod"를 클릭하면 검사기의 해당 <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 디렉터리에서 사용할 수 있습니다.
test 디렉터리로 이동하여 다음을 실행하여 docker에서 데모를 볼 수 있습니다.
docker-compose up
그런 다음 http://localhost:8125 로 이동하여 사용자 이름 dev 및 비밀번호 dev 로 로그인합니다.
또는 vscode devcontainer를 사용하여 " Run hass " 작업을 실행할 수도 있습니다.
카드 모드 테마를 개발하는 방법에 대한 지침은 README-themes.md를 참조하세요.
사용자 정의 카드에 카드 모드 스타일링 기능을 추가하려면 README-developers.md를 참조하세요.
