lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Updates to docs.. sort of

intro
jlukic 9 years ago
parent
898df1e1b4
commit
3d6c41efe0
7 changed files with 274 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      server/documents/elements/segment.html.eco
  2. 83
      server/documents/hotfix.html.eco
  3. 188
      server/documents/modules/checkbox.html.eco
  4. 7
      server/files/javascript/checkbox.js
  5. 4
      server/files/javascript/docs.js
  6. 18
      server/files/stylesheets/docs.css
  7. 4
      server/partials/header.html.eco

10
server/documents/elements/segment.html.eco
View File

@ -323,6 +323,16 @@ themes : ['default', 'GitHub']
<p>Pellentesque habitant morbi</p>
</div>
</div>
<div class="another example">
<div class="ui compact segments">
<div class="ui segment">
<p>Pellentesque habitant morbi</p>
</div>
<div class="ui segment">
<p>Pellentesque habitant morbi</p>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Colored</h4>

83
server/documents/hotfix.html.eco
View File

@ -12,23 +12,80 @@ type : 'Library'
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.ui.dropdown').dropdown({
onChange: function (a, b, c) {
console.log("changed to " + a);
}
});
$('.toggle.checkbox').checkbox()
});
</script>
<div class="ui container">
<div class="ui form">
<select class="ui dropdown">
<option value="">Any</option>
<option value="1">One</option>
<option value="0">Zero</option>
<option value="pickle">Pickle</option>
</select>
</div>
<div class="ui vertical fluid accordion menu ">
<div class="item">
<a class="active title">
<i class="dropdown icon"></i>
Electronics
</a>
<div class="active content">
<div class="accordion menu">
<div class="active title">
<i class="dropdown icon"></i>
Mobile Phones
</div>
<div class="active content">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui checkbox ">
<input type="checkbox" name="a" value="small" checked>
<label>All Mobiles</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="b" value="a">
<label>Apple</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class=" title">
<i class="dropdown icon"></i>
Tablets
</div>
<div class="content">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui checkbox ">
<input type="checkbox" name="a" value="small" checked>
<label>All Mobiles</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="b" value="a">
<label>Apple</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

188
server/documents/modules/checkbox.html.eco
View File

