61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<section>
|
||
|
|
<div class="inner">
|
||
|
|
|
||
|
|
<h1>Buttons</h1>
|
||
|
|
|
||
|
|
<p>Synergy contains primary and secondary buttons.</p>
|
||
|
|
|
||
|
|
<Example title="Button variants" selector=".btn-row" :inner="true">
|
||
|
|
<div class="btn-row">
|
||
|
|
<button class="btn btn-primary">Primary</button>
|
||
|
|
<button class="btn">Secondary</button>
|
||
|
|
</div>
|
||
|
|
</Example>
|
||
|
|
|
||
|
|
<p>Available button sizes are large, normal and small.</p>
|
||
|
|
|
||
|
|
<Example selector=".btn-row" :inner="true">
|
||
|
|
<div class="btn-row">
|
||
|
|
<button class="btn btn-lg">Large</button>
|
||
|
|
<button class="btn">Normal</button>
|
||
|
|
<button class="btn btn-sm">Small</button>
|
||
|
|
</div>
|
||
|
|
</Example>
|
||
|
|
|
||
|
|
<p>It is also possible to make buttons rounded.</p>
|
||
|
|
|
||
|
|
<Example selector=".btn-row" :inner="true">
|
||
|
|
<div class="btn-row">
|
||
|
|
<button class="btn btn btn-rounded btn-primary">Primary</button>
|
||
|
|
<button class="btn btn-rounded">Secondary</button>
|
||
|
|
</div>
|
||
|
|
</Example>
|
||
|
|
|
||
|
|
<h2>Elements</h2>
|
||
|
|
|
||
|
|
<p>It is possible to use <code>.btn</code> class names on multiple HTML elements.</p>
|
||
|
|
|
||
|
|
<Example selector=".btn-row" :inner="true">
|
||
|
|
<div class="btn-row">
|
||
|
|
<a href="#" class="btn">Link</a>
|
||
|
|
<button class="btn">Button</button>
|
||
|
|
<input class="btn" type="button" value="Input" />
|
||
|
|
</div>
|
||
|
|
</Example>
|
||
|
|
|
||
|
|
<h2>Button rows</h2>
|
||
|
|
|
||
|
|
<p>You can place buttons in a row using <code>.btn-row</code> class name.</p>
|
||
|
|
|
||
|
|
<Example selector=".btn-row">
|
||
|
|
<div class="btn-row">
|
||
|
|
<button class="btn btn-primary">Get started</button>
|
||
|
|
<button class="btn">Information</button>
|
||
|
|
</div>
|
||
|
|
</Example>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|