uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
68 lines (55 loc) • 2.47 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leader - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Leader</h1>
<div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
<div class="uk-width-expand" uk-leader>Lorem ipsum dolor</div>
<div class="uk-width-auto">Price</div>
</div>
<div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
<div class="uk-width-expand" uk-leader fill="-">Lorem ipsum dolor sit amet</div>
<div class="uk-width-auto">Price</div>
</div>
<div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
<div class="uk-width-expand" uk-leader>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div>
<div class="uk-width-auto">Price</div>
</div>
<div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
<div class="uk-width-expand" uk-leader="media: @l">The leader dots are hidden before @l</div>
<div class="uk-width-auto">Price</div>
</div>
<h2>JavaScript Options</h2>
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>fill</code></td>
<td>String</td>
<td></td>
<td>Optional fill character.</td>
</tr>
<tr>
<td><code>media</code></td>
<td>Boolean, Number, String</td>
<td>false</td>
<td>Condition for the space filling - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>