You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: source/developers/frontend_creating_custom_ui.markdown
+10-5Lines changed: 10 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -13,22 +13,27 @@ If you would like to use your own [State card](/developers/frontend_add_card/) w
13
13
14
14
Put the element source file and its dependencies in `www/custom_ui/` directory under your Home Assistant [configuration](/docs/configuration/) directory.
15
15
16
-
For example if creating a state card for the `light` domain named `my_custom_light_card` put `state-card-my_custom_light_card.html` in `www/custom_ui/`.
16
+
For example if creating a state card for the `light` domain named `my_custom_light_card` put `my_custom_light_card.html` in `www/custom_ui/`.
17
17
18
-
That file should implement `<state-card-my_custom_light_card>` tag with Polymer.
18
+
That file should implement `<my_custom_light_card>` tag with Polymer.
19
19
20
-
In `state-card-my_custom_light_card.html` you should use `<link rel="import">` to import all the dependencies **not** used by Home Assistant's UI.
20
+
In `my_custom_light_card.html` you should use `<link rel="import">` to import all the dependencies **not** used by Home Assistant's UI.
21
21
Do not import any dependencies used by the Home Assistant UI.
22
22
Importing those will work in `development: 1` mode, but will fail in production mode.
23
23
24
-
In the `customize:` section of the `configuration.yaml` file put `custom_ui_state_card: <element-name>`.
24
+
1) In the `customize:` section of the `configuration.yaml` file put `custom_ui_state_card: <element-name>`.
25
+
2) In the `frontend` section use `extra_html_url` to specify the URL to load.
25
26
26
27
For example:
27
28
```yaml
28
29
homeassistant:
29
30
customize:
30
-
- entity_id: light
31
+
light.bedroom:
31
32
custom_ui_state_card: my_custom_light_card
33
+
34
+
frontend:
35
+
extra_html_url:
36
+
- /local/custom_ui/my_custom_light_card.html
32
37
```
33
38
34
39
For more possibilities, see the [Custom UI section](/cookbook/#user-interface) on our Examples page.
0 commit comments