richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds docs for new changes to checkbox, table

pull/1139/merge
jlukic 10 years ago
parent
ff2d1da1af
commit
e0a8326118
6 changed files with 293 additions and 9 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 239
      server/documents/collections/table.html.eco
  2. 4
      server/documents/elements/flag.html.eco
  3. 6
      server/documents/elements/segment.html.eco
  4. 40
      server/documents/modules/checkbox.html.eco
  5. 6
      server/files/javascript/table.js
  6. 7
      server/files/stylesheets/semantic.css

239
server/documents/collections/table.html.eco
View File

@ -70,6 +70,48 @@ themes : ['Default', 'Classic']
</tfoot>
</table>
</div>
<div class="another example">
<div class="ui top attached header">Git Repository</div>
<table class="ui bottom attached celled striped table">
<tbody>
<tr>
<td class="collapsing disabled">
<i class="folder icon"></i> node_modules
</td>
<td>Initial commit</td>
<td class="right aligned collapsing">10 hours ago</td>
</tr>
<tr>
<td>
<i class="folder icon"></i> test
</td>
<td>Initial commit</td>
<td class="right aligned">10 hours ago</td>
</tr>
<tr>
<td>
<i class="folder icon"></i> build
</td>
<td>Initial commit</td>
<td class="right aligned">10 hours ago</td>
</tr>
<tr>
<td>
<i class="file outline icon"></i> package.json
</td>
<td>Initial commit</td>
<td class="right aligned">10 hours ago</td>
</tr>
<tr>
<td>
<i class="file outline icon"></i> Gruntfile.js
</td>
<td>Initial commit</td>
<td class="right aligned">10 hours ago</td>
</tr>
</tbody>
</table>
</div>
<div class="example">
<h4 class="ui header">Definition</h4>
@ -93,6 +135,70 @@ themes : ['Default', 'Classic']
</tr>
</table>
</div>
<div class="another example">
<table class="ui compact celled definition table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsing">
<div class="ui fitted slider checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted slider checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton@yahoo.com</td>
<td>Yes</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted slider checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22@yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr>
<th></th>
<th colspan="4">
<div class="ui right floated small primary labeled icon button">
<i class="user icon"></i> Add User
</div>
<div class="ui small button">
Approve
</div>
<div class="ui small disabled button">
Approve All
</div>
</th>
</tr>
</tfoot>
</table>
</div>
<h2 class="ui dividing header">States</h2>
@ -280,6 +386,37 @@ themes : ['Default', 'Classic']
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Text Alignment</h4>
<p>A table header, row, or cell can adjust its text alignment</p>
<table class="ui striped table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th class="right aligned">Notes</th>
</tr>
</thead>
<tbody>
<tr class="center aligned">
<td>John</td>
<td>Approved</td>
<td class="right aligned">None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td class="right aligned">Requires call</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td class="right aligned">None</td>
</tr>
</tbody>
</table>
</div>
<div class="example">
<h4 class="ui header">Striped</h4>
<p>A table can stripe alternate rows of content with a darker color to increase contrast</p>
@ -411,6 +548,42 @@ themes : ['Default', 'Classic']
</table>
</div>
<div class="example">
<h4 class="ui header">Collapsing Cell</h4>
<p>A cell can be collapsing so that it only uses as much space as required</p>
<div class="ui ignored warning icon message">
<i class="warning icon"></i>
<div class="content">
To ensure icons don't wrap to a seperate line you must either specify collapsing on the widest row in the collapsing column, or on all rows
</div>
</div>
<table class="ui table">
<tbody>
<tr>
<td class="collapsing disabled">
<i class="folder icon"></i> node_modules
</td>
<td>Initial commit</td>
<td>10 hours ago</td>
</tr>
<tr>
<td>
<i class="folder icon"></i> test
</td>
<td>Initial commit</td>
<td>10 hours ago</td>
</tr>
<tr>
<td>
<i class="folder icon"></i> build
</td>
<td>Initial commit</td>
<td>10 hours ago</td>
</tr>
</tbody>
</table>
</div>
<div class="example">
<h4 class="ui header">Even Width</h4>
@ -667,6 +840,72 @@ themes : ['Default', 'Classic']
</tfoot>
</table>
</div>
<div class="example">
<h4 class="ui header">Full-Width Header / Footer </h4>
<p>A definition table can have a full width header or footer, filling in the gap left by the first column</p>
<table class="ui compact celled definition table">
<thead class="full-width">
<tr>
<th></th>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsing">
<div class="ui fitted slider checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted slider checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton@yahoo.com</td>
<td>Yes</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted slider checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22@yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr>
<th></th>
<th colspan="4">
<div class="ui right floated small primary labeled icon button">
<i class="user icon"></i> Add User
</div>
<div class="ui small button">
Approve
</div>
<div class="ui small disabled button">
Approve All
</div>
</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<h4 class="ui header">Padded</h4>
<p>A table may sometimes need to be more padded for legibility</p>

