forked from zuramai/mazer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponent-list-group.html
472 lines (471 loc) · 28.4 KB
/
component-list-group.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
{% set title = 'List Group' %}
{% set filename = 'component-list-group.html' %}
{% extends 'layouts/master.html' %}
{% block content %}
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>List Group</h3>
<p class="text-subtitle text-muted">List groups are a flexible and powerful component for displaying a
series of content</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">List Group</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- list groups simple & disabled start -->
<section id="basic-list-group">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Simple List Group</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
The most basic list group is simply an unordered list with list
items, and the proper classes. Build upon it with the options that
follow, or your own CSS as needed.
</p>
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">chocolate cheesecake candy</li>
<li class="list-group-item">Oat cake icing pastry pie carrot</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Disabled items</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear
disabled.</p>
<div class="list-group">
<span class="list-group-item">
Cras justo odio
</span>
<span class="list-group-item">Dapibus ac facilisis in</span>
<span class="list-group-item disabled">Morbi leo risus</span>
<span class="list-group-item">Porta ac consectetur ac</span>
<span class="list-group-item">Vestibulum at eros</span>
<span class="list-group-item">Biscuit jelly beans macaroon danish pudding</span>
<span class="list-group-item">Oat cake icing pastry pie carrot</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list groups simple & disabled end -->
<!-- list group button & badge start-->
<section class="list-group-button-badge">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Button list Group</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">Cras justo
odio</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac
facilisis
in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo
risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac
consectetur
ac</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at
eros</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Badges</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Use Utility classes <code>.d-flex</code> <code>.justify-content-between</code>
<code>align-items-center</code> to create space between badge and your content
</p>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span> Biscuit jelly beans macaroon danish pudding.</span>
<span class="badge bg-warning badge-pill badge-round ml-1">8</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span> chocolate cheesecake candy</span>
<span class="badge bg-info badge-pill badge-round ml-1">7</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span> Oat cake icing pastry pie carrot</span>
<span class="badge bg-danger badge-pill badge-round ml-1">6</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>space between badgeOat cake icing pastry pie carrot</span>
<span class="badge bg-secondary badge-pill badge-round ml-1">5</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list group button & badge ends -->
<!-- list group Checkboxes and radios start -->
<section id="list-group-icons">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Checkboxes and radios</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Place checkboxes and radios within list group items and customize as needed
</p>
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Cras justo odio
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Morbi leo risus
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Porta ac consectetur ac
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Custom content</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add nearly any HTML within, even for linked list groups like the
one below.
</p>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-white">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list group Checkboxes and radios end -->
<!-- list group with contextual & horizontal start -->
<section id="list-group-contextual">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Contextual classes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Use contextual classes to style list items, default or linked.
Also includes .active state.
</p>
<ul class="list-group">
<li class="list-group-item list-group-item-primary">
Cras justo odio
</li>
<li class="list-group-item list-group-item-success">
Dapibus ac facilisis in
</li>
<li class="list-group-item list-group-item-danger">
Morbi leo risus
</li>
<li class="list-group-item list-group-item-warning">
Porta ac consectetur ac
</li>
<li class="list-group-item list-group-item-info">
Vestibulum at eros
</li>
<li class="list-group-item list-group-item-light">
chocolate cheesecake candy
</li>
<li class="list-group-item list-group-item-dark">
Oat cake icing pastry pie carrot
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Horizontal</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add <code>.list-group-horizontal</code> to change the layout of list group items from
vertical to
horizontal across all breakpoints.choose a responsive variantcode <code>
.list-group-horizontal-{sm|md|lg|xl}</code> to make a list group horizontal starting at that
breakpoint’s min-width.
</p>
<div class="list-group list-group-horizontal-sm mb-1 text-center" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-sunday-list"
data-bs-toggle="list" href="#list-sunday" role="tab">Option 1</a>
<a class="list-group-item list-group-item-action" id="list-monday-list"
data-bs-toggle="list" href="#list-monday" role="tab">Option 2</a>
<a class="list-group-item list-group-item-action" id="list-tuesday-list"
data-bs-toggle="list" href="#list-tuesday" role="tab">Option 3</a>
</div>
<div class="tab-content text-justify">
<div class="tab-pane fade show active" id="list-sunday" role="tabpanel"
aria-labelledby="list-sunday-list">Irure enim occaecat labore sit qui aliquip
reprehenderit amet
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat
laboris sunt dolor.
Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea
aliquip
sunt amet.
Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet
culpa.
Quis ullamco
nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt
dolor
eiusmod eu
pariatur culpa mollit in irure Lorem, ipsum dolor sit amet consectetur adipisicing
elit.
Iusto quis
porro doloribus est natus doloremque, eos laudantium
exercitationem impedit sapiente tenetur soluta reiciendis deserunt!</div>
<div class="tab-pane fade" id="list-monday" role="tabpanel"
aria-labelledby="list-monday-list">Cupidatat
quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do
cillum ad laborum.
Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex.
Officia
anim incididunt
laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation.
Dolor
nisi culpa ex ad
irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa
commodo veniam
incididunt veniam ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Exercitationem, porro!
Amet soluta tempora eveniet blanditiis alias eos, dolor qui consectetur!
</div>
<div class="tab-pane fade" id="list-tuesday" role="tabpanel"
aria-labelledby="list-tuesday-list">Ut ut
do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit
aute
ipsum voluptate.
Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit
consequat enim tempor.
Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure.
Ipsum id
Lorem sit
sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt.
Consectetur et
fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum. Lorem
ipsum dolor sit
amet consectetur adipisicing elit. Molestias, inventore!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list group with contextual & horizontal ends -->
<!-- List group navigation start -->
<section class="list-group-navigation">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">List group navigation</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<div class="list-group" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list"
data-bs-toggle="list" href="#list-home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list"
data-bs-toggle="list" href="#list-profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list"
data-bs-toggle="list" href="#list-messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list"
data-bs-toggle="list" href="#list-settings" role="tab">Settings</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-8 mt-1">
<div class="tab-content text-justify" id="nav-tabContent">
<div class="tab-pane show active" id="list-home" role="tabpanel"
aria-labelledby="list-home-list">
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing
exercitation fugiat
tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut.
Mollit
voluptate
reprehenderit
occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id
ut
nulla. Ea et fugiat
aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor.
Anim ad
Lorem aliqua in
cupidatat nisi enim eu nostrud do aliquip veniam minim. Lorem ipsum dolor
sit
amet consectetur,
adipisicing elit. Aliquam itaque nisi obcaecati doloremque et est ex
possimus
quidem dolorem soluta.
</div>
<div class="tab-pane" id="list-profile" role="tabpanel"
aria-labelledby="list-profile-list">
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur
consectetur
ex nisi eu do cillum
ad
laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex
amet
id ex. Officia anim
incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do
exercitation. Dolor
nisi
culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure
non
commodo enim culpa
commodo veniam incididunt veniam ad.</div>
<div class="tab-pane" id="list-messages" role="tabpanel"
aria-labelledby="list-messages-list">Ut ut
do pariatur aliquip aliqua aliquip exercitation do nostrud commodo
reprehenderit
aute ipsum
voluptate.
Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit
mollit
consequat enim
tempor.
Consectetur est minim nostrud nostrud consectetur irure labore voluptate
irure.
Ipsum id Lorem sit
sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod
deserunt. Consectetur et
fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur
cillum.
</div>
<div class="tab-pane" id="list-settings" role="tabpanel"
aria-labelledby="list-settings-list">Irure
enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt
ullamco
ex elit nostrud ut
dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim
cillum
occaecat aute est
cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit
dolor ut
exercitation irure
commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui
aute
irure eu. Magna labore
dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa
mollit
in irure</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- List group navigation ends -->
</div>
{% endblock %}