jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-22 16:56:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update panel_custom

Browse Source
This commit is contained in:
Paulus Schoutsen 2018-08-15 11:48:16 +02:00
parent 02a8bf9602
commit ee62b90712
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
source/_components/panel_custom.markdown
View File

@ -12,29 +12,34 @@ ha_category: Front end
ha_release: 0.26
---
The `panel_custom` support allows you to add additional panels to your Home Assistant frontend. The panels are listed in the sidebar if wished and can be highly customized.
The `panel_custom` support allows you to add additional panels to your Home Assistant frontend. The panels are listed in the sidebar if wished and can be highly customized. See the developer documentation on [instructions how to build your own panels](https://developers.home-assistant.io/docs/en/frontend_creating_custom_panels.html).
To enable customized panels in your installation, add the following to your `configuration.yaml` file:
```yaml
# Example configuration.yaml entry for https://github.com/home-assistant/example-custom-config/blob/master/panels/hello_world.html
# Example configuration.yaml entry
panel_custom:
- name: todomvc
- name: my-panel
sidebar_title: TodoMVC
sidebar_icon: mdi:work
url_path: my-todomvc
webcomponent_path: /home/hass/hello.html
js_url: /local/my-panel.js
config:
who: world
```
<p class='note'>
Store your custom panels in `<config>/www` to make them available in the frontend at the path `/local`.
</p>
Configuration variables:
- **name** (*Optional*): Name of the panel.
- **name** (*Required*): Name of the web component that renders your panel.
- **sidebar_title** (*Optional*): Friendly title for the panel in the sidebar. Omitting it means no sidebar entry (but still accessible through the URL).
- **sidebar_icon** (*Optional*): Icon for entry. Pick an icon that you can find on [materialdesignicons.com](https://materialdesignicons.com/) to use for your input and prefix the name with `mdi:`. For example `mdi:car`, `mdi:ambulance`, or `mdi:motorbike`.
- **url_path** (*Optional*): The URL your panel will be available on. If omitted will default to the panel name.
- **webcomponent_path** (*Optional*): The path to your component. If omitted will default to `<config dir>/panels/<component name>.html`
- **url_path** (*Optional*): The URL your panel will be available on in the frontend. If omitted will default to the panel name.
- **js_url** (*Required*): The URL that contains the JavaScript of your panel.
- **config** (*Optional*): Configuration to be passed into your web component when being instantiated.
- **embed_iframe** (*Optional*): Set to `true` to embed panel in iframe. This is necessary if the panel is panel is using the React framework or if it contains conflicting web components.
- **trust_external_script** (*Optional*): By default the user has to confirm before loading a script from an external source. Setting this to `true` will omit this confirmation.
- **webcomponent_path** (*Optional* *DEPRECATED*): The HTML path to your component. If omitted will default to `<config dir>/panels/<component name>.html`