/
githubmirror
/
materialize
Обзор
Документация
Войти
/
githubmirror
/
materialize
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
v0.97.8
buttons.html
387 строк
23 KB
Chang Alan
added full docs and iframed demo
28 сен 2016, 05:09
28 сен 2016, 05:09
63d7e8f
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="msapplication-tap-highlight" content="no"> <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. "> <title>Buttons - Materialize</title> <!-- Favicons--> <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png"> <meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png"> <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32"> <!-- Android 5 Chrome Color--> <meta name="theme-color" content="#EE6E73"> <!-- CSS--> <link href="css/prism.css" rel="stylesheet"> <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection"> <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script> window.liveSettings = { api_key: "a0b49b34b93844c38eaee15690d86413", picker: "bottom-right", detectlang: true, dynamic: true, autocollect: true }; </script> <script src="//cdn.transifex.com/live.js"></script> </head> <body> <header> <nav class="top-nav"> <div class="container"> <div class="nav-wrapper"><a class="page-title">Buttons</a></div> </div> </nav> <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div> <ul id="nav-mobile" class="side-nav fixed"> <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo"> <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li> <li class="search"> <div class="search-wrapper card"> <input id="search"><i class="material-icons">search</i> <div class="search-results"></div> </div> </li> <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li> <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li> <li class="no-padding"> <ul class="collapsible collapsible-accordion"> <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a> <div class="collapsible-body"> <ul> <li><a href="color.html">Color</a></li> <li><a href="grid.html">Grid</a></li> <li><a href="helpers.html">Helpers</a></li> <li><a href="media-css.html">Media</a></li> <li><a href="sass.html">Sass</a></li> <li><a href="shadow.html">Shadow</a></li> <li><a href="table.html">Table</a></li> <li><a href="typography.html">Typography</a></li> </ul> </div> </li> <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a> <div class="collapsible-body"> <ul> <li><a href="badges.html">Badges</a></li> <li class="active"><a href="buttons.html">Buttons</a></li> <li><a href="breadcrumbs.html">Breadcrumbs</a></li> <li><a href="cards.html">Cards</a></li> <li><a href="chips.html">Chips</a></li> <li><a href="collections.html">Collections</a></li> <li><a href="footer.html">Footer</a></li> <li><a href="forms.html">Forms</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="navbar.html">Navbar</a></li> <li><a href="pagination.html">Pagination</a></li> <li><a href="preloader.html">Preloader</a></li> </ul> </div> </li> <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a> <div class="collapsible-body"> <ul> <li><a href="carousel.html">Carousel</a></li> <li><a href="collapsible.html">Collapsible</a></li> <li><a href="dialogs.html">Dialogs</a></li> <li><a href="dropdown.html">Dropdown</a></li> <li><a href="media.html">Media</a></li> <li><a href="modals.html">Modals</a></li> <li><a href="parallax.html">Parallax</a></li> <li><a href="pushpin.html">Pushpin</a></li> <li><a href="scrollfire.html">ScrollFire</a></li> <li><a href="scrollspy.html">Scrollspy</a></li> <li><a href="side-nav.html">SideNav</a></li> <li><a href="tabs.html">Tabs</a></li> <li><a href="transitions.html">Transitions</a></li> <li><a href="waves.html">Waves</a></li> </ul> </div> </li> </ul> </li> <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li> <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li> </ul> </header> <main><div class="container"> <div class="row"> <div class="col s12 m9 l10"> <div id="raised" class="section scrollspy"> <p class="caption"> There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals. </p> <h2 class="header">Raised</h2> <a class="waves-effect waves-light btn">button</a> <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a> <pre><code class="language-markup col s12"> <a class="waves-effect waves-light btn">button</a> <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a> </code></pre> </div> <div id="floating" class="section scrollspy"> <h2 class="header">Floating</h2> <a class="btn-floating waves-effect waves-light btn-large red"><i class="material-icons">add</i></a><br><br> <pre><code class="language-markup col s12"> <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></i></a> </code></pre> <br> <h4 class="light">Fixed Action Button</h4> <p>If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page.</p> <pre><code class="language-markup col s12"> <div class="fixed-action-btn"> <a class="btn-floating btn-large red"> <i class="large material-icons">mode_edit</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </code></pre> <p>You can also open and close the Fixed Action Button Menu programatically.</p> <pre><code class="language-javascript"> $('.fixed-action-btn').openFAB(); $('.fixed-action-btn').closeFAB(); $('.fixed-action-btn.toolbar').openToolbar(); $('.fixed-action-btn.toolbar').closeToolbar(); </code></pre> <br> <h4 class="light">Horizontal FAB</h4> <p>Creating a horizontal FAB is easy! Just add the class <code class="language-markup">horizontal</code> to the FAB.</p> <div style="position: relative; height: 70px;"> <div class="fixed-action-btn horizontal" style="position: absolute; display: inline-block; right: 24px;"> <a class="btn-floating btn-large red"> <i class="large material-icons">mode_edit</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </div> <pre><code class="language-markup col s12"> <div class="fixed-action-btn horizontal"> <a class="btn-floating btn-large red"> <i class="large material-icons">mode_edit</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </code></pre> <div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-large red"> <i class="material-icons">mode_edit</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> <br> <h4 class="light">Click-only FAB</h4> <p>If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), just add the <code class="language-markup">click-to-toggle</code> class to the FAB.</p> <div style="position: relative; height: 70px;"> <div class="fixed-action-btn horizontal click-to-toggle" style="position: absolute; right: 24px;"> <a class="btn-floating btn-large red"> <i class="material-icons">menu</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </div> <pre><code class="language-markup col s12"> <div class="fixed-action-btn horizontal click-to-toggle"> <a class="btn-floating btn-large red"> <i class="material-icons">menu</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </code></pre> <h4 class="light">FAB to Toolbar</h4> <p>Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the <code class="language-markup">toolbar</code> class to the FAB.</p> <iframe src="fab-toolbar-demo.html" frameborder="0" width="100%" height="100px"></iframe> <pre><code class="language-markup col s12"> <div class="fixed-action-btn horizontal click-to-toggle"> <a class="btn-floating btn-large red"> <i class="material-icons">menu</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </code></pre> </div> <div id="flat" class="section scrollspy"> <h2 class="header">Flat</h2> <p>Flat buttons are used to reduce excessive layering. For example, flat buttons are usually used for actions within a card or modal so there aren't too many overlapping shadows.</p> <a class="waves-effect waves-teal btn-flat">Button</a> <pre><code class="language-markup col s12"> <a class="waves-effect waves-teal btn-flat">Button</a> </code></pre> </div> <div id="submit" class="section scrollspy"> <h2 class="header">Submit Button</h2> <p>When you use a button to submit a form, instead of using a input tag, use a button tag with a type submit</p> <button class="btn waves-effect waves-light" type="submit" name="action">Submit<i class="material-icons right">send</i></button> <pre><code class="language-markup"> <button class="btn waves-effect waves-light" type="submit" name="action">Submit <i class="material-icons right">send</i></i> </button> </code></pre> </div> <div id="large" class="section scrollspy"> <h2 class="header">Large</h2> <p>This button has a larger height for buttons that need more attention.</p> <a class="waves-effect waves-light btn-large">Button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a> <pre><code class="language-markup col s12"> <a class="waves-effect waves-light btn-large">Button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a> </code></pre> </div> <div id="disabled" class="section scrollspy"> <h2 class="header">Disabled</h2> <p>This style can be applied to all button types</p> <a class="btn-large disabled">Button</a> <a class="btn disabled">Button</a> <a class="btn-flat disabled">Button</a> <a class="btn-floating disabled"><i class="material-icons">add</i></a> <pre><code class="language-markup col s12"> <a class="btn-large disabled">Button</a> <a class="btn disabled">Button</a> <a class="btn-flat disabled">Button</a> <a class="btn-floating disabled"><i class="material-icons">add</i></a> </code></pre> </div> </div> <div class="col hide-on-small-only m3 l2"> <div class="toc-wrapper"> <div class="buysellads hide-on-small-only"> <!-- CarbonAds Zone Code --> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script> </div> <div style="height: 1px;"> <ul class="section table-of-contents"> <li><a href="#raised">Raised</a></li> <li><a href="#floating">Floating</a></li> <li><a href="#flat">Flat</a></li> <li><a href="#submit">Submit</a></li> <li><a href="#large">Large</a></li> <li><a href="#disabled">Disabled</a></li> </ul> </div> </div> </div> </div> </div> </main> <footer class="page-footer"> <div class="container"> <div class="row"> <div class="col l4 s12"> <h5 class="white-text">Help Materialize Grow</h5> <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p> <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7----- "> <button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now </button> </form> </div> <div class="col l4 s12"> <h5 class="white-text">Join the Discussion</h5> <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p> <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a> </div> <div class="col l4 s12" style="overflow: hidden;"> <h5 class="white-text">Connect</h5> <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe> <br> <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a> <br> <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div> </div> </div> </div> <div class="footer-copyright"> <div class="container"> © 2014-2016 Materialize, All rights reserved. <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a> </div> </div> </footer> <!-- Scripts--> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); } </script> <script src="js/jquery.timeago.min.js"></script> <script src="js/prism.js"></script> <script src="jade/lunr.min.js"></script> <script src="jade/search.js"></script> <script src="bin/materialize.js"></script> <script src="js/init.js"></script> <!-- Twitter Button --> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <!-- Google Plus Button--> <script src="https://apis.google.com/js/platform.js" async defer></script> <!-- Google Analytics --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-56218128-1', 'auto'); ga('require', 'displayfeatures'); ga('send', 'pageview'); </script> </body> </html>