Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
32 lines (27 sloc) 1.3 KB
<section class="Section" data-section="custom-elements">
<h2 class="Heading">
<span id="custom-elements" data-section-anchor></span>
Custom elements
</h2>
<responsive-container data-demo-root>
{% include 'components/Calendar.html' %}
</responsive-container>
{% include '_pin-action.html' %}
<h3>The code</h3>
<p>This demo shows the responsive <a href="#calendar">Calendar</a> component inside the <a href="https://developers.google.com/web/fundamentals/web-components/customelements">custom element</a> <code>&lt;responsive-container&gt;</code> rather than <code>&lt;div data-observe-resizes&gt;</code> as in the other examples. Custom elements are a perfect fit for responsive components if you're able to use them.</p>
{% highlight 'html' %}
<!-- Container element -->
<responsive-container>
<!-- Component element -->
<div class="Calendar">...</div>
</responsive-container>
{% endhighlight %}
<ul>
<li><a href="{{ repoUrl }}/blob/master/app/styles/demos/Calendar.css">
Full calendar CSS source</a></li>
<li><a href="{{ repoUrl }}/blob/master/app/templates/components/calendar.html">
Full calendar HTML source</a></li>
<li><a href="{{ repoUrl }}/blob/master/app/templates/demos/custom-elements.html">
Full demo HTML source</a></li>
</ul>
</section>