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.
116 lines
3.0 KiB
116 lines
3.0 KiB
---
|
|
layout : 'default'
|
|
css : 'input'
|
|
title : 'Input'
|
|
type : 'UI Element'
|
|
---
|
|
<div class="segment">
|
|
<div class="container">
|
|
<div class="ui small download menu">
|
|
<div class="header item">Links</div>
|
|
<div class="simple ui dropdown item">
|
|
<i class="icon setting"></i> Download <i class="icon dropdown"></i>
|
|
<div class="menu">
|
|
<a class="item">Uncompressed</a>
|
|
<a class="item">Minified</a>
|
|
<a class="item">LESS</a>
|
|
</div>
|
|
</div>
|
|
<a class="item"><i class="icon edit"></i> Authoring Guide</a>
|
|
</div>
|
|
<h1 class="ui header">
|
|
Input
|
|
<div class="sub header">Inputs allow a user to enter information</div>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Standard</a>
|
|
<a class="item">States</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
<h2 class="ui dividing header">Standard</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Input:</h4>
|
|
<p>A standard input</p>
|
|
<div class="ui input">
|
|
<input type="text">
|
|
</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">
|
|
</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">
|
|
<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="icon search"></i>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui icon input">
|
|
<input type="text" placeholder="Search users...">
|
|
<i class="icon blue inverted users"></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 input action">
|
|
<input type="text" placeholder="Search...">
|
|
<div class="ui button">Search</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui input action">
|
|
<input type="text" placeholder="Search...">
|
|
<div class="ui teal button"><i class="add user icon"></i> Add users</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|