---
layout: demo
title: Demo - light7
---
<div class="page" id="page-index">
  <header class="bar bar-nav">
    <a class="icon icon-me pull-left open-panel"></a>
    <a class="button button-link button-nav pull-right open-popup" data-popup=".popup-about">
      About
      <span class="icon icon-menu"></span>
    </a>
    <h1 class="title">Light7</h1>
  </header>
  <div class="bar bar-standard bar-footer">
    <a class="icon icon-edit pull-left"></a>
    <a class="icon icon-settings pull-right"></a>
  </div>
  <div class="content" id='page-index'>
    <div class="content-inner">
      <div class="content-block-title">Demos</div>
      <div class="list-block">
        <ul>
          <li>
            <a href="/demos/bar" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Titlebar and Toolbar</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/btns" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Buttons</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/form" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Form</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/searchbar" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Searchbar</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/list" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">List</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/tab" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Tab</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/card" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Cards</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/grid" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Grid</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/modal" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Modal</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/preloader" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Preloader</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/actions" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Action Sheet</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/calendar" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Calendar</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/picker" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">picker</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/datetime-picker" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Datetime Picker</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/city-picker" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">City Picker</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/swiper" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Swiper</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/photo-browser" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Photo Browser</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/pull-to-refresh" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Pull to Refresh</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/infinite-scroll" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Infinite Scroll</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/ptr-infinite-tabs" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">PullToRefresh InfiniteScroll Within Tabs</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/notification" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Notification</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/router" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Router</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/icons" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Icons</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/colors" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Themes</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="popup popup-about">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-right close-popup">
      Close
    </a>
    <h1 class="title">About light7</h1>
  </header>
  <div class="content">
    <div class="content-inner">
      <div class="content-block">
        <p>light7 is a light and easy to use UI Lib for webapp。</p>
        <p>See <a href='http://light7.org/' external target='_blank'>http://light7.org/</a> for more docs.</p>
        <p>Contact me: <a href='mailto:lihongxun945@gmail.com'>lihongxun945@gmail.com</a></p>
        <p></p>
        <p><a class="button close-popup">OK</a></p>
      </div>
    </div>
  </div>
</div>

<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal">
  <div class="content-block">
    <p>This is a side panel</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">Close</a></p>
  </div>
</div>