mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
329 lines
17 KiB
329 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="en-gb" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Table - UIkit tests</title>
|
|
<script src="js/test.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="uk-container">
|
|
|
|
<h1>Table</h1>
|
|
|
|
<div class="uk-margin">
|
|
<select id="js-size-switcher" class="uk-select uk-form-width-small">
|
|
<option value="">Default</option>
|
|
<option value="uk-table-small">Small</option>
|
|
<option value="uk-table-large">Large</option>
|
|
</select>
|
|
<button class="uk-button uk-button-default" type="button" uk-toggle="target: .uk-table; cls: uk-table-justify">Justify</button>
|
|
</div>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-hover">
|
|
<caption>Table caption</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td>Table Footer</td>
|
|
<td>Table Footer</td>
|
|
<td>Table Footer</td>
|
|
<td>Table Footer</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
|
|
<td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
|
|
<td>Table Data <img src="images/photo.jpg" width="40" alt=""></td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr class="uk-active">
|
|
<td>Active Row</td>
|
|
<td>Active Row</td>
|
|
<td>Active Row</td>
|
|
<td>Active Row</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Table Sub Heading</th>
|
|
<th>Table Sub Heading</th>
|
|
<th>Table Sub Heading</th>
|
|
<th>Table Sub Heading</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>Table Divider</h2>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-divider uk-table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
|
|
<td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
|
|
<td>Table Data <img src="images/photo.jpg" width="40" alt=""></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr class="uk-active">
|
|
<td>Active Row</td>
|
|
<td>Active Row</td>
|
|
<td>Active Row</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Table Sub Heading</th>
|
|
<th>Table Sub Heading</th>
|
|
<th>Table Sub Heading</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>Table Striped</h2>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-striped uk-table-hover ">
|
|
<thead>
|
|
<tr>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
|
|
<td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
|
|
<td>Table Data <img src="images/photo.jpg" width="40" alt=""></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr class="uk-active">
|
|
<td>Active Row</td>
|
|
<td>Active Row</td>
|
|
<td>Active Row</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Table Sub Heading</th>
|
|
<th>Table Sub Heading</th>
|
|
<th>Table Sub Heading</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>Widths</h2>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-divider uk-table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th class="uk-table-shrink"></th>
|
|
<th class="uk-table-shrink"></th>
|
|
<th class="uk-table-expand">Expand</th>
|
|
<th class="uk-width-small">Truncate</th>
|
|
<th class="uk-width-medium">Width Medium</th>
|
|
<th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><input class="uk-checkbox" type="checkbox"></td>
|
|
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
|
|
<td class="uk-table-link">
|
|
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
</td>
|
|
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
|
|
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
|
|
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input class="uk-checkbox" type="checkbox"></td>
|
|
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
|
|
<td class="uk-table-link">
|
|
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
</td>
|
|
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
|
|
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
|
|
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input class="uk-checkbox" type="checkbox"></td>
|
|
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
|
|
<td class="uk-table-link">
|
|
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
</td>
|
|
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
|
|
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
|
|
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input class="uk-checkbox" type="checkbox"></td>
|
|
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
|
|
<td class="uk-table-link">
|
|
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
</td>
|
|
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
|
|
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
|
|
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>Responsive</h2>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-divider uk-table-hover uk-table-responsive">
|
|
<thead>
|
|
<tr>
|
|
<th class="uk-table-shrink"></th>
|
|
<th class="uk-table-shrink"></th>
|
|
<th class="uk-table-expand">Expand</th>
|
|
<th class="uk-width-small">Truncate</th>
|
|
<th class="uk-width-medium">Width Medium</th>
|
|
<th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><input class="uk-checkbox" type="checkbox"></td>
|
|
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
|
|
<td class="uk-table-link">
|
|
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
</td>
|
|
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
|
|
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
|
|
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input class="uk-checkbox" type="checkbox"></td>
|
|
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
|
|
<td class="uk-table-link">
|
|
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
</td>
|
|
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
|
|
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
|
|
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input class="uk-checkbox" type="checkbox"></td>
|
|
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
|
|
<td class="uk-table-link">
|
|
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
</td>
|
|
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
|
|
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
|
|
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input class="uk-checkbox" type="checkbox"></td>
|
|
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
|
|
<td class="uk-table-link">
|
|
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
</td>
|
|
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
|
|
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
|
|
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
|
|
|
|
UIkit.util.on('#js-size-switcher', 'change', function () {
|
|
var value = this.value;
|
|
UIkit.util.$$('.uk-table').forEach(function (table) {
|
|
UIkit.util.removeClass(table, options);
|
|
UIkit.util.addClass(table, value);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|