jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-16 05:46:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix example for custom state cards (#3592)

Browse Source 
* change to state-card-my-custom-light

* .html
This commit is contained in:
c727 2017-10-12 17:25:09 +02:00 committed by Fabian Affolter
parent d0123121fe
commit f6b19dc1b7
No known key found for this signature in database
GPG Key ID: DDF3D6F44AAB1336
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
source/developers/frontend_creating_custom_ui.markdown
View File

@ -13,15 +13,15 @@ If you would like to use your own [State card](/developers/frontend_add_card/) w
Put the element source file and its dependencies in `www/custom_ui/` directory under your Home Assistant [configuration](/docs/configuration/) directory.
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/`.
For example if creating a state card for the `light` domain named `state-card-my-custom-light` put `state-card-my-custom-light.html` in `www/custom_ui/`.
That file should implement `<my_custom_light_card>` tag with Polymer.
That file should implement `<state-card-my-custom-light>` tag with Polymer.
In `my_custom_light_card.html` you should use `<link rel="import">` to import all the dependencies **not** used by Home Assistant's UI.
In `state-card-my-custom-light.html` you should use `<link rel="import">` to import all the dependencies **not** used by Home Assistant's UI.
Do not import any dependencies used by the Home Assistant UI.
Importing those will work in `development: 1` mode, but will fail in production mode.
1) In the `customize:` section of the `configuration.yaml` file put `custom_ui_state_card: <element-name>`.
1) In the `customize:` section of the `configuration.yaml` file put `custom_ui_state_card: state-card-my-custom-light`.
2) In the `frontend` section use `extra_html_url` to specify the URL to load.
For example:
@ -29,11 +29,11 @@ For example:
homeassistant:
customize:
light.bedroom:
custom_ui_state_card: my_custom_light_card
custom_ui_state_card: state-card-my-custom-light
frontend:
extra_html_url:
- /local/custom_ui/my_custom_light_card.html
- /local/custom_ui/state-card-my-custom-light.html
```
For more possibilities, see the [Custom UI section](/cookbook/#user-interface) on our Examples page.