UNPKG

12.4 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>Button - UIkit tests</title>
8 <script src="js/test.js"></script>
9 <style type="text/css">
10
11 body { padding-bottom: 500px; }
12
13 </style>
14 </head>
15
16 <body>
17
18 <div class="uk-container">
19
20 <h1>Button</h1>
21
22 <div class="uk-child-width-1-4@m" uk-grid>
23 <div class="uk-width-1-2@m">
24
25 <h2>Styles</h2>
26
27 <p uk-margin>
28 <a class="uk-button uk-button-default" href="#">Link</a>
29 <button class="uk-button uk-button-default">Button</button>
30 <button class="uk-button uk-button-default" disabled>Disabled</button>
31 </p>
32
33 <p uk-margin>
34 <a class="uk-button uk-button-primary" href="#">Link</a>
35 <button class="uk-button uk-button-primary">Button</button>
36 <button class="uk-button uk-button-primary" disabled>Disabled</button>
37 </p>
38
39 <p uk-margin>
40 <a class="uk-button uk-button-secondary" href="#">Link</a>
41 <button class="uk-button uk-button-secondary">Button</button>
42 <button class="uk-button uk-button-secondary" disabled>Disabled</button>
43 </p>
44
45 <p uk-margin>
46 <a class="uk-button uk-button-danger" href="#">Link</a>
47 <button class="uk-button uk-button-danger">Button</button>
48 <button class="uk-button uk-button-danger" disabled>Disabled</button>
49 </p>
50
51 </div>
52 <div>
53
54 <h2>Text</h2>
55
56 <p uk-margin>
57 <a class="uk-button uk-button-text" href="#">Link</a>
58 <button class="uk-button uk-button-text">Button</button>
59 <button class="uk-button uk-button-text" disabled>Disabled</button>
60 </p>
61
62 </div>
63 <div>
64
65 <h2>Link</h2>
66
67 <p uk-margin>
68 <button class="uk-button uk-button-default">Button</button>
69 <button class="uk-button uk-button-link">Button</button>
70 </p>
71
72 <p uk-margin>
73 <button class="uk-button uk-button-default" disabled>Button</button>
74 <button class="uk-button uk-button-link" disabled>Button</button>
75 </p>
76
77 <p uk-margin>
78 <a href="#">Link</a>
79 <button class="uk-button uk-button-link uk-text-baseline">Button</button>
80 </p>
81
82 </div>
83 </div>
84
85 <h2>Size</h2>
86
87 <p uk-margin>
88 <a class="uk-button uk-button-default uk-button-small" href="#">Link</a>
89 <button class="uk-button uk-button-primary uk-button-small">Button</button>
90 <button class="uk-button uk-button-secondary uk-button-small">Button</button>
91 <button class="uk-button uk-button-danger uk-button-small">Button</button>
92 <button class="uk-button uk-button-default uk-button-small" disabled>Disabled</button>
93 <button class="uk-button uk-button-text uk-button-small">Button</button>
94 </p>
95
96 <p uk-margin>
97 <a class="uk-button uk-button-default uk-button-large" href="#">Link</a>
98 <button class="uk-button uk-button-primary uk-button-large">Button</button>
99 <button class="uk-button uk-button-secondary uk-button-large">Button</button>
100 <button class="uk-button uk-button-danger uk-button-large">Button</button>
101 <button class="uk-button uk-button-default uk-button-large" disabled>Disabled</button>
102 <button class="uk-button uk-button-text uk-button-large">Button</button>
103 </p>
104
105 <h2>Group</h2>
106
107 <div class="uk-margin" uk-margin>
108 <div class="uk-button-group">
109 <a class="uk-button uk-button-default uk-button-small" href="#">Link</a>
110 <button class="uk-button uk-button-default uk-button-small">Button</button>
111 <button class="uk-button uk-button-default uk-button-small">Button</button>
112 </div>
113
114 <div class="uk-button-group">
115 <a class="uk-button uk-button-primary uk-button-small" href="#">Link</a>
116 <button class="uk-button uk-button-primary uk-button-small">Button</button>
117 <button class="uk-button uk-button-primary uk-button-small">Button</button>
118 </div>
119
120 <div class="uk-button-group">
121 <a class="uk-button uk-button-secondary uk-button-small" href="#">Link</a>
122 <button class="uk-button uk-button-secondary uk-button-small">Button</button>
123 <button class="uk-button uk-button-secondary uk-button-small">Button</button>
124 </div>
125
126 <div class="uk-button-group">
127 <a class="uk-button uk-button-danger uk-button-small" href="#">Link</a>
128 <button class="uk-button uk-button-danger uk-button-small">Button</button>
129 <button class="uk-button uk-button-danger uk-button-small">Button</button>
130 </div>
131
132 <div class="uk-button-group">
133 <button class="uk-button uk-button-default uk-button-small" disabled>Button</button>
134 <button class="uk-button uk-button-default uk-button-small" disabled>Button</button>
135 <button class="uk-button uk-button-default uk-button-small" disabled>Button</button>
136 </div>
137 </div>
138
139 <div class="uk-margin" uk-margin>
140 <div class="uk-button-group">
141 <a class="uk-button uk-button-default" href="#">Link</a>
142 <button class="uk-button uk-button-default">Button</button>
143 <button class="uk-button uk-button-default">Button</button>
144 </div>
145
146 <div class="uk-button-group">
147 <a class="uk-button uk-button-primary" href="#">Link</a>
148 <button class="uk-button uk-button-primary">Button</button>
149 <button class="uk-button uk-button-primary">Button</button>
150 </div>
151
152 <div class="uk-button-group">
153 <a class="uk-button uk-button-secondary" href="#">Link</a>
154 <button class="uk-button uk-button-secondary">Button</button>
155 <button class="uk-button uk-button-secondary">Button</button>
156 </div>
157
158 <div class="uk-button-group">
159 <a class="uk-button uk-button-danger" href="#">Link</a>
160 <button class="uk-button uk-button-danger">Button</button>
161 <button class="uk-button uk-button-danger">Button</button>
162 </div>
163
164 <div class="uk-button-group">
165 <button class="uk-button uk-button-default" disabled>Button</button>
166 <button class="uk-button uk-button-default" disabled>Button</button>
167 <button class="uk-button uk-button-default" disabled>Button</button>
168 </div>
169 </div>
170
171 <div class="uk-margin" uk-margin>
172 <div class="uk-button-group">
173 <a class="uk-button uk-button-default uk-button-large" href="#">Link</a>
174 <button class="uk-button uk-button-default uk-button-large">Button</button>
175 <button class="uk-button uk-button-default uk-button-large">Button</button>
176 </div>
177
178 <div class="uk-button-group">
179 <a class="uk-button uk-button-primary uk-button-large" href="#">Link</a>
180 <button class="uk-button uk-button-primary uk-button-large">Button</button>
181 <button class="uk-button uk-button-primary uk-button-large">Button</button>
182 </div>
183
184 <div class="uk-button-group">
185 <a class="uk-button uk-button-secondary uk-button-large" href="#">Link</a>
186 <button class="uk-button uk-button-secondary uk-button-large">Button</button>
187 <button class="uk-button uk-button-secondary uk-button-large">Button</button>
188 </div>
189
190 <div class="uk-button-group">
191 <a class="uk-button uk-button-danger uk-button-large" href="#">Link</a>
192 <button class="uk-button uk-button-danger uk-button-large">Button</button>
193 <button class="uk-button uk-button-danger uk-button-large">Button</button>
194 </div>
195
196 <div class="uk-button-group">
197 <button class="uk-button uk-button-default uk-button-large" disabled>Button</button>
198 <button class="uk-button uk-button-default uk-button-large" disabled>Button</button>
199 <button class="uk-button uk-button-default uk-button-large" disabled>Button</button>
200 </div>
201 </div>
202
203 <h2>Group with Drop</h2>
204
205 <div class="uk-margin" uk-margin>
206
207 <div class="uk-button-group">
208 <button class="uk-button uk-button-default">Group</button>
209 <div class="uk-inline">
210 <button class="uk-button uk-button-default" type="button"><span uk-icon="icon: table"></span></button>
211 <div uk-drop="mode: click">
212 <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
213 </div>
214 </div>
215 </div>
216
217 <div class="uk-button-group">
218 <button class="uk-button uk-button-primary">Group</button>
219 <div class="uk-inline">
220 <button class="uk-button uk-button-primary" type="button"><span uk-icon="icon: table"></span></button>
221 <div uk-drop="mode: click">
222 <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
223 </div>
224 </div>
225 </div>
226
227 <div class="uk-button-group">
228 <button class="uk-button uk-button-secondary">Group</button>
229 <div class="uk-inline">
230 <button class="uk-button uk-button-secondary" type="button"><span uk-icon="icon: table"></span></button>
231 <div uk-drop="mode: click">
232 <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
233 </div>
234 </div>
235 </div>
236
237 <div class="uk-button-group">
238 <button class="uk-button uk-button-danger">Group</button>
239 <div class="uk-inline">
240 <button class="uk-button uk-button-danger" type="button"><span uk-icon="icon: table"></span></button>
241 <div uk-drop="mode: click">
242 <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
243 </div>
244 </div>
245 </div>
246
247 </div>
248
249 </div>
250
251 </body>
252</html>