home-assistant.io/source/_components/panel_custom.markdown
Alok Saboo 1aca7b08cf Misc fixes: e.g. -> e.g., and proper case for Home Assistant (#4942)
* e.g. to e.g., and proper case for Home Assistant

* Instructions how to -> Instructions on how to
2018-03-17 20:20:37 +01:00

1.7 KiB

layout, title, description, date, sidebar, comments, sharing, footer, logo, ha_category, ha_release
layout title description date sidebar comments sharing footer logo ha_category ha_release
page Panel Custom Instructions on how to add customized panels to the frontend of Home Assistant. 2015-08-08 11:00 true false true true home-assistant.png Front end 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.

To enable customized panels in your installation, add the following to your configuration.yaml file:

# Example configuration.yaml entry for https://github.com/home-assistant/example-custom-config/blob/master/panels/hello_world.html
panel_custom:
  - name: todomvc
    sidebar_title: TodoMVC
    sidebar_icon: mdi:work
    url_path: my-todomvc
    webcomponent_path: /home/hass/hello.html
    config:
      who: world

Configuration variables:

  • name (Optional): Name of the 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 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
  • config (Optional): Configuration to be passed into your web component when being instantiated.