|
@ -7,8 +7,6 @@ description : 'A rating lets a user assess and view the desirability of content' |
|
|
type : 'UI Module' |
|
|
type : 'UI Module' |
|
|
--- |
|
|
--- |
|
|
|
|
|
|
|
|
<script src="/javascript/rating.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
<%- @partial('header') %> |
|
|
<%- @partial('header') %> |
|
|
|
|
|
|
|
|
<div class="main container"> |
|
|
<div class="main container"> |
|
@ -29,7 +27,7 @@ type : 'UI Module' |
|
|
<div class="ui warning message"> |
|
|
<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. |
|
|
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> |
|
|
<div class="code" data-type="javascript"> |
|
|
|
|
|
|
|
|
<div class="evaluated code" data-type="javascript"> |
|
|
$('.ui.rating') |
|
|
$('.ui.rating') |
|
|
.rating() |
|
|
.rating() |
|
|
; |
|
|
; |
|
@ -122,11 +120,33 @@ type : 'UI Module' |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
<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> |
|
|
<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) |
|
|
.rating('setting', 'clearable', true) |
|
|
; |
|
|
; |
|
|
</div> |
|
|
</div> |
|
@ -144,7 +164,8 @@ type : 'UI Module' |
|
|
<div class="example"> |
|
|
<div class="example"> |
|
|
<h4 class="ui header">Size</h4> |
|
|
<h4 class="ui header">Size</h4> |
|
|
<p>A rating can vary in size</p> |
|
|
<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> |
|
|
<i class="icon"></i> |
|
|
<i class="icon"></i> |
|
|
<i class="icon"></i> |
|
@ -153,7 +174,7 @@ type : 'UI Module' |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="another example"> |
|
|
<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> |
|
|
<i class="icon"></i> |
|
|
<i class="icon"></i> |
|
|
<i class="icon"></i> |
|
@ -170,6 +191,15 @@ type : 'UI Module' |
|
|
<i class="icon"></i> |
|
|
<i class="icon"></i> |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
<h2 class="ui dividing header">Behavior</h2> |
|
|
<div class="no example"> |
|
|
<div class="no example"> |
|
@ -192,6 +222,27 @@ type : 'UI Module' |
|
|
</div> |
|
|
</div> |
|
|
</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"> |
|
|
<div class="no example"> |
|
|
<h4 class="ui header">Clear Rating</h4> |
|
|
<h4 class="ui header">Clear Rating</h4> |
|
|
<p>A rating can be cleared</p> |
|
|
<p>A rating can be cleared</p> |
|
|