framework7.angular/kitchen-sink-material/home.html

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

<div data-page="home" class="page" >
  <div class="navbar">
    <div class="navbar-inner">
      <div class="center">{{title}}</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block-title">Welcome To Framework7</div>
    <div class="content-block"><a href="about.html" class="button button-raised">About Framework7</a></div>
    <div class="content-block-title">Framework7 Kitchen Sink</div>
    <div class="list-block">
      <ul>
        <li><a href="accordion.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Accordion</div>
              </div>
            </div></a></li>
        <li><a href="autocomplete.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Autocomplete</div>
                <div class="item-after"><span class="badge bg-green">NEW</span></div>
              </div>
            </div></a></li>
        <li><a href="calendar.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Calendar / Datepicker</div>
                <div class="item-after"><span class="badge bg-green">NEW</span></div>
              </div>
            </div></a></li>
        <li><a href="cards.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Cards</div>
              </div>
            </div></a></li>
        <li><a href="contacts.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Contacts List</div>
              </div>
            </div></a></li>
        <li><a href="chips.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Chips</div>
                <div class="item-after"><span class="badge bg-green">NEW</span></div>
              </div>
            </div></a></li>
        <li><a href="floating-button.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Floating Action Button</div>
                <div class="item-after"><span class="badge bg-green">NEW</span></div>
              </div>
            </div></a></li>
        <li><a href="forms.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Forms</div>
              </div>
            </div></a></li>
        <li><a href="grid.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Grid</div>
              </div>
            </div></a></li>
        <li><a href="infinite-scroll.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Infinite Scroll</div>
              </div>
            </div></a></li>
        <li><a href="lazy-load.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Lazy Load Images</div>
              </div>
            </div></a></li>
        <li><a href="list-view.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">List View</div>
              </div>
            </div></a></li>
        <li><a href="login-screen.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Login Screen</div>
              </div>
            </div></a></li>
        <li><a href="media-lists.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Media Lists</div>
              </div>
            </div></a></li>
        <li><a href="messages.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Messages</div>
              </div>
            </div></a></li>
        <li><a href="modals.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Modals</div>
              </div>
            </div></a></li>
        <li><a href="bars.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Navbars And Toolbars</div>
                <div class="item-after"><span class="badge bg-green">NEW</span></div>
              </div>
            </div></a></li>
        <li><a href="notifications.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Notifications</div>
              </div>
            </div></a></li>
        <li><a href="photo-browser.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Photo Browser</div>
              </div>
            </div></a></li>
        <li><a href="picker.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Picker</div>
              </div>
            </div></a></li>
        <li><a href="popover.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Popover</div>
              </div>
            </div></a></li>
        <li><a href="preloader.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Preloader</div>
              </div>
            </div></a></li>
        <li><a href="progressbar.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Progress Bar</div>
                <div class="item-after"><span class="badge bg-green">NEW</span></div>
              </div>
            </div></a></li>
        <li><a href="pull-to-refresh.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Pull To Refresh</div>
              </div>
            </div></a></li>
        <li><a href="searchbar.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Search Bar</div>
              </div>
            </div></a></li>
        <li><a href="panels.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Side Panels</div>
              </div>
            </div></a></li>
        <li><a href="sortable-list.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Sortable List</div>
              </div>
            </div></a></li>
        <li><a href="swipe-delete.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Swipe To Delete</div>
              </div>
            </div></a></li>
        <li><a href="swiper.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Swiper Slider</div>
                <div class="item-after"><span class="badge bg-green">NEW</span></div>
              </div>
            </div></a></li>
        <li><a href="tabs.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Tabs</div>
                <div class="item-after"><span class="badge bg-green">NEW</span></div>
              </div>
            </div></a></li>
        <li><a href="virtual-list.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Virtual List</div>
              </div>
            </div></a></li>
      </ul>
    </div>
    <div class="list-block">
      <ul>
        <li><a href="color-themes.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Color Themes</div>
              </div>
            </div></a></li>
        <li><a href="#" class="item-link ks-generate-page" ng-click="createContentPage()">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Dynamically Generated Content</div>
              </div>
            </div></a></li>
      </ul>
    </div>
    <div class="list-block">
      <ul>
        <li><a href="core-features.html" class="item-link ks-generate-page">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Core Features</div>
              </div>
            </div></a></li>
      </ul>
    </div>
  </div>
</div>