@ -27,16 +27,24 @@ themes : ['Default', 'Colored']
<h4 class="ui header">Checkbox</h4>
<p>A standard checkbox</p>
<div class="ui checkbox">
<input type="checkbox" name="fun" />
<input type="checkbox" name="example" />
<label>Make my profile visible</label>
</div>
</div>
<div class="example">
<h4 class="ui header">Radio Box</h4>
<h4 class="ui header">Radio</h4>
<p>A checkbox can be formatted as a radio element. This means it is an exclusive option.</p>
<div class="ui radio checkbox">
<input type="radio" name="radio" checked="checked" />
<label>Radio choice</label>
</div>
</div>
<div class="another example">
<div class="ui form">
<div class="inline fields">
<label>How often do you use checkboxes?</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked" />
@ -66,34 +74,29 @@ themes : ['Default', 'Colored']
</div>
<div class="another example">
<div class="ui form">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="fun" />
<label>Make my profile visible</label>
</div>
</div>
<div class="grouped fields">
<label>How often do you use checkboxes?</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked" />
<input type="radio" name="example2" checked="checked" />
<label>Once a week</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" />
<input type="radio" name="example2" />
<label>2-3 times a week</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" />
<input type="radio" name="example2" />
<label>Once a day</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" />
<input type="radio" name="example2" />
<label>Twice a day</label>
</div>
</div>
@ -113,8 +116,8 @@ themes : ['Default', 'Colored']
<div class="another example">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<label>Outbound Throughput</label>
<div class="field">
<div class="ui slider checkbox">
<input type="radio" name="throughput" checked="checked">
<label>20 mbps max</label>
@ -162,6 +165,27 @@ themes : ['Default', 'Colored']
</div>
</div>
<div class="example">
<h4 class="ui header">Checked</h4>
<p>A checkbox can be checked</p>
<div class="ui checked checkbox">
<input type="checkbox" checked />
<label>Active</label>
</div>
</div>
<div class="indeterminate example">
<h4 class="ui header">Indeterminate</h4>
<p>A checkbox can be indeterminate</p>
<div class="ui ignored info message">
An indeterminate state can only be set in javascript, see examples section
</div>
<div class="ui checkbox">
<input type="checkbox" />
<label>Indeterminate</label>
</div>
</div>
<div class="example">
<h4 class="ui header">Disabled</h4>
<p>A checkbox can be read-only and unable to change states</p>
@ -182,22 +206,22 @@ themes : ['Default', 'Colored']
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<div class="fitted example">
<h4 class="ui header">Fitted</h4>
<p>A fitted checkbox does not leave padding for a label</p>
<div class="ui left floated segment">
<div class="ui left floated compact segment">
<div class="ui fitted checkbox">
<input type="checkbox"/>
<label></label>
</div>
</div>
<div class="ui left floated segment">
<div class="ui left floated compact segment">
<div class="ui fitted slider checkbox">
<input type="checkbox"/>
<label></label>
</div>
</div>
<div class="ui left floated segment">
<div class="ui left floated compact segment">
<div class="ui fitted toggle checkbox">
<input type="checkbox"/>
<label></label>
@ -211,6 +235,126 @@ themes : ['Default', 'Colored']
<div class="ui tab" data-tab="examples">
<h2>Examples</h2>
<div class="grouped example">
<h4 class="ui header">Grouped Checkboxes</h4>
<p>The <code>indeterminate</code> state can be used to represent a value that is neither checked or unchecked.</p>
<div class="ui celled relaxed list">
<div class="item">
<div class="ui master checkbox">
<input type="checkbox" name="fruits" />
<label>Fruits</label>
</div>
<div class="list">
<div class="item">
<div class="ui child checkbox">
<input type="checkbox" name="apple" />
<label>Apple</label>
</div>
</div>
<div class="item">
<div class="ui child checkbox">
<input type="checkbox" name="orange" />
<label>Orange</label>
</div>
</div>
<div class="item">
<div class="ui child checkbox">
<input type="checkbox" name="pear" />
<label>Pear</label>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui master checkbox">
<input type="checkbox" name="vegetables" />
<label>Vegetables</label>
</div>
<div class="list">
<div class="item">
<div class="ui child checkbox">
<input type="checkbox" name="lettuce" />
<label>Lettuce</label>
</div>
</div>
<div class="item">
<div class="ui child checkbox">
<input type="checkbox" name="carrot" />
<label>Carrot</label>
</div>
</div>
<div class="item">
<div class="ui child checkbox">
<input type="checkbox" name="spinach" />
<label>Spinach</label>
</div>
</div>
</div>
</div>
</div>
<div class="evaluated code">
// master checkbox
$('.list .master.checkbox')
.checkbox({
onChange : function () {
var
$parentCheckbox = $(this),
$childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox')
;
// change state of child checkbox
if( $parentCheckbox.checkbox('is indeterminate') ) {
return;
}
else if( $parentCheckbox.checkbox('is checked') ) {
$childCheckbox.checkbox('check');
}
else {
$childCheckbox.checkbox('uncheck')
}
}
})
;
</div>
<div class="evaluated code">
// child list checkbox
$('.list .child.checkbox')
.checkbox({
fireOnInit : true,
onChange : function() {
var
$parentCheckbox = $(this).closest('.list').closest('.item').children('.checkbox'),
$checkbox = $(this).closest('.list').not('.ui').find('.checkbox'),
allChecked = true,
allUnchecked = true
;
// check to see if all other siblings are checked or unchecked
$checkbox.each(function() {
if( $(this).checkbox('is checked') ) {
allUnchecked = false;
}
else {
allChecked = false;
}
});
// set parent checkbox to match
if(allChecked) {
console.log('checking parent');
$parentCheckbox.checkbox('set input checked');
}
else if(allUnchecked) {
console.log('unchecking parent');
$parentCheckbox.checkbox('set input unchecked');
}
else {
console.log('indeterminate parent');
$parentCheckbox.checkbox('set input indeterminate');
}
}
})
;
</div>
</div>
<div class="example">
<h4 class="ui header">Uncheckable Checkboxes</h4>
<p class="ignored">To make a user able to check a box, but unable to uncheck it, use the <code>uncheckable</code> setting.</p>
@ -426,6 +570,16 @@ themes : ['Default', 'Colored']
<td>HTML input element</td>
<td>Callback after a checkbox is checked.</td>
</tr>
<tr>
<td>onUndeterminate</td>
<td>HTML input element</td>
<td>Callback after a checkbox is set to undeterminate.</td>
</tr>
<tr>
<td>onDeterminate</td>
<td>HTML input element</td>
<td>Callback after a checkbox is set to determinate.</td>
</tr>
<tr>
<td>onUnchecked</td>
<td>HTML input element</td>

