metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Bottom sheet - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-done="console.log(arguments[0])" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#_bn_about">Bottom sheet</a></li> <li class="toc-entry"><a href="#_bn_create">Create</a></li> <li class="toc-entry"><a href="#_bn_methods">Methods</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Bottom sheet</h1> <p class="text-leader"> Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen. </p>  <h3 id="_bn_about">About</h3> <p class="text-small">Designed for using with <a href="https://phonegap.com/">PhoneGap</a></p> <p> Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen. Bottom sheets are anchored to the bottom edge of the screen and appear in front of other UI elements. They are full-width on mobile and can be inset or full-width on tablet or desktop. </p> <p> Bottom sheets can be displayed as list or as grid. </p> <div class="example row"> <div class="cell-md-6"> <div class="emulator galaxy-s5 bg-light" style="height: 300px"> <ul class="bottom-sheet pos-absolute opened"> <li class=""><span class="icon mif-comment"></span>Message</li> <li class=""><span class="icon mif-location"></span>Location</li> <li class=""><span class="icon mif-keyboard-voice"></span>Voice</li> <li class=""><span class="icon mif-phone"></span>Dialer</li> <li class="divider"></li> <li class=""><span class="icon mif-file-upload"></span>Upload</li> </ul> </div> </div> <div class="cell-md-6"> <div class="emulator galaxy-s5 bg-light" style="height: 300px"> <ul class="bottom-sheet pos-absolute opened grid-style"> <li class=""><span class="icon mif-comment"></span>Message</li> <li class=""><span class="icon mif-location"></span>Location</li> <li class=""><span class="icon mif-keyboard-voice"></span>Voice</li> <li class=""><span class="icon mif-phone"></span>Dialer</li> <li class="divider"></li> <li class=""><span class="icon mif-file-upload"></span>Upload</li> </ul> </div> </div> </div> <h3 id="_bn_create">Create bottom sheet</h3> <p> To create <code>bottom sheet</code>, add attribute <code>data-role="bottomsheet"</code> to your html list. </p> <pre><code> <ul data-role="bottomsheet"> <li><span class="icon mif-comment"></span>Message</li> <li><span class="icon mif-location"></span>Location</li> <li><span class="icon mif-keyboard-voice"></span>Voice</li> <li><span class="icon mif-phone"></span>Dialer</li> <li class="divider"></li> <li><span class="icon mif-file-upload"></span>Upload</li> </ul> </code></pre>  <h3 id="_bn_methods">Methods</h3> <p> To interact with component, you must use component API methods or methods of <code>Metro.bottomsheet</code> object. </p> <div class="example d-flex flex-justify-center"> <div class="emulator galaxy-s5 bg-light" style="height: 350px;"> <div class="text-center m-4"> <button class="button info" onclick="Metro.bottomsheet.toggle('#bottom-sheet', 'list')">List style</button> <button class="button info" onclick="Metro.bottomsheet.toggle('#bottom-sheet', 'grid')">Grid style</button> </div> <ul class="bottom-sheet pos-absolute" id="bottom-sheet" data-role="bottomsheet"> <li class=""><span class="icon mif-comment"></span>Message</li> <li class=""><span class="icon mif-location"></span>Location</li> <li class=""><span class="icon mif-keyboard-voice"></span>Voice</li> <li class=""><span class="icon mif-phone"></span>Dialer</li> <li class="divider"></li> <li class=""><span class="icon mif-file-upload"></span>Upload</li> </ul> </div> </div> <p> You can use next API methods: </p> <ul> <li>open('list|grid')</li> <li>close()</li> <li>isOpen()</li> <li>toggle('list|grid')</li> </ul> <p> And next <code>Metro.bottomsheet</code> methods: </p> <ul> <li>open(el, 'list|grid')</li> <li>close(el)</li> <li>isOpen(el)</li> <li>toggle(el, 'list|grid')</li> </ul> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>