Skip to content

Instantly share code, notes, and snippets.

@balloob
Last active Aug 31, 2020
Embed
What would you like to do?
Example Panel for Home Assistant
/*
Example panel.
Put this file in <config>/www/example-panel.js
In configuration.yaml:
panel_custom:
- name: example-panel
# url_path needs to be unique for each panel_custom config
url_path: redirect-server-controls
sidebar_title: Example Panel
sidebar_icon: mdi:server
module_url: /local/example-panel.js
config:
# Data you want to make available to panel
hello: world
*/
import "https://unpkg.com/wired-card@2.1.0/lib/wired-card.js?module";
import {
LitElement,
html,
css,
} from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
class ExamplePanel extends LitElement {
static get properties() {
return {
hass: { type: Object },
narrow: { type: Boolean },
route: { type: Object },
panel: { type: Object },
};
}
render() {
return html`
<wired-card elevation="2">
<p>There are ${Object.keys(this.hass.states).length} entities.</p>
<p>The screen is${this.narrow ? "" : " not"} narrow.</p>
Configured panel config
<pre>${JSON.stringify(this.panel.config, undefined, 2)}</pre>
Current route
<pre>${JSON.stringify(this.route, undefined, 2)}</pre>
</wired-card>
`;
}
static get styles() {
return css`
:host {
background-color: #fafafa;
padding: 16px;
display: block;
}
wired-card {
background-color: white;
padding: 16px;
display: block;
font-size: 18px;
max-width: 600px;
margin: 0 auto;
}
`;
}
}
customElements.define("example-panel", ExamplePanel);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment