index.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Examples</title>

    <link rel="stylesheet" href="http://juicy.github.io/juicy-tile-list/examples/github-markdown.css">
    <style>
        body {
            font-family: Helvetica, Arial, sans-serif;
            color: #333;
            padding: 2em;
        }
    </style>
</head>
<body class="markdown-body">

    <a href="https://github.com/Juicy/juicy-html"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

    <h1>&lt;juicy-html&gt;</h1>

    <p>
        <code>&lt;juicy-html&gt;</code> (precisely: <code>&lt;template is="juicy-html"&gt;</code>) is a custom element that lets you load HTML partials from JS objects and external files into your DOM. It acts more or less, as `include` statement known in many other languages. It also provides data binding, that works for native JS/HTML as well as for Polymer's <code>dom-bind</code>. See <a href="https://github.com/Juicy/juicy-html">README.md</a> for more information.
    </p>

    <h2>Examples</h2>

    <ul>
        <li><a href="examples/basic_file.html"><code>&lt;juicy-html&gt;</code> with HTML partial loaded from a file</a></li>
        <li><a href="examples/basic_inline.html"><code>&lt;juicy-html&gt;</code> with HTML partial loaded from inline markup</a></li>
        <li><a href="examples/inline_markup_w_model_binding.html"><code>&lt;juicy-html&gt;</code> with data binding (Polymer &amp; native JS)</a></li>
        <li><a href="examples/polymer_template_inline.html"><code>&lt;juicy-html&gt;</code> in Polymer's <code>&lt;template is="dom-bind"&gt;</code> with inline HTML, and attached binding</a></li>
        <li><a href="examples/polymer_template_partial.html"><code>&lt;juicy-html&gt;</code> in Polymer's <code>&lt;template is="dom-bind"&gt;</code> with HTML partial loaded from a file, and attached binding</a></li>
        <li><a href="examples/template_partial_sibling.html"><code>&lt;juicy-html&gt;</code> content is stamped as sibling</a></li>
        <!-- <li><a href="examples/polymer_partial.html"><code>&lt;juicy-html&gt;</code> in a Polymer element</a></li> -->
    </ul>
</body>
</html>