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>Height - UIkit tests</title>
|
8 | <script src="js/test.js"></script>
|
9 | <style type="text/css">
|
10 |
|
11 | [uk-height-match] > * > .uk-panel {
|
12 | padding: 10px;
|
13 | text-align: center;
|
14 | }
|
15 |
|
16 | [uk-height-match] > :nth-child(10n-9) > .uk-panel { background: rgba(0,0,0,0.1); }
|
17 | [uk-height-match] > :nth-child(10n-8) > .uk-panel { background: rgba(0,0,0,0.15); }
|
18 | [uk-height-match] > :nth-child(10n-7) > .uk-panel { background: rgba(0,0,0,0.2); }
|
19 | [uk-height-match] > :nth-child(10n-6) > .uk-panel { background: rgba(0,0,0,0.25); }
|
20 | [uk-height-match] > :nth-child(10n-5) > .uk-panel { background: rgba(0,0,0,0.3); }
|
21 | [uk-height-match] > :nth-child(10n-4) > .uk-panel { background: rgba(0,0,0,0.35); }
|
22 | [uk-height-match] > :nth-child(10n-3) > .uk-panel { background: rgba(0,0,0,0.40); }
|
23 | [uk-height-match] > :nth-child(10n-2) > .uk-panel { background: rgba(0,0,0,0.45); }
|
24 | [uk-height-match] > :nth-child(10n-1) > .uk-panel { background: rgba(0,0,0,0.50); }
|
25 | [uk-height-match] > :nth-child(10n) > .uk-panel { background: rgba(0,0,0,0.55); }
|
26 |
|
27 | </style>
|
28 | </head>
|
29 |
|
30 | <body>
|
31 |
|
32 | <div class="uk-container">
|
33 |
|
34 | <h2>Height Match</h2>
|
35 |
|
36 | <div class="uk-grid uk-child-width-1-2@s">
|
37 | <div>
|
38 |
|
39 | <h3>Each Row</h3>
|
40 |
|
41 | <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: > div > .uk-panel">
|
42 | <div><div class="uk-panel">1-2-M<br>...<br>...</div></div>
|
43 | <div><div class="uk-panel">1-2-M</div></div>
|
44 | <div><div class="uk-panel">1-2-M<br>...</div></div>
|
45 | <div><div class="uk-panel">1-2-M</div></div>
|
46 | </div>
|
47 |
|
48 | </div>
|
49 | <div>
|
50 |
|
51 | <h3>All Rows</h3>
|
52 |
|
53 | <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: > div > .uk-panel; row: false">
|
54 | <div><div class="uk-panel">1-2-M<br>...<br>...</div></div>
|
55 | <div><div class="uk-panel">1-2-M</div></div>
|
56 | <div><div class="uk-panel">1-2-M<br>...</div></div>
|
57 | <div><div class="uk-panel">1-2-M</div></div>
|
58 | </div>
|
59 |
|
60 | </div>
|
61 | <div>
|
62 |
|
63 | <h3>Hidden Panels</h3>
|
64 |
|
65 | <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: > div > .uk-panel; row: false">
|
66 | <div><div class="uk-panel" style="display: none;">1-2-M<br>...<br>...</div></div>
|
67 | <div><div class="uk-panel">1-2-M<br>...</div></div>
|
68 | </div>
|
69 |
|
70 | </div>
|
71 | </div>
|
72 |
|
73 | <h2>JavaScript Options</h2>
|
74 |
|
75 | <table class="uk-table uk-table-striped">
|
76 | <thead>
|
77 | <tr>
|
78 | <th>Option</th>
|
79 | <th>Value</th>
|
80 | <th>Default</th>
|
81 | <th>Description</th>
|
82 | </tr>
|
83 | </thead>
|
84 | <tbody>
|
85 | <tr>
|
86 | <td><code>target</code></td>
|
87 | <td>CSS selector</td>
|
88 | <td><code>> *</code></td>
|
89 | <td>Elements that should match. By default the children will match.</td>
|
90 | </tr>
|
91 | <tr>
|
92 | <td><code>row</code></td>
|
93 | <td>Boolean</td>
|
94 | <td><code>true</code></td>
|
95 | <td>By default only items in the same row will be matched. For example, once grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.</td>
|
96 | </tr>
|
97 | </tbody>
|
98 | </table>
|
99 |
|
100 | </div>
|
101 |
|
102 | </body>
|
103 | </html>
|