Browse Source

Updates docs for rating, dropdown

pull/176/merge
jlukic 11 years ago
parent
commit
8cb6cb16d4
3 changed files with 63 additions and 10 deletions
  1. 2
      node/src/documents/index.html.eco
  2. 4
      node/src/documents/modules/dropdown.html.eco
  3. 67
      node/src/documents/modules/rating.html.eco

2
node/src/documents/index.html.eco

@ -14,7 +14,7 @@ type : 'Semantic'
<div class="ui responsive grid">
<div class="column">
<div class="introduction">
<h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.2.5</a></h1>
<h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.3.2</a></h1>
<h2 class="ui header">UI is the vocabulary of the web.</h2>
<p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
<a class="ui black large labeled launch icon button"><i class="icon list layout"></i> View UI</a>

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

@ -198,6 +198,7 @@ type : 'UI Module'
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
Dogs
<div class="menu">
<div class="active item">Shiba Inu</div>
@ -206,6 +207,7 @@ type : 'UI Module'
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
Cats
<div class="menu">
<div class="item">Aegean</div>
@ -323,7 +325,7 @@ type : 'UI Module'
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>m
</div>
</div>
</div>
</div>

67
node/src/documents/modules/rating.html.eco

@ -7,8 +7,6 @@ description : 'A rating lets a user assess and view the desirability of content'
type : 'UI Module'
---
<script src="/javascript/rating.js"></script>
<%- @partial('header') %>
<div class="main container">
@ -29,7 +27,7 @@ type : 'UI Module'
<div class="ui warning message">
To use any variations besides the basic rating <a href="/elements/icon.html">ui icons</a> must be included to provide the additional icons required.
</div>
<div class="code" data-type="javascript">
<div class="evaluated code" data-type="javascript">
$('.ui.rating')
.rating()
;
@ -122,11 +120,33 @@ type : 'UI Module'
</div>
</div>
<div class="example">
<div class="toggle no example">
<h4 class="ui header">Read-Only Ratings</h4>
<p>You can disable or enable interactive rating</p>
<div class="code" data-type="javascript" data-demo="true">
$('.toggle.example .rating')
.rating('disable')
;
</div>
<div class="code" data-type="javascript" data-demo="true">
$('.toggle.example .rating')
.rating('enable')
;
</div>
<div class="ui heart demo rating" data-rating="3">
<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>
</div>
</div>
<div class="clearing no example">
<h4 class="ui header">Clearing Ratings</h4>
<p>When clearable is set to <code>true</code> you can clear the rating by clicking on the current start rating.</p>
<div class="code" data-type="javascript" data-demo="true">
$('.demo.rating')
<div class="evaluated code" data-type="javascript">
$('.clearing.example .rating')
.rating('setting', 'clearable', true)
;
</div>
@ -144,7 +164,8 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Size</h4>
<p>A rating can vary in size</p>
<div class="ui mini star rating">
<div class="another example">
<div class="ui small star rating">
<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>
@ -153,7 +174,7 @@ type : 'UI Module'
</div>
</div>
<div class="another example">
<div class="ui small star rating">
<div class="ui star rating">
<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>
@ -170,6 +191,15 @@ type : 'UI Module'
<i class="icon"></i>
</div>
</div>
<div class="another example">
<div class="ui huge star rating">
<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>
</div>
</div>
<h2 class="ui dividing header">Behavior</h2>
<div class="no example">
@ -192,6 +222,27 @@ type : 'UI Module'
</div>
</div>
<div class="no example">
<h4 class="ui header">Enable</h4>
<p>Enables interactive rating</p>
<div class="ignore code">
$('.ui.rating')
.rating('enable')
;
</div>
</div>
<div class="no example">
<h4 class="ui header">Disable</h4>
<p>Disables interactive rating</p>
<div class="ignore code">
$('.ui.rating')
.rating('disable')
;
</div>
</div>
<div class="no example">
<h4 class="ui header">Clear Rating</h4>
<p>A rating can be cleared</p>

Loading…
Cancel
Save