mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-22 16:56:50 +00:00
Update frontend_creating_custom_ui.markdown (#3275)
This commit is contained in:
parent
8f72d36e63
commit
5715c2007f
@ -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.
|
||||
|
||||
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.
|
||||
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:
|
||||
```yaml
|
||||
homeassistant:
|
||||
customize:
|
||||
- entity_id: light
|
||||
light.bedroom:
|
||||
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.
|
||||
|
Loading…
x
Reference in New Issue
Block a user