Add custom ui documentation (#1963)

This commit is contained in:
andrey-git 2017-02-06 08:54:21 +02:00 committed by Fabian Affolter
parent 74ac6b9383
commit 1975b2c0b2
3 changed files with 48 additions and 0 deletions

View 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
---

View File

@ -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>

View 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.