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-21 16:27:19 +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. 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. 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. 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. 2) In the `frontend` section use `extra_html_url` to specify the URL to load.
For example: For example:
@ -29,11 +29,11 @@ For example:
homeassistant: homeassistant:
customize: customize:
light.bedroom: light.bedroom:
custom_ui_state_card: my_custom_light_card custom_ui_state_card: state-card-my-custom-light
frontend: frontend:
extra_html_url: 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. For more possibilities, see the [Custom UI section](/cookbook/#user-interface) on our Examples page.