holakit

<!DOCTYPE html> <html class="no-js hola-html-reset hola-var" lang="en"> <head> <meta charset="utf-8"> <title>HolaKit</title> <meta name="description" content=""> <meta name="generator" content="kss-node"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="kss-assets/kss.css"> <link rel="stylesheet" href="/dist/holakit.css"> </head> <body id="kss-node" class="hola-body-typography hola-grey-bg kss-fullscreen-mode"> <div class="kss-sidebar kss-style"> <header class="kss-header"> <h1 class="kss-doc-title">HolaKit</h1> </header> <nav class="kss-nav"> <ul class="kss-nav__menu"> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="./"> <span class="kss-nav__ref">0</span ><span class="kss-nav__name">Overview</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-components.html"> <span class="kss-nav__ref">1</span><span class="kss-nav__name">Components</span> </a> </li> </ul> </nav> </div> <article role="main" class="kss-main"> <div id="kssref-components-buttons" class="kss-section kss-section--depth-2 is-fullscreen"> <div class="kss-style"> <h2 class="kss-title kss-title--level-2"> <a class="kss-title__permalink" href="#kssref-components-buttons"> <span class="kss-title__ref"> 1.1 <span class="kss-title__permalink-hash"> #Components - Buttons </span> </span> Buttons </a> </h2> <p class="kss-toolbar"> <a href="#kssref-components-buttons" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-components-buttons" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>Buttons are one of the most used components. It's the very basic way that users can interact with an application. Currently HolaKit provides 3 kinds of button: Normal buttons, primary buttons and Ghost buttons.</p> <ul> <li><strong>Normal Buttons</strong>: For general purpose.</li> <li><strong>Primary Buttons</strong>: For primary operations. Normally in a row of buttons, you have at least one primary buttons, for the most frequent usage.</li> <li><strong>Ghost Buttons</strong>: For banner and heroes. It's kind of call-to-action.</li> </ul> <p>All buttons classes can be apply to form submits (<code><input type="submit"></code>), HTML buttons (<code><button></code>) and links (<code><a></code>). In many cases you can also use just a bare <code>a.hola-button</code>, for links in a row with other buttons to be properly aligned.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <p> <input type="submit" class="hola-button hola-button-normal" value="表单提交"> <button class="hola-button hola-button-normal"><button> 组件</button> <a href="#" class="hola-button hola-button-normal">链接按钮</a> </p> <p> <a href="#" class="hola-button hola-button-primary">Primary Button</a> <a href="#" class="hola-button hola-button-ghost">Ghost Button</a> </p> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup: <code>components/button.html</code> </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><p> <input type="submit" class="hola-button hola-button-normal" value="表单提交"> <button class="hola-button hola-button-normal">&lt;button&gt; 组件</button> <a href="#" class="hola-button hola-button-normal">链接按钮</a> </p> <p> <a href="#" class="hola-button hola-button-primary">Primary Button</a> <a href="#" class="hola-button hola-button-ghost">Ghost Button</a> </p></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/button.css</code>, line 1 </div> </div> </article>  <script src="kss-assets/kss.js"></script> <script src="kss-assets/scrollspy.js"></script> <script src="kss-assets/prettify.js"></script> <script src="kss-assets/kss-fullscreen.js"></script> <script src="kss-assets/kss-guides.js"></script> <script src="kss-assets/kss-markup.js"></script> <script> prettyPrint(); var spy = new ScrollSpy('#kss-node', { nav: '.kss-nav__menu-child > li > a', className: 'is-in-viewport' }); var kssFullScreen = new KssFullScreen({ idPrefix: 'kss-fullscreen-', bodyClass: 'kss-fullscreen-mode', elementClass: 'is-fullscreen' }); var kssGuides = new KssGuides({ bodyClass: 'kss-guides-mode' }); var kssMarkup = new KssMarkup({ bodyClass: 'kss-markup-mode', detailsClass: 'kss-markup' }); </script>  </body> </html>