បញ្ជីក្រុម
បញ្ជីក្រុមគឺជាសមាសធាតុដែលអាចបត់បែនបាន និងមានឥទ្ធិពលសម្រាប់បង្ហាញស៊េរីនៃមាតិកា។ កែប្រែ និងពង្រីកពួកវាដើម្បីគាំទ្រខ្លឹមសារណាមួយនៅក្នុង។
ឧទាហរណ៍ជាមូលដ្ឋាន
ក្រុមបញ្ជីមូលដ្ឋានបំផុតគឺបញ្ជីដែលមិនមានលំដាប់ដោយមានធាតុបញ្ជីនិងថ្នាក់ត្រឹមត្រូវ។ បង្កើតវាជាមួយនឹងជម្រើសដែលធ្វើតាម ឬជាមួយ CSS ផ្ទាល់ខ្លួនរបស់អ្នកតាមតម្រូវការ។
- ធាតុមួយ។
- ធាតុទីពីរ
- ធាតុទីបី
- ធាតុទីបួន
- និងទីប្រាំមួយ។
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
ធាតុសកម្ម
បន្ថែម .active
ទៅ a .list-group-item
ដើម្បីបង្ហាញពីការជ្រើសរើសសកម្មបច្ចុប្បន្ន។
- ធាតុសកម្ម
- ធាតុទីពីរ
- ធាតុទីបី
- ធាតុទីបួន
- និងទីប្រាំមួយ។
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
ធាតុដែលបិទ
បន្ថែម .disabled
ទៅ a .list-group-item
ដើម្បីធ្វើឱ្យវា ហាក់ដូចជា បិទ។ ចំណាំថាធាតុមួយចំនួនជាមួយ .disabled
ក៏នឹងទាមទារ JavaScript ផ្ទាល់ខ្លួនផងដែរ ដើម្បីបិទព្រឹត្តិការណ៍ចុចរបស់វាទាំងស្រុង (ឧទាហរណ៍ តំណភ្ជាប់)។
- ធាតុពិការ
- ធាតុទីពីរ
- ធាតុទីបី
- ធាតុទីបួន
- និងទីប្រាំមួយ។
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
តំណភ្ជាប់និងប៊ូតុង
ប្រើ <a>
s ឬ <button>
s ដើម្បីបង្កើត ធាតុក្រុមបញ្ជី សកម្មភាព.list-group-item-action
ដែលមានដាក់ដាក់ បិទ និងស្ថានភាពសកម្មដោយបន្ថែម . យើងបែងចែកថ្នាក់ pseudo-class ទាំងនេះដើម្បីធានាថាក្រុមបញ្ជីដែលធ្វើពីធាតុមិនអន្តរកម្ម (ដូចជា <li>
s ឬ <div>
s) មិនផ្តល់ការចុច ឬប៉ះ។
ត្រូវប្រាកដថា មិនប្រើថ្នាក់ស្តង់ដារ .btn
នៅទីនេះ ។
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
ជាមួយ <button>
s អ្នកក៏អាចប្រើ disabled
attribute ជំនួសឱ្យ .disabled
class ផងដែរ។ ជាអកុសល <a>
s មិនគាំទ្រគុណលក្ខណៈពិការ។
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
ហូរ
បន្ថែម .list-group-flush
ដើម្បីលុបស៊ុមមួយចំនួន និងជ្រុងមូល ដើម្បីបង្ហាញធាតុក្រុមបញ្ជីពីគែមមួយទៅគែមនៅក្នុងធុងមេ (ឧទាហរណ៍កាត)។
- ធាតុមួយ។
- ធាតុទីពីរ
- ធាតុទីបី
- ធាតុទីបួន
- និងទីប្រាំមួយ។
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
លេខ
បន្ថែម .list-group-numbered
ថ្នាក់កែប្រែ (ហើយជាជម្រើសប្រើ <ol>
ធាតុមួយ) ដើម្បីជ្រើសរើសធាតុក្រុមបញ្ជីលេខ។ លេខត្រូវបានបង្កើតតាមរយៈ CSS (ផ្ទុយទៅនឹងការ <ol>
កំណត់រចនាប័ទ្មកម្មវិធីរុករកលំនាំដើម) សម្រាប់ការដាក់ឱ្យកាន់តែប្រសើរនៅក្នុងបញ្ជីក្រុមធាតុ និងដើម្បីអនុញ្ញាតឱ្យមានការប្ដូរតាមបំណងបានល្អប្រសើរ។
លេខត្រូវបានបង្កើតឡើងដោយ counter-reset
នៅលើ <ol>
, ហើយបន្ទាប់មកបានកំណត់រចនាប័ទ្ម និងដាក់ដោយ ::before
ធាតុក្លែងក្លាយនៅលើ <li>
ជាមួយ counter-increment
និង content
.
- Cras justo odio
- Cras justo odio
- Cras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
ទាំងនេះដំណើរការល្អជាមួយមាតិកាផ្ទាល់ខ្លួនផងដែរ។
-
ចំណងជើងរងCras justo odio
-
ចំណងជើងរងCras justo odio
-
ចំណងជើងរងCras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
ផ្ដេក
បន្ថែម .list-group-horizontal
ដើម្បីផ្លាស់ប្តូរប្លង់នៃធាតុក្រុមបញ្ជីពីបញ្ឈរទៅផ្ដេកឆ្លងកាត់ចំណុចឈប់ទាំងអស់។ ម្យ៉ាងវិញទៀត ជ្រើសរើសវ៉ារ្យ៉ង់ឆ្លើយតប .list-group-horizontal-{sm|md|lg|xl|xxl}
ដើម្បីបង្កើតក្រុមបញ្ជីផ្ដេក ដោយចាប់ផ្តើមពីចំណុចឈប់នោះ min-width
។ បច្ចុប្បន្ន ក្រុមបញ្ជីផ្ដេកមិនអាចត្រូវបានរួមបញ្ចូលជាមួយនឹងក្រុមបញ្ជី flush ។
គន្លឹះ៖ ចង់បានធាតុក្រុមក្នុងបញ្ជីទទឹងស្មើៗគ្នានៅពេលផ្ដេក? បន្ថែម .flex-fill
ទៅធាតុក្រុមបញ្ជីនីមួយៗ។
- ធាតុមួយ។
- ធាតុទីពីរ
- ធាតុទីបី
- ធាតុមួយ។
- ធាតុទីពីរ
- ធាតុទីបី
- ធាតុមួយ។
- ធាតុទីពីរ
- ធាតុទីបី
- ធាតុមួយ។
- ធាតុទីពីរ
- ធាតុទីបី
- ធាតុមួយ។
- ធាតុទីពីរ
- ធាតុទីបី
- ធាតុមួយ។
- ធាតុទីពីរ
- ធាតុទីបី
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
ថ្នាក់បរិបទ
ប្រើថ្នាក់បរិបទដើម្បីធ្វើរចនាប័ទ្មធាតុបញ្ជីដែលមានផ្ទៃខាងក្រោយ និងពណ៌ដែលមានលក្ខណៈច្បាស់លាស់។
- ធាតុក្រុមបញ្ជីលំនាំដើមសាមញ្ញ
- ធាតុក្រុមបញ្ជីបឋមសាមញ្ញ
- ធាតុក្រុមបញ្ជីបន្ទាប់បន្សំសាមញ្ញ
- ធាតុក្រុមបញ្ជីជោគជ័យសាមញ្ញ
- ធាតុក្រុមបញ្ជីគ្រោះថ្នាក់សាមញ្ញ
- ធាតុក្រុមបញ្ជីព្រមានសាមញ្ញ
- ធាតុក្រុមបញ្ជីព័ត៌មានសាមញ្ញ
- ធាតុក្រុមបញ្ជីពន្លឺសាមញ្ញ
- ធាតុក្រុមបញ្ជីខ្មៅសាមញ្ញ
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
ថ្នាក់បរិបទក៏ដំណើរការជាមួយ .list-group-item-action
. ចំណាំការបន្ថែមរចនាប័ទ្មដាក់លើទីនេះមិនមានវត្តមាននៅក្នុងឧទាហរណ៍មុនទេ។ គាំទ្រផងដែរគឺ .active
រដ្ឋ; អនុវត្តវាដើម្បីចង្អុលបង្ហាញការជ្រើសរើសសកម្មនៅលើធាតុក្រុមបញ្ជីបរិបទ។
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ
ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ឧ. អត្ថបទដែលមើលឃើញ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថ���ទបន្ថែមដែលលាក់ជាមួយ .visually-hidden
ថ្នាក់។
ជាមួយនឹងផ្លាកសញ្ញា
បន្ថែមផ្លាកសញ្ញាទៅធាតុក្រុមក្នុងបញ្ជីណាមួយ ដើម្បីបង្ហាញចំនួនមិនទាន់អាន សកម្មភាព និងច្រើនទៀត ដោយមានជំនួយពី ឧបករណ៍ប្រើប្រាស់ មួយចំនួន ។
- ធាតុបញ្ជី១៤
- ធាតុបញ្ជីទីពីរ២
- បញ្ជីទីបី១
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
មាតិកាផ្ទាល់ខ្លួន
បន្ថែម HTML ស្ទើរតែទាំងអស់នៅក្នុង សូម្បីតែសម្រាប់ក្រុមបញ្ជីដែលបានភ្ជាប់ដូចជាមួយខាងក្រោម ដោយមានជំនួយពី ឧបករណ៍ប្រើប្រាស់ flexbox ។
រាយបញ្ជីក្បាលធាតុក្រុម
3 ថ្ងៃមុនមាតិកាកន្លែងដាក់មួយចំនួននៅក្នុងកថាខណ្ឌមួយ។
និងការបោះពុម្ពតូចមួយចំនួន។រាយបញ្ជីក្បាលធាតុក្រុម
3 ថ្ងៃមុនមាតិកាកន្លែងដាក់មួយចំនួននៅក្នុងកថាខណ្ឌមួយ។
និងការបោះពុម្ពតូចមួយចំនួនបានបិទ។រាយបញ្ជីក្បាលធាតុក្រុម
3 ថ្ងៃមុនមាតិកាកន្លែងដាក់មួយចំនួននៅក្នុងកថាខណ្ឌមួយ។
និងការបោះពុម្ពតូចមួយចំនួនបានបិទ។<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<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">Some placeholder content in a paragraph.</p>
<small>And some small print.</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 class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</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 class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
ប្រអប់ធីក និងវិទ្យុ
ដាក់ប្រអប់ធីក និងវិទ្យុរបស់ Bootstrap នៅក្នុងបញ្ជីក្រុម ហើយប្ដូរតាមបំណងតាមតម្រូវការ។ អ្នកអាចប្រើពួកវាដោយមិនចាំបាច់ <label>
s ប៉ុន្តែសូមចងចាំបញ្ចូល aria-label
គុណលក្ខណៈ និងតម្លៃសម្រាប់ភាពងាយស្រួល។
- ប្រអប់ធីកដំបូង
- ប្រអប់ធីកទីពីរ
- ប្រអប់ធីកទីបី
- ប្រអប់ធីកទីបួន
- ប្រអប់ធីកទីប្រាំ
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
ហើយប្រសិនបើអ្នកចង់ <label>
បាន .list-group-item
តំបន់បុកធំៗ អ្នកក៏អាចធ្វើវាបានដែរ។
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
សាស
អថេរ
$list-group-color: $gray-900;
$list-group-bg: $white;
$list-group-border-color: rgba($black, .125);
$list-group-border-width: $border-width;
$list-group-border-radius: $border-radius;
$list-group-item-padding-y: $spacer * .5;
$list-group-item-padding-x: $spacer;
$list-group-item-bg-scale: -80%;
$list-group-item-color-scale: 40%;
$list-group-hover-bg: $gray-100;
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-color: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;
ល្បាយ
ប្រើក្នុងការរួមបញ្ចូលគ្នាជាមួយ $theme-colors
ដើម្បីបង្កើត ថ្នាក់បំរែបំរួលបរិបទ សម្រាប់ .list-group-item
s ។
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
រង្វិលជុំ
រង្វិលជុំដែលបង្កើតថ្នាក់កែប្រែជាមួយ list-group-item-variant()
mixin ។
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
ឥរិយាបថ JavaScript
ប្រើផ្ទាំងជំនួយ JavaScript — រួមបញ្ចូលវាជាលក្ខណៈបុគ្គល ឬតាមរយៈឯកសារដែលបានចងក្រង bootstrap.js
— ដើម្បីពង្រីកក្រុមបញ្ជីរបស់យើងដើម្បីបង្កើតផ្ទាំងផ្ទាំងដែលអាចដាក់បាននៃមាតិកាក្នុងតំបន់។
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" 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" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
ការប្រើប្រាស់គុណលក្ខណៈទិន្នន័យ
អ្នកអាចធ្វើឱ្យការរុករកក្រុមបញ្ជីដោយមិនចាំបាច់សរសេរ JavaScript ណាមួយដោយគ្រាន់តែបញ្ជាក់ data-bs-toggle="list"
ឬនៅលើធាតុមួយ។ ប្រើគុណលក្ខណៈទិន្នន័យទាំងនេះនៅលើ .list-group-item
.
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
តាមរយៈ JavaScript
បើកដំណើរការធាតុបញ្ជីផ្ទាំងដែលអាចប្រើបានតាមរយៈ JavaScript (ធាតុបញ្ជីនីមួយៗចាំបាច់ត្រូវធ្វើឱ្យសកម្មជាលក្ខណៈបុគ្គល)៖
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
អ្នកអាចធ្វើឱ្យធាតុបញ្ជីនីមួយៗសកម្មតាមវិធីជាច្រើន៖
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
ប្រសិទ្ធិភាពបន្ថយ
ដើម្បីធ្វើឱ្យផ្ទាំងផ្ទាំងធ្លាក់ចុះ សូមបន្ថែម .fade
ទៅនីមួយៗ .tab-pane
។ ផ្ទាំងផ្ទាំងទីមួយក៏ត្រូវតែ .show
ធ្វើឱ្យមាតិកាដំបូងអាចមើលឃើញផងដែរ។
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
វិធីសាស្រ្ត
constructor
បើកដំណើរការធាតុធាតុបញ្ជី និងធុងមាតិកា។ ថេបគួរតែមាន មួយ data-bs-target
ឬ href
កំណត់គោលដៅថ្នាំងកុងតឺន័រនៅក្នុង DOM ។
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
បង្ហាញ
ជ្រើសធាតុបញ្ជីដែលបានផ្ដល់ឱ្យហើយបង្ហាញបន្ទះដែលពាក់ព័ន្ធរបស់វា។ ធាតុបញ្ជីផ្សេងទៀតដែលត្រូវបានជ្រើសពីមុននឹងក្លាយជាមិនបានជ្រើស ហើយបន្ទះដែលពាក់ព័ន្ធរបស់វាត្រូវបានលាក់។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញ មុនពេលផ្ទាំងផ្ទាំងត្រូវបានបង្ហាញយ៉ាងពិត ប្រាកដ (ឧទាហរណ៍ មុន shown.bs.tab
ព្រឹត្តិការណ៍កើតឡើង)។
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
បោះចោល
បំផ្លាញផ្ទាំងរបស់ធាតុមួយ។
getInstance
វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានឧទាហរណ៍ផ្ទាំងដែលភ្ជាប់ជាមួយធាតុ DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានផ្ទាំងផ្ទាំងដែលភ្ជាប់ជាមួយធាតុ DOM ឬបង្កើតថ្មីមួយក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
ព្រឹត្តិការណ៍
នៅពេលបង្ហាញផ្ទាំងថ្មី ព្រឹត្តិការណ៍នឹងឆេះតាមលំដាប់ដូចខាងក្រោម៖
hide.bs.tab
(នៅលើផ្ទាំងសកម្មបច្ចុប្បន្ន)show.bs.tab
(នៅលើផ្ទាំងដែលត្រូវបង្ហាញ)hidden.bs.tab
(នៅលើផ្ទាំងសកម្មមុន ដូចគ្នាទៅនឹងhide.bs.tab
ព្រឹត្តិការណ៍)shown.bs.tab
(នៅលើផ្ទាំងដែលទើបនឹងបង្ហាញសកម្មថ្មី ដូចគ្នាទៅនឹងshow.bs.tab
ព្រឹត្តិការណ៍)
ប្រសិនបើគ្មានផ្ទាំងសកម្ម hide.bs.tab
ហើយ hidden.bs.tab
ព្រឹត្តិការណ៍នឹងមិនត្រូវបានគេបណ្តេញចេញទេ។
ប្រភេទព្រឹត្តិការណ៍ | ការពិពណ៌នា |
---|---|
show.bs.tab |
ព្រឹត្តិការណ៍នេះចាប់ផ្តើមនៅលើផ្ទាំងបង្ហាញ ប៉ុន្តែមុនពេលផ្ទាំងថ្មីត្រូវបានបង្ហាញ។ ប្រើ event.target និង event.relatedTarget ដើម្បីកំណត់គោលដៅផ្ទាំងសកម្ម និងផ្ទាំងសកម្មពីមុន (ប្រសិនបើមាន) រៀងគ្នា។ |
shown.bs.tab |
ព្រឹត្តិការណ៍នេះចាប់ផ្តើមនៅលើផ្ទាំងបង្ហាញបន្ទាប់ពីផ្ទាំងមួយត្រូវបានបង្ហាញ។ ប្រើ event.target និង event.relatedTarget ដើម្បីកំណត់គោលដៅផ្ទាំងសកម្ម និងផ្ទាំងសកម្មពីមុន (ប្រសិនបើមាន) រៀងគ្នា។ |
hide.bs.tab |
ព្រឹត្តិការណ៍នេះដំណើរការនៅពេលដែលផ្ទាំងថ្មីត្រូវបានបង្ហាញ (ហើយដូច្នេះផ្ទាំងសកម្មពីមុននឹងត្រូវលាក់)។ ប្រើ event.target និង event.relatedTarget ដើម្បីកំណត់គោលដៅផ្ទាំងសកម្មបច្ចុប្បន្ន និងផ្ទាំងថ្មីដែលនឹងសកម្មក្នុងពេលឆាប់ៗនេះ រៀងគ្នា។ |
hidden.bs.tab |
ព្រឹត្តិការណ៍នេះដំណើរការបន្ទាប់ពីផ្ទាំងថ្មីត្រូវបានបង្ហាញ (ហើយដូច្នេះផ្ទាំងសកម្មពីមុនត្រូវបានលាក់)។ ប្រើ event.target និង event.relatedTarget ដើម្បីកំណត់គោលដៅផ្ទាំងសកម្មពីមុន និងផ្ទាំងសកម្មថ្មីរៀងៗខ្លួន។ |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}