Browse Source

updates form, dropdown , and accordion docs

pull/185/head
jlukic 11 years ago
parent
commit
d5f8988510
3 changed files with 70 additions and 20 deletions
  1. 47
      node/src/documents/collections/form.html.eco
  2. 37
      node/src/documents/modules/accordion.html.eco
  3. 6
      node/src/documents/modules/dropdown.html.eco

47
node/src/documents/collections/form.html.eco

@ -90,6 +90,11 @@ type : 'UI Collection'
<div class="example"> <div class="example">
<h4 class="ui header">Checkbox</h4> <h4 class="ui header">Checkbox</h4>
<p><a href="modules/checkbox.html">UI Checkboxes</a> are styled forms of standard form checkboxes.</p> <p><a href="modules/checkbox.html">UI Checkboxes</a> are styled forms of standard form checkboxes.</p>
<div class="evaluated code" data-type="javascript" data-label="true">
$('.checkbox')
.checkbox()
;
</div>
<div class="ui form"> <div class="ui form">
<div class="inline field"> <div class="inline field">
<div class="ui checkbox"> <div class="ui checkbox">
@ -115,9 +120,33 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<div class="form example">
<h4 class="ui header">Select</h4>
<p>A selection dropdown, a type of <a href="/modules/dropdown.html">ui dropdown</a> can be used to allow for a selection from multiple choices</p>
<div class="evaluated code" data-type="javascript" data-label="true">
$('.selection.dropdown')
.dropdown()
;
</div>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<div class="example"> <div class="example">
<h4 class="ui header">Radio Box</h4> <h4 class="ui header">Radio Box</h4>
<p>Radio boxes are styled forms of standard form radio controls.</p> <p>Radio boxes are styled forms of standard form radio controls.</p>
<div class="evaluated code" data-type="javascript" data-label="true">
$('.radio')
.checkbox()
;
</div>
<div class="ui form"> <div class="ui form">
<div class="grouped inline fields"> <div class="grouped inline fields">
<div class="field"> <div class="field">
@ -424,22 +453,8 @@ type : 'UI Collection'
</div> </div>
</div> </div>
</div> </div>
<div class="example">
<h4 class="ui header">Select</h4>
<p>Select fields are supported</p>
<div class="ui form">
<div class="select field">
<label class="select optional">Selection</label>
<select>
<option selected="selected" value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
</div>
</div>
</div>
<div class="example"> <div class="example">
<h4 class="ui header">Date</h4> <h4 class="ui header">Date</h4>
<p>A field can let users know they are for dates</p> <p>A field can let users know they are for dates</p>

37
node/src/documents/modules/accordion.html.eco

@ -53,6 +53,35 @@ type : 'UI Module'
</div> </div>
</div> </div>
<div class="example">
<h4 class="ui header">Basic</h4>
<p>A basic accordion does not add any extra formatting</p>
<div class="ui basic accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
</div>
<h2 class="ui dividing header">Examples</h2> <h2 class="ui dividing header">Examples</h2>
<div class="example"> <div class="example">
@ -170,9 +199,9 @@ type : 'UI Module'
<h2 class="ui dividing header">Variations </h2> <h2 class="ui dividing header">Variations </h2>
<div class="example"> <div class="example">
<h4 class="ui header">Basic</h4>
<p>A basic accordion does not add any extra formatting</p>
<div class="ui basic accordion">
<h4 class="ui header">Fluid</h4>
<p>An accordion can take up the width of its container</p>
<div class="ui accordion">
<div class="active title"> <div class="active title">
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
What is a dog? What is a dog?
@ -198,6 +227,8 @@ type : 'UI Module'
</div> </div>
</div> </div>
<h2 class="ui dividing header">Usage</h2> <h2 class="ui dividing header">Usage</h2>
<h3 class="ui header">Initializing an accordion</h3> <h3 class="ui header">Initializing an accordion</h3>

6
node/src/documents/modules/dropdown.html.eco

@ -470,9 +470,13 @@ type : 'UI Module'
</tr> </tr>
<tr> <tr>
<td>action</td> <td>action</td>
<td>hide</td>
<td>auto</td>
<td>Sets a default action to occur. <td>Sets a default action to occur.
<div class="ui vertical divided list"> <div class="ui vertical divided list">
<div class="item">
<div class="header">auto</div>
<div class="description">Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm</div>
</div>
<div class="item"> <div class="item">
<div class="header">nothing</div> <div class="header">nothing</div>
<div class="description">no action occurs</div> <div class="description">no action occurs</div>

Loading…
Cancel
Save