2025.3.4
首页 ▸ Integrations ▸

Custom panel

The panel_custom integration集成将 Home Assistant 与您的设备、服务等连接和集成。 [Learn more] allows you to write your own panels in JavaScript and add them to Home Assistant. See the developer documentation on instructions how to build your own panels.

To enable customized panels in your installation, add the following to your configuration.yamlconfiguration.yaml 文件是 Home Assistant 的主要配置文件。它列出了要加载的集成及其特定配置。在某些情况下，需要直接在 configuration.yaml 文件中手动编辑配置。大多数集成可以在 UI 中配置。 [Learn more] file. 在更改了configuration.yamlconfiguration.yaml 文件是 Home Assistant 的主要配置文件。它列出了要加载的集成及其特定配置。在某些情况下，需要直接在 configuration.yaml 文件中手动编辑配置。大多数集成可以在 UI 中配置。 [Learn more] 文件后，重启 Home Assistant 以应用更改。

# Example configuration.yaml entry
panel_custom:
  - name: my-panel
    sidebar_title: TodoMVC
    sidebar_icon: mdi:work
    url_path: my-todomvc
    module_url: /local/my-panel.js
    config:
      who: world

Tip

Store your custom panels in <config>/www to make them available in the frontend at the path /local.

Configuration Variables

Looking for your configuration file?
name string Required

Name of the web integration that renders your panel.

sidebar_title string (Optional)

Friendly title for the panel in the sidebar. Omitting it means no sidebar entry (but still accessible through the URL).

sidebar_icon icon (Optional, default: mdi:bookmark)

Icon for entry. Pick an icon that from Material Design Icons to use for your input and prefix the name with mdi:. For example mdi:car, mdi:ambulance, or mdi:motorbike.

url_path string (Optional)

The URL your panel will be available on in the frontend. If omitted will default to the panel name.

js_url string (Optional)

The URL that contains the JavaScript of your panel. If used together with module_url, will only be served to users that use the ES5 build of the frontend.

module_url string (Optional)

The URL that contains the JavaScript module of your panel. Loaded as a JavaScript module instead of a script. If used together with module_url, will only be served to users that use the “latest” build of the frontend.

config list (Optional)

Configuration to be passed into your web component when being instantiated.

require_admin boolean (Optional, default: false)

If admin access is required to see this panel.

embed_iframe boolean (Optional, default: false)

Set to true to embed panel in iframe. This is necessary if the panel is using the React framework or if it contains conflicting web components.

trust_external_script boolean (Optional, default: false)

By default the user has to confirm before loading a script from an external source. Setting this to true will omit this confirmation.

相关主题