UNPKG

2.41 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en-gb" dir="ltr">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Leader - UIkit tests</title>
8 <script src="js/test.js"></script>
9 </head>
10
11 <body>
12
13 <div class="uk-container">
14
15 <h1>Leader</h1>
16
17 <div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
18 <div class="uk-width-expand" uk-leader>Lorem ipsum dolor</div>
19 <div class="uk-width-auto">Price</div>
20 </div>
21
22 <div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
23 <div class="uk-width-expand" uk-leader fill="-">Lorem ipsum dolor sit amet</div>
24 <div class="uk-width-auto">Price</div>
25 </div>
26
27 <div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
28 <div class="uk-width-expand" uk-leader>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div>
29 <div class="uk-width-auto">Price</div>
30 </div>
31
32 <div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
33 <div class="uk-width-expand" uk-leader="media: @l">The leader dots are hidden before @l</div>
34 <div class="uk-width-auto">Price</div>
35 </div>
36
37 <h2>JavaScript Options</h2>
38
39 <table class="uk-table uk-table-striped">
40 <thead>
41 <tr>
42 <th>Option</th>
43 <th>Value</th>
44 <th>Default</th>
45 <th>Description</th>
46 </tr>
47 </thead>
48 <tbody>
49 <tr>
50 <td><code>fill</code></td>
51 <td>String</td>
52 <td>undefined</td>
53 <td>Optional fill character.</td>
54 </tr>
55 <tr>
56 <td><code>media</code></td>
57 <td>String</td>
58 <td>false</td>
59 <td>Condition for the space filling - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
60 </tr>
61 </tbody>
62 </table>
63
64 </div>
65
66 </body>
67</html>