57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<section>
|
|
<div class="inner">
|
|
|
|
<h1>Inputs</h1>
|
|
|
|
<p>Synergy treats inputs, <NuxtLink to="/components/select">selects</NuxtLink> and <NuxtLink to="/components/textarea">text areas</NuxtLink> all like inputs. This page apply to all of them.</p>
|
|
|
|
<Example selector=".inp">
|
|
<div class="form">
|
|
<input type="text" class="inp" placeholder="Enter your name">
|
|
</div>
|
|
</Example>
|
|
|
|
<p>Inputs can be placed into divs with the same class.</p>
|
|
|
|
<Example selector=".inp">
|
|
<div class="form">
|
|
<div class="inp">
|
|
<input type="text" placeholder="Enter your name">
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
<h2>Sizes</h2>
|
|
|
|
<p>All inputs have 3 available sizes: large, normal and small.</p>
|
|
|
|
<Example selector=".form" :inner="true">
|
|
<div class="form">
|
|
<input type="text" class="inp inp-lg" placeholder="Large input" />
|
|
<input type="text" class="inp inp" placeholder="Normal input" />
|
|
<input type="text" class="inp inp-sm" placeholder="Small input" />
|
|
</div>
|
|
</Example>
|
|
|
|
<h2>Fancy inputs</h2>
|
|
|
|
<p>Synergy also provides an alternative style for inputs with Material-like labels inside of inputs.</p>
|
|
<p>These inputs support only normal size.</p>
|
|
|
|
<Example selector=".inp">
|
|
<div class="form">
|
|
<div class="inp inp-fancy">
|
|
<input type="text" placeholder="">
|
|
<label>Label</label>
|
|
</div>
|
|
<div class="inp inp-fancy">
|
|
<input type="text" placeholder="" value="Text">
|
|
<label>Label</label>
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
</div>
|
|
</section>
|
|
</template>
|