| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Lungo Flexbox - SDK</title>
- <meta name="description" content="">
- <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
- <meta name="HandheldFriendly" content="True">
- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <meta http-equiv="cleartype" content="on">
- <!-- Main Stylesheet -->
- <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
- <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
- <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
- </head>
- <body>
- <aside id="a1">
- <header data-title="a1"></header>
- <article id="a1a1">
- <h1>a1.a1</h1>
- </article>
- <article id="a1a2">
- <h1>S1.A2</h1>
- </article>
- </aside>
- <aside id="a2">
- <header data-title="a2"></header>
- <article id="a2a1">
- <h1>a2.a1</h1>
- </article>
- </aside>
- <section id="s1" data-t-ransition="slide" data-children="one" data-aside="a1">
- <header data-title="s1">
- <nav class="left">
- <button data-icon="list" data-view-aside="a1"></button>
- </nav>
- <nav class="right">
- <button data-article="s1a1" data-view-article="s1a2" data-label="s1a2"></button>
- <button data-article="s1a2" data-view-article="s1a1" data-label="s1a1"></button>
- <button data-icon="arrow-right" data-view-section="s2"></button>
- </nav>
- </header>
- <article id="s1a1"><h1>S1.A1</h1></article>
- <article id="s1a2"><h1>S1.A2</h1></article>
- <footer>
- <nav>
- <a href="#" data-view-article="s1a2" data-icon="user" class="active"></a>
- <a href="#" data-view-article="s1a1" data-icon="group"></a>
- </nav>
- </footer>
- </section>
- <section id="s2" data-transition="slide" data-children="one" data-aside="a1">
- <header data-title="s2" data-back="home">
- <nav class="left">
- <button data-icon="list" data-view-aside="a1"></button>
- </nav>
- <nav class="right">
- <button data-article="s2a1" data-view-article="s2a2" data-label="s2a2"></button>
- <button data-article="s2a2" data-view-article="s2a1" data-label="s2a1"></button>
- <button data-icon="arrow-right" data-view-section="s3"></button>
- </nav>
- </header>
- <article id="s2a1"><h1>s2.A1</h1></article>
- <article id="s2a2"><h1>s2.A2</h1></article>
- </section>
- <section id="s3" data-t-ransition="slide" data-children="one" data-aside="a2">
- <header data-title="s3" data-back="home">
- <nav class="left">
- <button data-icon="list" data-view-aside="a2"></button>
- </nav>
- <nav class="right">
- <button data-article="s3a1" data-view-article="s3a2" data-label="s3a2"></button>
- <button data-article="s3a2" data-view-article="s3a1" data-label="s3a1"></button>
- </nav>
- </header>
- <article id="s3a1"><h1>s3.A1</h1></article>
- <article id="s3a2"><h1>s3.A2</h1></article>
- </section>
- <!-- Lungo dependencies -->
- <script src="components/quojs/quo.js"></script>
- <script src="components/lungo.brownie/lungo.debug.js"></script>
- <!-- LungoJS - Sandbox App -->
- <script>
- Lungo.init({
- name: 'Flexbox',
- version: '2.2',
- history: false
- });
- </script>
- </body>
- </html>
|