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

Adds tab/table docs changes

1.x
jlukic 10 years ago
parent
bc3337f4b9
commit
4742dea97d
3 changed files with 101 additions and 1 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. 63
      server/documents/collections/table.html.eco
  2. 27
      server/documents/modules/tab.html.eco
  3. 12
      server/layouts/blank.html.eco

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

@ -27,7 +27,7 @@ themes : ['Default', 'Basic', 'Classic']
<i class="mobile icon"></i>
<div class="content">
<h3 class="header">Responsive Element</h3>
<p>Tables will automatically stack their layouts for mobile devices.</p>
<p>Tables will automatically stack their layouts for mobile devices. To disable this behavior, use the <code>unstackable</code> variation or <code>tablet stackable</code> to allow responsive adjustments for tablet as well.</p>
</div>
</div>
<table class="ui table">
@ -380,6 +380,67 @@ themes : ['Default', 'Basic', 'Classic']
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Responsive</h4>
<p>A table can specify additional requirements for screen adjustments</p>
<table class="ui unstackable 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>
<table class="ui tablet stackable 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">Text Alignment</h4>
<p>A table header, row, or cell can adjust its text alignment</p>

27
server/documents/modules/tab.html.eco
View File

@ -210,6 +210,33 @@ themes : ['Default']
<h2 class="ui dividing header">Examples</h2>
<div class="first example">
<h4 class="ui header">Basic Tabs</h4>
<p>Tabs are connecting using paths specified in the <code>data-tab</code> attribute. Tab is then initialized in javascript on the activating elements.</p>
<div class="ui ignored info message">
To have a tab visible on page load, add the class <code>active</code> to both the initializing menu and the tab.
</div>
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Third
</div>
<div class="code" data-type="javascript">
$('.menu .item')
.tab()
;
</div>
</div>
<div class="context example">
<h4 class="ui header">Multiple Tabs on Same Page</h4>
<p>There are a several of ways to include independent tab groups on the same page, even with history. One of the easiest ways is provide a specific parent context for each tab group.</p>

12
server/layouts/blank.html.eco
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<%- @partial('meta') %>
<%- @partial('library-javascript') %>
<%- @partial('ui-javascript') %>
<%- @partial('ui-css') %>
</head>
<body class="<%= @document.css %>" ontouchstart="">
<%- @content %>
</body>
</html>
Write Preview
Loading…
Cancel
Save