mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-23 17:27:19 +00:00
Add custom ui documentation (#1963)
This commit is contained in:
parent
74ac6b9383
commit
1975b2c0b2
12
source/_cookbook/custom_ui_by_andrey-git.markdown
Normal file
12
source/_cookbook/custom_ui_by_andrey-git.markdown
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
layout: page
|
||||
title: "Custom UI light state-card by andrey-git"
|
||||
description: ""
|
||||
date: 2017-02-04 10:45
|
||||
sidebar: true
|
||||
comments: false
|
||||
sharing: true
|
||||
footer: true
|
||||
ha_category: User Interface
|
||||
ha_external_link: https://github.com/andrey-git/home-assistant-custom-ui
|
||||
---
|
@ -58,6 +58,7 @@
|
||||
<li>{% active_link /developers/frontend_add_card/ Add State Card %}</li>
|
||||
<li>{% active_link /developers/frontend_add_more_info/ Add More Info Dialog %}</li>
|
||||
<li>{% active_link /developers/frontend_creating_custom_panels/ Add Custom Panels %}</li>
|
||||
<li>{% active_link /developers/frontend_creating_custom_ui/ Add Custom UI %}</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
35
source/developers/frontend_creating_custom_ui.markdown
Normal file
35
source/developers/frontend_creating_custom_ui.markdown
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
layout: page
|
||||
title: "Creating custom UI"
|
||||
description: "Introduction to create custom ui for Home Assistant."
|
||||
date: 2017-02-04 13:00
|
||||
sidebar: true
|
||||
comments: false
|
||||
sharing: true
|
||||
footer: true
|
||||
ha_release: 0.38
|
||||
---
|
||||
If you would like to use your own [State card](/developers/frontend_add_card/) without merging your code into [home-assistant-polymer](https://github.com/home-assistant/home-assistant-polymer/) you can create your own implementation.
|
||||
|
||||
- Put the element source file and its dependencies in `www/custom_ui/` directory under you homeassistant config.
|
||||
|
||||
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/`.
|
||||
|
||||
That file should implement `<state-card-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 Homeassistant UI.
|
||||
Do not import any dependencies used by Homeassistant UI.
|
||||
Importing those will work in `development: 1` mode, but will fail in production mode.
|
||||
|
||||
- In the `customize:` section of `configuration.yaml` put `custom_ui_state_card: <element-name>`.
|
||||
|
||||
For example:
|
||||
```yaml
|
||||
homeassistant:
|
||||
customize:
|
||||
- entity_id: light
|
||||
custom_ui_state_card: my_custom_light_card
|
||||
```
|
||||
|
||||
|
||||
For more possibilities, see the [Custom UI section](/cookbook/#user-interface) on our Examples page.
|
Loading…
x
Reference in New Issue
Block a user