101 lines
4.4 KiB
HTML
101 lines
4.4 KiB
HTML
{% extends 'layout.html' %}
|
|
|
|
{% block content %}
|
|
<link href="{{page.include_prefix}}assets/components.css" rel="stylesheet">
|
|
<script src="{{page.include_prefix}}assets/snippets.js"></script>
|
|
<script src="{{page.include_prefix}}assets/components.js"></script>
|
|
<link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
|
|
|
|
<div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col">
|
|
<aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
|
|
{% for category in page.categories %}
|
|
<a href="#{{ category.name }}-section" class="mdl-components__link mdl-component {{ category.name }}">
|
|
<div class="mdl-components__link-image"
|
|
style="background-image: url('{{page.include_prefix}}assets/comp_{{ category.name }}.png')">
|
|
</div>
|
|
<span class="mdl-components__link-text">{{ category.title }}</span>
|
|
</a>
|
|
{%- endfor %}
|
|
</aside>
|
|
<main class="mdl-components__pages">
|
|
<section id="index-section" class="mdl-components-index mdl-components__page">
|
|
<div class="mdl-components-index-text mdl-grid">
|
|
<div class="mdl-components-text docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
|
|
<dl class="mdl-components-dl">
|
|
<dt class="mdl-components-dt">COMPONENTS</dt>
|
|
<dd class="mdl_components-dd">
|
|
Material Design Lite (MDL) is a library of components for web developers
|
|
based on Google's Material Design Philosophy: "A visual language for our
|
|
users that synthesizes the classic principles of good design with the
|
|
innovation and possibility of technology and science." Understanding the
|
|
goals and principles of Material Design is critical to the proper use of
|
|
the Material Design Lite components. If you have not yet read the
|
|
<a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Introduction</a>
|
|
you should do so before attempting to use the components.
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div class="mdl-components-img"></div>
|
|
</section>
|
|
|
|
{% for category in page.categories -%}
|
|
<section id="{{ category.name }}-section" class="mdl-components__page mdl-grid">
|
|
<div class="mdl-cell mdl-cell--12-col">
|
|
<div class="docs-text-styling component-title">
|
|
<h3>{{ category.title }}</h3>
|
|
<p>{{ category.description }}</p>
|
|
</div>
|
|
|
|
{% if category.components.length > 1 %}
|
|
<section class="docs-toc docs-text-styling">
|
|
<nav class="section-content">
|
|
<ul>
|
|
{% for component in category.components %}
|
|
<li><a href="#{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</a></li>
|
|
{%- endfor %}
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
{%- endif %}
|
|
|
|
{% for component in category.components %}
|
|
|
|
{% if component.caption %}
|
|
<span class="docs-text-styling">
|
|
<h1 class="mdl-components__classname" id="{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</h1>
|
|
</span>
|
|
{%- endif %}
|
|
<!-- Add warning, if the component has one -->
|
|
{% if component.warning %}
|
|
<div class="mdl-components__warning"><b>Note: </b>{{ component.warning }}</div>
|
|
{%- endif %}
|
|
<!-- Generating snippets -->
|
|
{% for snippet_group in component.snippets %}
|
|
{% set snippet_group["component_name"] = component.name %}
|
|
{% include "./snippets.html" with snippet_group only %}
|
|
{%- endfor %}
|
|
<!-- Adding the demo page -->
|
|
{% set demo_css = "../../dist/components/" + component.name + "/demo.css" %}
|
|
<style>
|
|
{% include demo_css ignore missing %}
|
|
</style>
|
|
{% set demo_js = "../../dist/components/" + component.name + "/demo.js" %}
|
|
<script>
|
|
{% include demo_js ignore missing %}
|
|
</script>
|
|
{% set demo = "../../src/" + component.name + "/demo.html" %}
|
|
{% include demo ignore missing %}
|
|
<div class="docs-text-styling docs-readme">
|
|
{% set doc = "../../dist/components/" + component.name + "/index.html" %}
|
|
{% include doc ignore missing %}
|
|
</div>
|
|
{%- endfor %}
|
|
</div>
|
|
</section>
|
|
{%- endfor %}
|
|
</main>
|
|
</div>
|
|
|
|
{% endblock %}
|