Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
94 lines (92 sloc) 4.28 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Dosis|Raleway:400,700|Roboto:300,400,900," rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="../base/reset.css">
<link rel="stylesheet" href="../base/mobileui.css">
<link rel="stylesheet" href="../base/colors.css">
<link rel="stylesheet" href="../base/icons.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../list/style.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../assets/css/master.css">
<style>
.content { margin-left:50px}
</style>
</head>
<body class="content">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Button</h2>
<p>
You can use <a href="#colors">colors theme</a> and <a href="#icons">icons</a> in button. If you need use base mode just add theme color name,
you can alter border color using class <code>border-[COLOR]</code>, alter text color using class <code>text-[COLOR]</code> and add radius border using class <code>radius</code>.
</p>
<p>For use icon in button you need add class <code>icon-text</code> and you can use diferent size, see the examples below.</p>
<p>
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code>.
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<pre>mobileui install button</pre>
<!-- _DOC_GENERATE_CSS_DOC -->
<p>You can use all features the <a href="#base">base</a> MobileUI in this component.</p>
<textarea class="bind-code" mode="text/html">
<button class="green">Login with email</button>
<button class="border-green text-green">Create a new user</button>
<p>Customize as you wish:</p>
<button class="brown border-brown-800 text-brown-50 radius icon-text">
<i class="icon ion-ios-settings-strong"></i>
Setting
</button>
<button class="brown border-brown-800 text-brown-50 radius icon-text icon-right">
<i class="icon ion-ios-settings-strong"></i>
Setting
</button>
<p>Social login:</p>
<button class="blue icon-text">
<i class="icon ion-social-facebook"></i>
Login with Facebook
</button>
<p>Different sizes:</p>
<button class="red icon-text big">
<i class="icon ion-trash-b"></i>
Delete
</button>
<button class="cyan">Edit</button>
<button class="purple small">View</button>
<p>Full size:</p>
<button class="pink full">View more detail</button>
<p>Group buttons:</p>
<div class="buttons-group full">
<button class="teal border-teal-700 radius-left">Left</button>
<button class="teal border-teal-700">Middle</button>
<button class="teal-700 border-teal-700">Middle</button>
<button class="teal border-teal-700 radius-right">Right</button>
</div>
<p>And different size in group:</p>
<div class="buttons-group full small">
<button class="red border-red-600 radius-left">Left</button>
<button class="red border-red-600">Middle</button>
<button class="red border-red-600 radius-right">Right</button>
</div></textarea>
<p>Another type button used in Android is a Tap, for this you can put <code>circle</code> class in button. You can controller what position button.</p>
<textarea class="bind-code" mode="text/html" height-preview="400px" replace="body,div">
<body class="padding grey-200">
<button class="green circle icon ion-plus"></button>
<button class="red circle icon ion-headphone shadow"></button>
<button class="green circle icon ion-chatbox shadow float-bottom-right"></button>
<button class="blue circle icon ion-ios-gear shadow float-bottom-left"></button>
</body></textarea>
<!-- DONE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
</body>
</html>