framework7-vue

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>Document</title> <link rel="stylesheet" href="framework7/framework7.ios.min.css"> <link rel="stylesheet" href="framework7/framework7.ios.colors.min.css"> </head> <body> <div id="app"> <f7-statusbar></f7-statusbar> <f7-panel left reveal layout="dark" theme="pink"> <f7-view navbar-fixed name="left"> <f7-pages> <f7-page> <f7-navbar title="Left Panel"></f7-navbar> <f7-list> <f7-list-item link="/cards/" title="Cards"></f7-list-item> <f7-list-item link="/lists/" title="Lists"></f7-list-item> </f7-list> </f7-page> </f7-pages> </f7-view> </f7-panel> <f7-panel right cover layout="dark"> <p>Panel right content</p> </f7-panel> <f7-views navbar-through> <f7-view main url="/" :dynamic-navbar="true"> <f7-navbar> <f7-nav-left> <f7-link icon="icon-bars" open-panel="left"></f7-link> </f7-nav-left> <f7-nav-center sliding>Hello World</f7-nav-center> <f7-nav-right> <f7-link icon="icon-bars" open-panel="right"></f7-link> </f7-nav-right> </f7-navbar> <f7-pages> <f7-page toolbar-fixed> <f7-toolbar> <f7-link>Left</f7-link> <f7-link>Right</f7-link> </f7-toolbar> <f7-list> <f7-list-item title="Content Block" link="/content-block/"></f7-list-item> <f7-list-item title="Cards" link="/cards/"></f7-list-item> <f7-list-item title="Lists" link="/lists/"></f7-list-item> <f7-list-item title="Contacts" link="/contacts/"></f7-list-item> <f7-list-item title="Sortable" link="/sortable/"></f7-list-item> <f7-list-item title="Swipeout" link="/swipeout/"></f7-list-item> <f7-list-item title="Accordion" link="/accordion/"></f7-list-item> <f7-list-item title="Forms" link="/forms/"></f7-list-item> <f7-list-item title="Smart Select" link="/smart-select/"></f7-list-item> <f7-list-item title="Chips" link="/chips/"></f7-list-item> <f7-list-item title="Grid" link="/grid/"></f7-list-item> <f7-list-item title="Preloader" link="/preloader/"></f7-list-item> <f7-list-item title="Progress Bar" link="/progressbar/"></f7-list-item> <f7-list-item title="Pull To Refresh" link="/pull-to-refresh/"></f7-list-item> <f7-list-item title="Infinite Scroll" link="/infinite/"></f7-list-item> <f7-list-item title="Swiper" link="/swiper/"></f7-list-item> <f7-list-item title="Messages" link="/messages/"></f7-list-item> <f7-list-item title="Searchbar" link="/searchbar/"></f7-list-item> <f7-list-item title="Tabs" link="/tabs/"></f7-list-item> <f7-list-item title="Tabs Swipeable" link="/tabs-swipeable/"></f7-list-item> <f7-list-item title="Navbars & Toolbars" link="/bars/"></f7-list-item> <f7-list-item title="FAB" link="/fab/"></f7-list-item> <f7-list-item title="FAB Speed Dial" link="/fab-dial/"></f7-list-item> <f7-list-item title="Login Screen" link="/login-screen/"></f7-list-item> <f7-list-item title="Virtual List" link="/virtual-list/"></f7-list-item> <f7-list-item title="Photo Browser" link="/photo-browser/"></f7-list-item> <f7-list-item title="Modals" link="/modals/"></f7-list-item> <f7-list-item title="Timeline Vertical" link="/timeline-vertical/"></f7-list-item> <f7-list-item title="Timeline Horizontal" link="/timeline-horizontal/"></f7-list-item> <f7-list-item title="Timeline Calendar" link="/timeline-calendar/"></f7-list-item> </f7-list> <f7-list> <f7-list-item title="Dynamic Route" link="/user/45/posts/28/?sort=first#opened"></f7-list-item> <f7-list-item title="Nested Routes" link="/nested-routes/"></f7-list-item> <f7-list-item title="Data Binding" link="/data-binding/"></f7-list-item> </f7-list> </f7-page> </f7-pages> </f7-view> </f7-views>  <f7-popover id="demo-popover" style="width:200px"> <f7-block> <p>Hello, i'm Popover</p> </f7-block> </f7-popover>  <f7-picker-modal id="demo-picker" :opened="pickerOpened"> <f7-toolbar> <f7-nav-left></f7-nav-left> <f7-nav-right>  <f7-link @click="pickerOpened=false">Done</f7-link>  </f7-nav-right> </f7-toolbar> <f7-block> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste qui architecto recusandae veniam delectus vero libero illo aliquid, fuga ratione vel facilis iure est fugiat sunt nihil, consectetur veritatis.</p> </f7-block> </f7-picker-modal>  <f7-popup id="demo-popup" :opened="popupOpened" @popup:closed="popupOpened=false"> <f7-view> <f7-pages> <f7-page navbar-fixed> <f7-navbar title="Demo Popup"> <f7-nav-right>  <f7-link @click="popupOpened=false">Close</f7-link>  </f7-nav-right> </f7-navbar> <f7-block> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste qui architecto recusandae veniam delectus vero libero illo aliquid, fuga ratione vel facilis iure est fugiat sunt nihil, consectetur veritatis.</p> <p>Itaque impedit, nam, sed reprehenderit quaerat commodi veritatis ducimus eos nisi, at aliquam dolorum alias optio natus. Sit voluptate aperiam, cupiditate repellat quod fugiat non doloribus eveniet dolorem fugit nihil.</p> <p>Error cumque sunt dolorem aut, similique accusantium delectus. Minima, natus. Doloremque ratione veniam cupiditate modi aspernatur debitis possimus iure id delectus! Totam eveniet, impedit minus deserunt aliquid facere laboriosam dignissimos.</p> <p>Aliquid autem saepe sit cumque odit nihil eius consectetur impedit accusantium sunt, repudiandae quaerat cum! Esse autem ipsum aliquam, distinctio laborum excepturi facilis fuga vitae atque iusto eligendi, explicabo corporis.</p> <p>Necessitatibus minima quidem fugit corporis reprehenderit saepe facilis perspiciatis sit, consectetur nulla officia, pariatur accusantium quas voluptas. Illum placeat eligendi dolor nihil libero culpa, ex quas voluptas deleniti, unde id.</p> </f7-block> </f7-page> </f7-pages> </f7-view> </f7-popup>  <f7-login-screen id="demo-login-screen" :opened="loginScreenOpened"> <f7-view> <f7-pages> <f7-page login-screen> <f7-login-screen-title>My App</f7-login-screen-title> <f7-list form> <f7-list-item> <f7-label>Username</f7-label> <f7-input name="username" placeholder="Username"></f7-input> </f7-list-item> <f7-list-item> <f7-label>Password</f7-label> <f7-input name="password" type="password" placeholder="Password"></f7-input> </f7-list-item> </f7-list> <f7-list>  <f7-list-button title="Sign In" @click="loginScreenOpened=false"></f7-list-button>  <f7-list-label> <p>Click Sign In to close Login Screen</p> </f7-list-label> </f7-list> </f7-page> </f7-pages> </f7-view> </f7-login-screen>  <f7-actions :opened="actionsOpened" @actions:closed="actionsOpened=false"> <f7-actions-group> <f7-actions-label>Hello</f7-actions-label> <f7-actions-button>Button 1</f7-actions-button> <f7-actions-button>Button 2</f7-actions-button> </f7-actions-group> <f7-actions-group> <f7-actions-button color="red" bold>Cancel</f7-actions-button> </f7-actions-group> </f7-actions> </div> <script src="framework7/framework7.js"></script> <script src="build.js"></script> </body> </html>