ዝርዝር ጉጅለ
ዝርዝር ጉጅለታት ንተኸታታሊ ትሕዝቶ ንምርኣይ ተዓጻጻፍን ሓያልን ባእታ እዩ። ዳርጋ ዝኾነ ኣብ ውሽጢ ዘሎ ትሕዝቶ ንምድጋፍ ኣዐርዮምን ኣስፍሕዎምን።
መሰረታዊ ኣብነት
እቲ ኣዝዩ መሰረታዊ ዝኾነ ዝርዝር ጉጅለ፡ ዝርዝር ነገራትን ግቡእ ክፍልታትን ዘለዎ ስርዓት ዘይብሉ ዝርዝር እዩ። ኣብ ልዕሊኡ በቶም ዝስዕቡ ኣማራጺታት ምህናጽ፣ ወይ ከም ኣድላይነቱ ብናይ ገዛእ ርእስኻ 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
- ስንኩል ዝኾነ ኣቕሓ
- ካልኣይ ኣቕሓ
- ሳልሳይ ኣቕሓ
- ራብዓይ ንጥረ ነገር
- ሓሙሻይ ድማ
<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
ናይ ዝርዝር ጉጅለ ነገራት ምስ ሆቨር፣ disabledን ንጡፋትን ኩነታት ምፍጣር ። ነዞም ስውር-ክፍልታት ንፈላልዮም፡ ብዘይ መስተጋብራዊ ባእታታት (ከም <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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
ብ s ውን ኣብ ክንዲ ክፍሊ <button>
ነቲ ባህሪ ክትጥቀመሉ ትኽእል ኢኻ ። እቲ ዘሕዝን ግን s ነቲ ዝተሰናኸለ ባህሪ ኣይድግፍዎን እዮም።disabled
.disabled
<a>
<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>
s ነባሪ ቅዲ መርበብ ሓበሬታ) ንዝሓሸ ምቕማጥ ኣብ ውሽጢ ዝርዝር ጉጅለ ነገራትን ዝሓሸ ምምዕርራይ ንኽፍቀድን ይፍጠሩ።
counter-reset
ቁጽርታት ብ ኣብቲ ፣ ይፍጠሩ <ol>
፣ ድሕሪኡ ድማ ቅዲ ይግበሩን ብናይ ሓሶት ::before
ባእታ ኣብቲ ምስን <li>
ይቕመጡን ።counter-increment
content
- ናይ ዝርዝር ኣቕሓ
- ናይ ዝርዝር ኣቕሓ
- ናይ ዝርዝር ኣቕሓ
<ol class="list-group list-group-numbered">
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
</ol>
እዚኦም ምስ ብሕታዊ ትሕዝቶ እውን ብሉጽ ስራሕ ይሰርሑ።
-
ንኡስ ኣርእስቲትሕዝቶ ንዝርዝር ኣቕሓ
-
ንኡስ ኣርእስቲትሕዝቶ ንዝርዝር ኣቕሓ
-
ንኡስ ኣርእስቲትሕዝቶ ንዝርዝር ኣቕሓ
<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>
Content for list item
</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>
Content for list item
</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>
Content for list item
</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
። ኣብዚ እዋን እዚ ኣግማድ ዝርዝር ጉጅለታት ምስ ፍሉሽ ዝርዝር ጉጅለታት ክውሃሃዱ ኣይክእሉን።
ProTip: ማዕረ ስፍሓት ዘለዎም ናይ ዝርዝር ጉጅለ ነገራት ልኡም ኣብ ዝኾኑሉ እዋን ትደሊ? ኣብ ነፍሲ ወከፍ ዝርዝር ጉጅለ ኣቕሓ ወስኹ .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
ክፍሊ ዝተሓብአ።
ምስ ባጅ
ዘይተነበበ ቁጽሪ፣ ንጥፈትን ካልእን ንምርኣይ ኣብ ዝኾነ ናይ ዝርዝር ጉጅለ ኣቕሓ ባጅ ወስኹ ብሓገዝ ገለ ዩቲሊቲታት .
- ናይ ዝርዝር ኣቕሓ14
- ካልኣይ ዝርዝር ኣቕሓ2.
- ሳልሳይ ዝርዝር ኣቕሓ1.
<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>
ብሕታዊ ትሕዝቶ
ዳርጋ ዝኾነ ኤችቲኤምኤል ኣብ ውሽጢ ወስኸሉ፣ ዋላ ንኸምዚ ኣብ ታሕቲ ዘሎ ዝተኣሳሰሩ ናይ ዝርዝር ጉጅለታት፣ ብሓገዝ flexbox utilities .
<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 ምልክት ሳጹናትን ሬድዮታትን ኣብ ውሽጢ ዝርዝር ጉጅለ ነገራት ኣቐምጦምን ከም ኣድላይነቱ ኣመዓራርዮምን። ብዘይ s ክትጥቀመሎም ትኽእል ኢኻ <label>
፡ ግን በጃኻ ንተበጻሕነት ዝኸውን 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>
s as the .list-group-item
for large hit areas እንተደሊኻ፡ ንስኻ’ውን ከምኡ ክትገብር ትኽእል ኢኻ።
<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;
ሚክሲን ዝበሃሉ ምዃኖም ይፍለጥ
ምስ ተደሚሩ ን s ዝኸውን ዓውደ-ጽሑፋዊ ፍልልያት ክፍልታት$theme-colors
ንምፍጣር ይጥቀመሉ።.list-group-item
@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()
ምስቲ ሚክሲን ነቶም ናይ መቐየሪ ክፍልታት ዘመንጩ ሉፕ ።
// 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);
}
ባህሪ ጃቫስክሪፕት።
ነቲ ትብ ጃቫስክሪፕት ፕላግ-ኢን ተጠቐም-ብውልቂ ወይ ብመንገዲ እቲ ዝተጠርነፈ 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>
ናይ ዳታ ባህርያት ምጥቃም
ዝኾነ ጃቫስክሪፕት ከይጸሓፍካ ንሓደ ናይ ዝርዝር ጉጅለ ምድህሳስ ብቐሊሉ ብምግላጽ 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>
ብመንገዲ ጃቫስክሪፕት።
ብመንገዲ ጃቫስክሪፕት ኣቢልካ ናይ tabbable ዝርዝር ኣቕሓ ኣንቅሕ (ነፍሲ ወከፍ ናይ ዝርዝር ኣቕሓ ብውልቂ ክነጥፍ ኣለዎ)፤
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
ንሓደ ናይ ዝርዝር ኣቕሓ ባእታን ትሕዝቶ መትሓዚን የነቓቕሕ። Tab ኣብ DOM ወይ a data-bs-target
ወይ ንሓደ href
መትሓዚ መስመር ዕላማ ዝገበረ ክህልዎ ኣለዎ።
<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
and hidden.bs.tab
events ኣይክተኮስን እዩ።
ዓይነት ፍጻመ | መግለፂ |
---|---|
show.bs.tab |
እዚ ፍጻመ ኣብ tab show ይትኩስ፣ ግን ቅድሚ እቲ ሓድሽ tab ምርኣይ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ event.target ንምግባርን ተጠቐም ።event.relatedTarget |
shown.bs.tab |
እዚ ፍጻመ ድሕሪ ሓደ ትብ ምርኣይ ኣብ tab show ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ 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
})
}