mirror of
https://github.com/home-assistant/developers.home-assistant.git
synced 2025-07-14 21:06:28 +00:00
Move frontend docs (#512)
This commit is contained in:
parent
d4dde03f79
commit
a4be81d0dd
@ -1,123 +0,0 @@
|
|||||||
---
|
|
||||||
title: "Creating custom UI"
|
|
||||||
---
|
|
||||||
|
|
||||||
:::warning Deprecated
|
|
||||||
This feature has been deprecated and is no longer supported. To add custom UI to Home Assistant, build a [custom Lovelace card](lovelace_custom_card.md) instead.
|
|
||||||
:::
|
|
||||||
### State card
|
|
||||||
|
|
||||||
If you would like to use your own [State card](frontend_add_card.md) 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](https://www.home-assistant.io/docs/configuration/) directory.
|
|
||||||
|
|
||||||
For example if creating a state card for the `light` domain named `state-card-my-custom-light` put `state-card-my-custom-light.html` in `www/custom_ui/`.
|
|
||||||
|
|
||||||
That file should implement `<state-card-my-custom-light>` tag with Polymer.
|
|
||||||
|
|
||||||
In `state-card-my-custom-light.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.
|
|
||||||
|
|
||||||
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`:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
homeassistant:
|
|
||||||
customize:
|
|
||||||
light.bedroom:
|
|
||||||
custom_ui_state_card: state-card-my-custom-light
|
|
||||||
|
|
||||||
frontend:
|
|
||||||
extra_html_url:
|
|
||||||
- /local/custom_ui/state-card-my-custom-light.html
|
|
||||||
```
|
|
||||||
|
|
||||||
`www/custom_ui/state-card-my-custom-light.html`:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script>
|
|
||||||
{
|
|
||||||
// show the version of your custom UI in the HA dev info panel (HA 0.66.0+):
|
|
||||||
const _NAME = 'My custom light';
|
|
||||||
const _URL = 'https://home-assistant.io/developers/frontend_creating_custom_ui/';
|
|
||||||
const _VERSION = '20180312';
|
|
||||||
|
|
||||||
if (!window.CUSTOM_UI_LIST) window.CUSTOM_UI_LIST = [];
|
|
||||||
window.CUSTOM_UI_LIST.push({
|
|
||||||
name: _NAME,
|
|
||||||
url: _URL,
|
|
||||||
version: _VERSION
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<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, null, 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
customElements.define(StateCardMyCustomLight.is, StateCardMyCustomLight);
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
Some browsers don't support latest ECMAScript standards, these require a separate ES5 compatible file (`extra_html_url_es5`).
|
|
||||||
:::
|
|
||||||
|
|
||||||
For more possibilities, see the [Custom UI section](https://www.home-assistant.io/cookbook/#user-interface) on our Examples page.
|
|
||||||
|
|
||||||
### More info dialog
|
|
||||||
|
|
||||||
_Introduced in Home Assistant 0.69._
|
|
||||||
|
|
||||||
Similar to the custom State card, if you would like to use your own [More info dialog](frontend_add_more_info.md) you can create your own implementation.
|
|
||||||
|
|
||||||
Following a similar example, if creating a more info dialog a light named `more-info-my-custom-light` put `more-info-my-custom-light.html` in `www/custom_ui/`.
|
|
||||||
|
|
||||||
1. In the `customize:` section of the `configuration.yaml` file put `custom_ui_more_info: more-info-my-custom-light`.
|
|
||||||
2. In the `frontend` section use `extra_html_url` to specify the URL to load.
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
`configuration.yaml`:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
homeassistant:
|
|
||||||
customize:
|
|
||||||
light.bedroom:
|
|
||||||
custom_ui_more_info: more-info-my-custom-light
|
|
||||||
|
|
||||||
frontend:
|
|
||||||
extra_html_url:
|
|
||||||
- /local/custom_ui/more-info-my-custom-light.html
|
|
||||||
```
|
|
@ -1,8 +0,0 @@
|
|||||||
---
|
|
||||||
title: "Lovelace UI"
|
|
||||||
sidebar_label: Introduction
|
|
||||||
---
|
|
||||||
|
|
||||||
This page has been moved to https://www.home-assistant.io/lovelace/
|
|
||||||
|
|
||||||
<script>document.location = 'https://www.home-assistant.io/lovelace/';</script>
|
|
@ -29,7 +29,7 @@ module.exports = {
|
|||||||
label: "Core",
|
label: "Core",
|
||||||
to: "docs/development_index",
|
to: "docs/development_index",
|
||||||
},
|
},
|
||||||
{ to: "docs/frontend_index", label: "Frontend" },
|
{ to: "docs/frontend", label: "Frontend" },
|
||||||
{ to: "docs/add-ons", label: "Add-ons" },
|
{ to: "docs/add-ons", label: "Add-ons" },
|
||||||
{ to: "docs/internationalization", label: "Internationalization" },
|
{ to: "docs/internationalization", label: "Internationalization" },
|
||||||
],
|
],
|
||||||
|
41
sidebars.js
41
sidebars.js
@ -38,6 +38,31 @@ module.exports = {
|
|||||||
"documenting/standards",
|
"documenting/standards",
|
||||||
"documenting/create-page",
|
"documenting/create-page",
|
||||||
],
|
],
|
||||||
|
Frontend: [
|
||||||
|
"frontend",
|
||||||
|
"frontend/architecture",
|
||||||
|
"frontend/development",
|
||||||
|
"frontend/data",
|
||||||
|
"frontend/external-authentication",
|
||||||
|
"frontend/external-bus",
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
label: "Extending the frontend",
|
||||||
|
items: [
|
||||||
|
"frontend/extending/adding-state-card",
|
||||||
|
"frontend/extending/adding-more-info-dialogs",
|
||||||
|
"frontend/extending/websocket-api",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
label: "Custom UI",
|
||||||
|
items: [
|
||||||
|
"frontend/custom-ui/lovelace-custom-card",
|
||||||
|
"frontend/custom-ui/creating-custom-panels",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
Internationalization: [
|
Internationalization: [
|
||||||
"internationalization",
|
"internationalization",
|
||||||
"internationalization/core",
|
"internationalization/core",
|
||||||
@ -82,22 +107,6 @@ module.exports = {
|
|||||||
"Device Registry": ["device_registry_index"],
|
"Device Registry": ["device_registry_index"],
|
||||||
"Area Registry": ["area_registry_index"],
|
"Area Registry": ["area_registry_index"],
|
||||||
},
|
},
|
||||||
"Extending Frontend": {
|
|
||||||
Frontend: [
|
|
||||||
"frontend_index",
|
|
||||||
"frontend_architecture",
|
|
||||||
"frontend_development",
|
|
||||||
"frontend_data",
|
|
||||||
"frontend_external_auth",
|
|
||||||
"frontend_external_bus",
|
|
||||||
],
|
|
||||||
"Extending the frontend": [
|
|
||||||
"frontend_add_card",
|
|
||||||
"frontend_add_more_info",
|
|
||||||
"frontend_add_websocket_api",
|
|
||||||
],
|
|
||||||
"Custom UI": ["lovelace_custom_card", "frontend_creating_custom_panels"],
|
|
||||||
},
|
|
||||||
"Extending Home Assistant": {
|
"Extending Home Assistant": {
|
||||||
"Development Workflow": [
|
"Development Workflow": [
|
||||||
"development_index",
|
"development_index",
|
||||||
|
@ -13,6 +13,16 @@
|
|||||||
/docs/documentation_standards /docs/documenting/standards
|
/docs/documentation_standards /docs/documenting/standards
|
||||||
/docs/external_api_rest /docs/api/rest
|
/docs/external_api_rest /docs/api/rest
|
||||||
/docs/external_api_websocket /docs/api/websocket
|
/docs/external_api_websocket /docs/api/websocket
|
||||||
|
/docs/frontend_add_card /docs/frontend/extending/adding-state-card
|
||||||
|
/docs/frontend_add_more_info /docs/frontend/extending/adding-more-info-dialogs
|
||||||
|
/docs/frontend_add_websocket_api /docs/frontend/extending/websocket-api
|
||||||
|
/docs/frontend_architecture /docs/frontend/architecture
|
||||||
|
/docs/frontend_creating_custom_panels /docs/frontend/custom-ui/creating-custom-panels
|
||||||
|
/docs/frontend_data /docs/frontend/data
|
||||||
|
/docs/frontend_development /docs/frontend/development
|
||||||
|
/docs/frontend_external_auth /docs/frontend/external-authentication
|
||||||
|
/docs/frontend_external_bus /docs/frontend/external-bus
|
||||||
|
/docs/frontend_index /docs/frontend
|
||||||
/docs/hassio_addon_communication /docs/add-ons/communication
|
/docs/hassio_addon_communication /docs/add-ons/communication
|
||||||
/docs/hassio_addon_config /docs/add-ons/configuration
|
/docs/hassio_addon_config /docs/add-ons/configuration
|
||||||
/docs/hassio_addon_index /docs/add-ons
|
/docs/hassio_addon_index /docs/add-ons
|
||||||
@ -26,3 +36,4 @@
|
|||||||
/docs/internationalization_custom_component_localization /docs/internationalization/custom_integration
|
/docs/internationalization_custom_component_localization /docs/internationalization/custom_integration
|
||||||
/docs/internationalization_index /docs/internationalization
|
/docs/internationalization_index /docs/internationalization
|
||||||
/docs/internationalization_translation /docs/translations
|
/docs/internationalization_translation /docs/translations
|
||||||
|
/docs/lovelace_custom_card /docs/frontend/custom-ui/lovelace-custom-card
|
Loading…
x
Reference in New Issue
Block a user