--- layout: page title: "Components" description: "List of the built-in components of Home Assistant." date: 2014-12-21 13:35 sidebar: false comments: false sharing: true footer: true is_homepage: true hide_github_edit: true body_id: components-page regenerate: true --- <p class='note'> Support for these components is provided by the Home Assistant community. </p> {% assign components = site.components | sort: 'title' %} {% assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq %} <div class="filter-button-group"> <a href='#all' class="btn">All</a> <a href='#featured' class="btn">Featured</a> {% for category in categories %} {% if category and category != 'Other' %} <a href='#{{ category | slugify }}' class="btn">{{ category }}</a> {% endif %} {% endfor %} <a href='#other' class="btn">Other</a> </div> <div id="componentContainer"> {% for component in components %} {% if component.ha_category %} <a href='{{ component.url }}' class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}' {% unless component.featured %}style='display: none'{% endunless %}> <div class='img-container'> {% if component.logo %} <img src='/images/supported_brands/{{ component.logo }}'> {% endif %} </div> <div class='title'>{{ component.title }}</div> <div class='category'>{{ component.ha_category }}</div> </a> {% endif %} {% endfor %} </div> {% comment %} ## Pages without categories {% for component in components %} {% unless component.ha_category %} <p>{{ component.title }}</p> {% endunless %} {% endfor %} {% endcomment %} <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script> // undo initial hiding of non-featured cards if (location.hash !== '') { if (location.hash === '#all') { jQuery('#componentContainer a').show(); } else { jQuery('#componentContainer .featured').hide(); jQuery('#componentContainer .' + location.hash.substr(1)).show(); } } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script> <script> $(window).load(function(){ var $container = $('#componentContainer'); function updateHash(newHash) { if ('replaceState' in history) { history.replaceState('', '', newHash); } else { location.hash = newHash; } } function applyFilter() { var hash = location.hash; var filter; if (hash == '') { filter = '.featured' hash = '#featured' } else if (hash == '#all') { filter = '*'; } else { filter = '.' + hash.substr(1); } $('.filter-button-group a.current').removeClass('current'); $('.filter-button-group a[href='+hash+']').addClass('current'); $container.isotope({ filter: filter, animationOptions: { duration: 750, easing: 'linear', queue: false }, masonry: { columnWidth: 210 } }); } jQuery('.filter-button-group a').click(function() { updateHash(this.getAttribute('href')); applyFilter(); return false; }); window.addEventListener('hashchange', applyFilter); applyFilter(); }); </script>