uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
491 lines (418 loc) • 18.5 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>List - UIkit tests</title>
<script src="js/test.js"></script>
<style>
@supports not selector(::marker) {
.uk-list > li[value]::before {
content: attr(value) "\200A.\00A0";
}
}
</style>
</head>
<body>
<div class="uk-container">
<h1>List</h1>
<h2>Marker</h2>
<div class="uk-margin">
<select id="js-color-switcher" class="uk-select uk-form-width-small">
<option value="">Default</option>
<option value="uk-list-muted">Muted</option>
<option value="uk-list-emphasis">Emphasis</option>
<option value="uk-list-primary">Primary</option>
<option value="uk-list-secondary">Secondary</option>
</select>
</div>
<div class="uk-child-width-1-6" uk-grid>
<div>
<h3>Disc</h3>
<ul class="uk-list uk-list-disc">
<li>List <a>item</a> 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>
List item 5
<ul class="uk-list uk-list-disc">
<li>List item 1</li>
<li>List item 2
<ul class="uk-list uk-list-disc">
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
</div>
<div>
<h3>Circle</h3>
<ul class="uk-list uk-list-circle">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul class="uk-list uk-list-circle">
<li>List item 1</li>
<li>List item 2
<ul class="uk-list uk-list-circle">
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
</div>
<div>
<h3>Square</h3>
<ul class="uk-list uk-list-square">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul class="uk-list uk-list-square">
<li>List item 1</li>
<li>List item 2
<ul class="uk-list uk-list-square">
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
</div>
<div>
<h3>Decimal</h3>
<ul class="uk-list uk-list-decimal">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul class="uk-list uk-list-decimal">
<li>List item 1</li>
<li>List item 2
<ul class="uk-list uk-list-decimal">
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
<li value="10">List item 7</li>
</ul>
</div>
<div>
<h3>Hyphen</h3>
<ul class="uk-list uk-list-hyphen">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul class="uk-list uk-list-hyphen">
<li>List item 1</li>
<li>List item 2
<ul class="uk-list uk-list-hyphen">
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
</div>
<div>
<h3>Image Bullet</h3>
<ul class="uk-list uk-list-bullet">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul class="uk-list uk-list-bullet">
<li>List item 1</li>
<li>List item 2
<ul class="uk-list uk-list-bullet">
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
</div>
</div>
<h2>Style</h2>
<div class="uk-child-width-1-4" uk-grid>
<div>
<h3>Divider</h3>
<ul class="uk-list uk-list-divider">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
<div>
<h3>Striped</h3>
<ul class="uk-list uk-list-striped">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
<div>
<h3>Divider</h3>
<ul class="uk-list uk-list-divider uk-list-decimal">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
</div>
<h2>Large</h2>
<div class="uk-child-width-1-4" uk-grid>
<div>
<h3>Default</h3>
<ul class="uk-list uk-list-large">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
<div>
<h3>Disc</h3>
<ul class="uk-list uk-list-large uk-list-disc">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>
List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
<div>
<h3>Divider</h3>
<ul class="uk-list uk-list-large uk-list-divider">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
<div>
<h3>Striped</h3>
<ul class="uk-list uk-list-large uk-list-striped">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
</div>
<h2>Collapse</h2>
<div class="uk-child-width-1-4" uk-grid>
<div>
<h3>Default</h3>
<ul class="uk-list uk-list-collapse">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
<div>
<h3>Disc</h3>
<ul class="uk-list uk-list-collapse uk-list-disc">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>
List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
<div>
<h3>Divider</h3>
<ul class="uk-list uk-list-collapse uk-list-divider">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
<div>
<h3>Striped</h3>
<ul class="uk-list uk-list-collapse uk-list-striped">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4 with some more text wrapping into the next line</li>
<li>List item 5
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
</ul>
</li>
<li>List item 6</li>
</ul>
</div>
</div>
</div>
<script>
var options = UIkit.util.$$('#js-color-switcher option').map(function (option) { return option.value; });
UIkit.util.on('#js-color-switcher', 'change', function () {
var value = this.value;
UIkit.util.$$('.uk-list').forEach(function (table) {
UIkit.util.removeClass(table, options);
UIkit.util.addClass(table, value);
});
});
</script>
</body>
</html>