mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-22 16:56:50 +00:00
custom-ui state-card upgrade example (#3698)
* custom-ui state-card upgrade example * wording * Add some line breaks
This commit is contained in:
parent
869e9f1856
commit
b61ba91c17
@ -9,6 +9,7 @@ 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 your Home Assistant [configuration](/docs/configuration/) directory.
|
||||
@ -21,10 +22,13 @@ In `state-card-my-custom-light.html` you should use `<link rel="import">` to imp
|
||||
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.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
Example:
|
||||
|
||||
`configuration.yaml`:
|
||||
|
||||
For example:
|
||||
```yaml
|
||||
homeassistant:
|
||||
customize:
|
||||
@ -36,4 +40,42 @@ frontend:
|
||||
- /local/custom_ui/state-card-my-custom-light.html
|
||||
```
|
||||
|
||||
`www\custom_ui\state-card-my-custom-light.html`:
|
||||
|
||||
```javascript
|
||||
<dom-module id='state-card-my-custom-light'>
|
||||
<template>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<textarea>[[_toStr(StateObj)]]</textarea>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
class StateCardMyCustomLight extends Polymer.Element {
|
||||
static get is() { return 'state-card-my-custom-light'; }
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
// Home Assistant object
|
||||
hass: Object,
|
||||
// inDialog is true if shown as more-info-card
|
||||
inDialog: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
// includes state, config and more information of the entity
|
||||
stateObj: Object,
|
||||
};
|
||||
}
|
||||
|
||||
_toStr(obj) {
|
||||
return JSON.stringify(obj);
|
||||
}
|
||||
}
|
||||
customElements.define(StateCardMyCustomLight.is, StateCardMyCustomLight);
|
||||
</script>
|
||||
```
|
||||
|
||||
For more possibilities, see the [Custom UI section](/cookbook/#user-interface) on our Examples page.
|
||||
|
Loading…
x
Reference in New Issue
Block a user