7
server/files/javascript/checkbox.js
View File

@ -5,6 +5,7 @@ semantic.dropdown.ready = function() {
// selector cache
var
$indeterminate = $('.indeterminate.example').find('.ui.checkbox'),
$checkbox = $('.example').not('.static').find('.ui.checkbox'),
// alias
handler
@ -19,6 +20,12 @@ semantic.dropdown.ready = function() {
.checkbox()
;
$indeterminate
.checkbox('indeterminate')
;
};

4
server/files/javascript/docs.js
View File

@ -71,7 +71,7 @@ semantic.ready = function() {
$example = $('.example'),
$popupExample = $example.not('.no'),
$shownExample = $example.filter('.shown'),
$prerenderedExample = $example.has('.ui.dropdown, .ui.search, .ui.rating, .ui.dimmer, .ui.embed'),
$prerenderedExample = $example.has('.ui.checkbox, .ui.dropdown, .ui.search, .ui.rating, .ui.dimmer, .ui.embed'),
$visibilityExample = $example.filter('.visiblity').find('.overlay, .demo.segment, .items img'),
@ -538,7 +538,6 @@ semantic.ready = function() {
$themeDropdown
.api({
on : 'now',
cache : 'local',
debug : true,
action : 'getVariables',
dataType : 'text',
@ -548,7 +547,6 @@ semantic.ready = function() {
$themeDropdown
.api({
on : 'now',
cache : 'local',
action : 'getOverrides',
dataType : 'text',
urlData : urlData,

18
server/files/stylesheets/docs.css
View File

@ -976,6 +976,14 @@ blockquote .author {
}
/*--------------
Fitted
---------------*/
#example .fitted.example .segment {
line-height: 1;
}
/*--------------
Grid
---------------*/
@ -1683,15 +1691,15 @@ code.code .class.value b {
border-radius: 5px;
line-height: 1;
vertical-align: baseline;
display: inline-block;
display: inline-block;/*
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
transition: all 0.3s ease;*/
}
code.code:hover .class.value {
code.code .class.value {
/*color: #668C79;*/
}
code.code:hover .class.string b,
code.code:hover .class.value b {
code.code .class.string b,
code.code .class.value b {
background-color: rgba(98, 190, 169, 0.25);
color: #008078;
margin: 0px -2px;

4
server/partials/header.html.eco
View File

@ -9,7 +9,7 @@
<%=@document.title %>
<% if @document.status?: %><span class="ui red label"><%= @document.status %></span><% end %>
<div class="sub header">
<% if 'developments' in @getEnvironments(): %>
<% if 'development' in @getEnvironments(): %>
<% else: %>
<iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
<% end %>
@ -148,7 +148,7 @@
<% end %>
</div>
<div class="advertisement">
<% unless 'developments' in @getEnvironments(): %>
<% unless 'development' in @getEnvironments(): %>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
<% end %>
</div>

Write Preview
Loading…
Cancel
Save