4
server/documents/elements/flag.html.eco
View File

@ -33,9 +33,9 @@ type : 'UI Element'
<div class="ui info message">
<p>Many flag sets use SVG to render flags at multiple sizes. However svg flags usually appear blurry or render improperly at smaller sizes. Semantic's default theme uses an image sprite solution which provides crisper icons, but without the ability to resize</p>
</div>
<table class="ui sortable table">
<table class="ui sortable definition table">
<thead>
<th>Flag</th>
<th class="one wide">Flag</th>
<th>Name</th>
<th>ISO 3166-2 Code <a href="http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2">?</a></th>
<th>Additional Aliases</th>

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

@ -274,6 +274,12 @@ themes : ['default', 'GitHub']
<div class="ui right floated segment">
<p>This segment will appear to the right
</div>
<div class="ui right floated segment">
<p>This segment will appear to the right
</div>
<div class="ui left floated segment">
This segment will appear to the left
</div>
<div class="ui left floated segment">
This segment will appear to the left
</div>

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

@ -27,7 +27,7 @@ themes : ['Default']
<p>A standard checkbox</p>
<div class="ui checkbox">
<input type="checkbox" name="fun" />
<label>I enjoy having fun</label>
<label>Make my profile visible</label>
</div>
</div>
@ -36,7 +36,7 @@ themes : ['Default']
<p>A checkbox can be formatted to emphasize the current selection state</p>
<div class="ui slider checkbox">
<input type="checkbox" name="newsletter" />
<label>Receive weekly poodle newsletter</label>
<label>Accept terms and conditions</label>
</div>
</div>
@ -45,7 +45,7 @@ themes : ['Default']
<p>A checkbox can be formatted to show an on or off choice</p>
<div class="ui toggle checkbox">
<input type="checkbox" name="public" />
<label>Make my dog's profile public</label>
<label>Subscribe to weekly newsletter</label>
</div>
</div>
@ -59,25 +59,25 @@ themes : ['Default']
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit" checked="checked" />
<label>Apples</label>
<label>Once a week</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit" />
<label>Oranges</label>
<label>2-3 times a week</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit" />
<label>Pears</label>
<label>Once a day</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit" />
<label>Grapefruit</label>
<label>Twice a day</label>
</div>
</div>
</div>
@ -113,6 +113,32 @@ themes : ['Default']
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
<div class="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 fitted checkbox">
<input type="checkbox"/>
<label></label>
</div>
</div>
<div class="ui left floated segment">
<div class="ui fitted slider checkbox">
<input type="checkbox"/>
<label></label>
</div>
</div>
<div class="ui left floated segment">
<div class="ui fitted toggle checkbox">
<input type="checkbox"/>
<label></label>
</div>
</div>
</div>
</div>
<div class="ui tab" data-tab="examples">

6
server/files/javascript/table.js
View File

@ -9,6 +9,12 @@ semantic.table.ready = function() {
handler
;
$('.ui.checkbox').checkbox({
onChecked: function() {
$(this).closest('.table').find('.button').removeClass('disabled');
}
});
};

7
server/files/stylesheets/semantic.css
View File

@ -621,6 +621,13 @@ body#example.hide {
clear: both;
padding: 1px;
}
#example .main.container:after {
content: '';
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
#example .main.container .examples > h2,
#example .main.container > h2,
#example .main.container > .tab > h2{

Write Preview
Loading…
Cancel
Save