You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

174 lines
4.8 KiB

---
layout : 'default'
css : 'input'
title : 'Input'
description : 'Inputs allow a user to enter information'
type : 'UI Element'
---
<%- @partial('header') %>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="active item">Types</a>
<a class="item">States</a>
<a class="item">Variations</a>
</div>
</div>
<h2 class="ui dividing header">Types</h2>
<div class="example">
<h4 class="ui header">Input</h4>
<p>A standard input</p>
<div class="ui input">
<input type="text" placeholder="Search...">
</div>
</div>
<h2 class="ui dividing header">States</h2>
<div class="example">
<h4 class="ui header">Focus</h4>
<p>An input field can show a user is currently interacting with it</p>
<div class="ui input focus">
<input type="text" placeholder="Search...">
</div>
</div>
<div class="example">
<h4 class="ui header">Loading</h4>
<p>An icon input field can show that it is currently loading data</p>
<div class="ui icon input loading">
<input type="text" placeholder="Search...">
<i class="icon"></i>
</div>
</div>
<div class="example">
<h4 class="ui header">Error</h4>
<p>An input field can show the data contains errors</p>
<div class="ui input error" placeholder="Search...">
<input type="text">
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Icon</h4>
<p>An input can be formatted with an icon</p>
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
</div>
<div class="another example">
<div class="ui left icon input">
<input type="text" placeholder="Search users...">
<i class="users icon"></i>
</div>
</div>
<div class="another example">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="circular search icon"></i>
</div>
</div>
<div class="another example">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="inverted search icon"></i>
</div>
</div>
<div class="example">
<h4 class="ui header">Labeled</h4>
<p>An input can be formatted with a label</p>
<div class="ui labeled input">
<input type="text" placeholder="Search...">
<div class="ui corner label">
<i class="asterisk icon"></i>
</div>
</div>
<br><br>
<div class="ui labeled input">
<input type="text" placeholder="Search...">
<div class="ui corner label">
<div class="text">New</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Action</h4>
<p>An input can be formatted to alert the user to an action they may perform</p>
<div class="ui action input">
<input type="text" placeholder="Search...">
<div class="ui button">Search</div>
</div>
</div>
<div class="another example">
<div class="ui action input">
<input type="text" placeholder="Username">
<div class="ui teal button"><i class="user icon"></i> Add users</div>
</div>
</div>
<div class="another example">
<div class="ui action input">
<input type="text" placeholder="Search...">
<div class="ui icon button"><i class="search icon"></i></div>
</div>
</div>
<div class="example">
<h4 class="ui header">Fluid</h4>
<p>An input can take the size of its container</p>
<div class="ui fluid icon input">
<input type="text" placeholder="Search a very wide input...">
<i class="search icon"></i>
</div>
</div>
<div class="example">
<h4 class="ui header">Size</h4>
<p>An input can vary in size</p>
<div class="ui mini icon input">
<input type="text" placeholder="Search mini...">
<i class="search icon"></i>
</div>
</div>
<div class="another example">
<div class="ui small icon input">
<input type="text" placeholder="Search small...">
<i class="search icon"></i>
</div>
</div>
<div class="another example">
<div class="ui large icon input">
<input type="text" placeholder="Search large...">
<i class="search icon"></i>
</div>
</div>
<div class="another example">
<div class="ui big icon input">
<input type="text" placeholder="Search big...">
<i class="search icon"></i>
</div>
</div>
<div class="another example">
<div class="ui huge icon input">
<input type="text" placeholder="Search huge...">
<i class="search icon"></i>
</div>
</div>
<div class="another example">
<div class="ui massive icon input">
<input type="text" placeholder="Search massive...">
<i class="search icon"></i>
</div>
</div>
</div>