jeena/home-assistant.github.io
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Site updated at 2017-09-09 08:11:28 UTC

Browse source
This commit is contained in:
Travis CI 2017-09-09 08:11:28 +00:00
parent 884f293365
commit f9e31a30cd
827 changed files with 13304 additions and 2121 deletions
Download patch file Download diff file Expand all files Collapse all files

15
developers/frontend_creating_custom_ui/index.html
View file

@ -76,17 +76,22 @@
<hr class="divider">
<p>If you would like to use your own <a href="/developers/frontend_add_card/">State card</a> without merging your code into <a href="https://github.com/home-assistant/home-assistant-polymer/">home-assistant-polymer</a> you can create your own implementation.</p>
<p>Put the element source file and its dependencies in <code class="highlighter-rouge">www/custom_ui/</code> directory under your Home Assistant <a href="/docs/configuration/">configuration</a> directory.</p>
<p>For example if creating a state card for the <code class="highlighter-rouge">light</code> domain named <code class="highlighter-rouge">my_custom_light_card</code> put <code class="highlighter-rouge">state-card-my_custom_light_card.html</code> in <code class="highlighter-rouge">www/custom_ui/</code>.</p>
<p>That file should implement <code class="highlighter-rouge">&lt;state-card-my_custom_light_card&gt;</code> tag with Polymer.</p>
<p>In <code class="highlighter-rouge">state-card-my_custom_light_card.html</code> you should use <code class="highlighter-rouge">&lt;link rel="import"&gt;</code> to import all the dependencies <strong>not</strong> used by Home Assistant’s UI.
<p>For example if creating a state card for the <code class="highlighter-rouge">light</code> domain named <code class="highlighter-rouge">my_custom_light_card</code> put <code class="highlighter-rouge">my_custom_light_card.html</code> in <code class="highlighter-rouge">www/custom_ui/</code>.</p>
<p>That file should implement <code class="highlighter-rouge">&lt;my_custom_light_card&gt;</code> tag with Polymer.</p>
<p>In <code class="highlighter-rouge">my_custom_light_card.html</code> you should use <code class="highlighter-rouge">&lt;link rel="import"&gt;</code> to import all the dependencies <strong>not</strong> used by Home Assistant’s UI.
Do not import any dependencies used by the Home Assistant UI.
Importing those will work in <code class="highlighter-rouge">development: 1</code> mode, but will fail in production mode.</p>
<p>In the <code class="highlighter-rouge">customize:</code> section of the <code class="highlighter-rouge">configuration.yaml</code> file put <code class="highlighter-rouge">custom_ui_state_card: &lt;element-name&gt;</code>.</p>
<p>1) In the <code class="highlighter-rouge">customize:</code> section of the <code class="highlighter-rouge">configuration.yaml</code> file put <code class="highlighter-rouge">custom_ui_state_card: &lt;element-name&gt;</code>.
2) In the <code class="highlighter-rouge">frontend</code> section use <code class="highlighter-rouge">extra_html_url</code> to specify the URL to load.</p>
<p>For example:</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">homeassistant</span><span class="pi">:</span>
<span class="s">customize</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">entity_id</span><span class="pi">:</span> <span class="s">light</span>
<span class="s">light.bedroom</span><span class="pi">:</span>
<span class="s">custom_ui_state_card</span><span class="pi">:</span> <span class="s">my_custom_light_card</span>
<span class="s">frontend</span><span class="pi">:</span>
<span class="s">extra_html_url</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">/local/custom_ui/my_custom_light_card.html</span>
</code></pre>
</div>
<p>For more possibilities, see the <a href="/cookbook/#user-interface">Custom UI section</a> on our Examples page.</p>