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-23 09:17:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update frontend_creating_custom_ui.markdown (#3275)

Browse Source
This commit is contained in:
Andrey 2017-09-01 23:07:20 +03:00 committed by Fabian Affolter
parent 8f72d36e63
commit 5715c2007f
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
source/developers/frontend_creating_custom_ui.markdown
View File

@ -13,22 +13,27 @@ 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 `state-card-my_custom_light_card.html` in `www/custom_ui/`. 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/`.
That file should implement `<state-card-my_custom_light_card>` tag with Polymer. That file should implement `<my_custom_light_card>` tag with Polymer.
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. In `my_custom_light_card.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.
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: <element-name>`.
2) In the `frontend` section use `extra_html_url` to specify the URL to load.
For example: For example:
```yaml ```yaml
homeassistant: homeassistant:
customize: customize:
- entity_id: light light.bedroom:
custom_ui_state_card: my_custom_light_card custom_ui_state_card: my_custom_light_card
frontend:
extra_html_url:
- /local/custom_ui/my_custom_light_card.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.