rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Code Issues Actions Packages Releases Activity
cf9454caa0
Bootstrap/site/content/docs/5.3/components/list-group.md

501 lines
22 KiB
Markdown
Raw Normal View History

frontmatter that shit up
2014-07-13 09:59:31 +02:00
---
Massive cleanup - Simpler main nav on all pages - Back to purple masthead on homepage instead of dark graphite - Active link styles on the main nav - Cleaned up sidebar nav - New docs layout name - Homepage copy edits - Updated bright purple docs color
2015-08-15 07:45:55 +02:00
layout: docs
frontmatter that shit up
2014-07-13 09:59:31 +02:00
title: List group
update components docs
2017-05-28 08:01:14 +02:00
description: List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
restore page headers, use partial and page frontmatter to organize it
2015-08-06 02:47:45 +02:00
group: components
update components docs
2017-05-28 08:01:14 +02:00
toc: true
frontmatter that shit up
2014-07-13 09:59:31 +02:00
---
add markdown toc stuff
2015-05-29 10:58:52 +02:00
## Basic example
update components docs
2017-05-28 08:01:14 +02:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
markdownify list group
2014-07-13 10:12:06 +02:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
Break up docs into includes
2014-03-17 03:03:53 +01:00
<ul class="list-group">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<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>
Break up docs into includes
2014-03-17 03:03:53 +01:00
</ul>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
markdownify list group
2014-07-13 10:12:06 +02:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
## Active items
markdownify list group
2014-07-13 10:12:06 +02:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
Add `.active` to a `.list-group-item` to indicate the current active selection.
add specific docs example for badged list group items floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
2016-10-30 22:13:06 +01:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
add specific docs example for badged list group items floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
2016-10-30 22:13:06 +01:00
<ul class="list-group">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<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>
add specific docs example for badged list group items floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
2016-10-30 22:13:06 +01:00
</ul>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
add specific docs example for badged list group items floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
2016-10-30 22:13:06 +01:00
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 04:50:00 +01:00
## Disabled items
markdownify list group
2014-07-13 10:12:06 +02:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links).
markdownify list group
2014-07-13 10:12:06 +02:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
<ul class="list-group">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<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>
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
</ul>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
markdownify list group
2014-07-13 10:12:06 +02:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
## Links and buttons
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 04:50:00 +01:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `.list-group-item-action`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
Merge branch 'master' into v4
2015-06-19 08:56:43 +02:00
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 04:50:00 +01:00
Be sure to **not use the standard `.btn` classes here**.
Merge branch 'master' into v4
2015-06-19 08:56:43 +02:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
Merge branch 'master' into v4
2015-06-19 08:56:43 +02:00
<div class="list-group">
Use `aria-current` where appropriate (#30079)
2020-02-07 12:18:30 +01:00
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
The current link item
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 04:50:00 +01:00
</a>
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<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>
Disabled link cleanup (#34886) * Disabled link cleanup per https://www.w3.org/TR/html-aria/#docconformance > It is NOT RECOMMENDED to use `aria-disabled="true"` on an `a` element with an `href` attribute. > >NOTE >If a link needs to be "disabled", remove the `href` attribute. This PR removes the unnecessary `href="#"`, `tabindex="-1"`, and `aria-disabled="true"` from disabled links in both docs pages and examples. `aria-disabled="true"` *is* kept for disabled link-based buttons (that have `role="button"`) as there it's appropriate to use (you *want* to convey to assistive technologies that this thing you're claiming is a button is also disabled at the moment) Further, the PR extends the "Link functionality caveat" to show the "proper" way (removing `href` and adding `.disabled` class only) to disable a link, but then explains what to do if that's not possible (and then keeps an example with all the traditional `href="#" tabindex="-1" aria-disabled="true"`, but explains clearly that it's not ideal). Same sort of explanation is also added to the pointer event utilities page * Turn big note into actual normal doc text Co-authored-by: Mark Otto <markd.otto@gmail.com> Co-authored-by: Mark Otto <markd.otto@gmail.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-09-06 21:14:21 +02:00
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
Merge branch 'master' into v4
2015-06-19 08:56:43 +02:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
Merge branch 'master' into v4
2015-06-19 08:56:43 +02:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
With `<button>`s, you can also make use of the `disabled` attribute instead of the `.disabled` class. Sadly, `<a>`s don't support the disabled attribute.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
Break up docs into includes
2014-03-17 03:03:53 +01:00
<div class="list-group">
Use `aria-current` where appropriate (#30079)
2020-02-07 12:18:30 +01:00
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
The current button
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 04:50:00 +01:00
</button>
fixed button text (#35656) Added button missing text
2022-01-05 18:44:22 +01:00
<button type="button" class="list-group-item list-group-item-action">A second button item</button>
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<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>
Break up docs into includes
2014-03-17 03:03:53 +01:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
markdownify list group
2014-07-13 10:12:06 +02:00
add List Group Flush to List Group docs (#25289) fixes #25288
2018-01-15 00:46:58 +01:00
## Flush
Add `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
add List Group Flush to List Group docs (#25289) fixes #25288
2018-01-15 00:46:58 +01:00
<ul class="list-group list-group-flush">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<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>
add List Group Flush to List Group docs (#25289) fixes #25288
2018-01-15 00:46:58 +01:00
</ul>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
add List Group Flush to List Group docs (#25289) fixes #25288
2018-01-15 00:46:58 +01:00
Change from element selector to the opt-in class
2021-03-11 06:49:47 +01:00
## Numbered
Add ol.list-group with psuedo-element numbers
2021-02-12 19:51:18 +01:00
Change from element selector to the opt-in class
2021-03-11 06:49:47 +01:00
Add the `.list-group-numbered` modifier class (and optionally use an `<ol>` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization.
Add ol.list-group with psuedo-element numbers
2021-02-12 19:51:18 +01:00
docs: fix typo in list-group.md (#33756)
2021-04-27 06:10:43 +02:00
Numbers are generated by `counter-reset` on the `<ol>`, and then styled and placed with a `::before` pseudo-element on the `<li>` with `counter-increment` and `content`.
Add ol.list-group with psuedo-element numbers
2021-02-12 19:51:18 +01:00
{{< example >}}
Change from element selector to the opt-in class
2021-03-11 06:49:47 +01:00
<ol class="list-group list-group-numbered">
Changes some latin/dummy text to English (#34946) Changes some latin/dummy text to English so spellcheck linter passes
2021-09-10 13:02:58 +02:00
<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>
Add ol.list-group with psuedo-element numbers
2021-02-12 19:51:18 +01:00
</ol>
{{< /example >}}
These work great with custom content as well.
{{< example >}}
Change from element selector to the opt-in class
2021-03-11 06:49:47 +01:00
<ol class="list-group list-group-numbered">
Add ol.list-group with psuedo-element numbers
2021-02-12 19:51:18 +01:00
<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>
Changes some latin/dummy text to English (#34946) Changes some latin/dummy text to English so spellcheck linter passes
2021-09-10 13:02:58 +02:00
Content for list item
Add ol.list-group with psuedo-element numbers
2021-02-12 19:51:18 +01:00
</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>
Changes some latin/dummy text to English (#34946) Changes some latin/dummy text to English so spellcheck linter passes
2021-09-10 13:02:58 +02:00
Content for list item
Add ol.list-group with psuedo-element numbers
2021-02-12 19:51:18 +01:00
</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>
Changes some latin/dummy text to English (#34946) Changes some latin/dummy text to English so spellcheck linter passes
2021-09-10 13:02:58 +02:00
Content for list item
Add ol.list-group with psuedo-element numbers
2021-02-12 19:51:18 +01:00
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
{{< /example >}}
Add horizontal list group modifier (#27970) Alternate take to #27683 that builds the modifier class based on min-width, such that list groups are stacked until the class's breakpoint is reached. This is less verbose, matches our primary responsive approach, and prevents an extra class. Unfortunately, I believe supporting flush list groups is too much code here, so I've skipped that and made a note in the docs. Also added examples generate from our breakpoints data file with a protip for how to do equal width items.
2019-01-07 02:01:36 +01:00
## Horizontal
Update docs for new XXL grid tier - Updates mentions of number and exact tiers - Updates grid example to include xxl container - Adds some scss-docs references - Cleans up other grid mentions and docs - Updates navbar example to include an expand at XXL variant
2020-04-13 23:40:47 +02:00
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
Add horizontal list group modifier (#27970) Alternate take to #27683 that builds the modifier class based on min-width, such that list groups are stacked until the class's breakpoint is reached. This is less verbose, matches our primary responsive approach, and prevents an extra class. Unfortunately, I believe supporting flush list groups is too much code here, so I've skipped that and made a note in the docs. Also added examples generate from our breakpoints data file with a protip for how to do equal width items.
2019-01-07 02:01:36 +01:00
**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
{{< list-group.inline >}}
{{- range $.Site.Data.breakpoints }}
<ul class="list-group list-group-horizontal{{ .abbr }}">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<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>
Add horizontal list group modifier (#27970) Alternate take to #27683 that builds the modifier class based on min-width, such that list groups are stacked until the class's breakpoint is reached. This is less verbose, matches our primary responsive approach, and prevents an extra class. Unfortunately, I believe supporting flush list groups is too much code here, so I've skipped that and made a note in the docs. Also added examples generate from our breakpoints data file with a protip for how to do equal width items.
2019-01-07 02:01:36 +01:00
</ul>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{- end -}}
{{< /list-group.inline >}}
{{< /example >}}
Add horizontal list group modifier (#27970) Alternate take to #27683 that builds the modifier class based on min-width, such that list groups are stacked until the class's breakpoint is reached. This is less verbose, matches our primary responsive approach, and prevents an extra class. Unfortunately, I believe supporting flush list groups is too much code here, so I've skipped that and made a note in the docs. Also added examples generate from our breakpoints data file with a protip for how to do equal width items.
2019-01-07 02:01:36 +01:00
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
## Variants
{{< callout info >}}
**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
{{< /callout >}}
markdownify list group
2014-07-13 10:12:06 +02:00
update docs to improve contextual classes section
2016-12-28 22:52:49 +01:00
Use contextual classes to style list items with a stateful background and color.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
update docs to improve contextual classes section
2016-12-28 22:52:49 +01:00
<ul class="list-group">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<li class="list-group-item">A simple default list group item</li>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< list.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<li class="list-group-item list-group-item-{{ .name }}">A simple {{ .name }} list group item</li>
{{- end -}}
{{< /list.inline >}}
update docs to improve contextual classes section
2016-12-28 22:52:49 +01:00
</ul>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
update docs to improve contextual classes section
2016-12-28 22:52:49 +01:00
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
### For links and buttons
Contextual classes also work with `.list-group-item-action` for `<a>` and `<button>` elements. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
markdownify list group
2014-07-13 10:12:06 +02:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
Break up docs into includes
2014-03-17 03:03:53 +01:00
<div class="list-group">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< list.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a>
{{- end -}}
{{< /list.inline >}}
Break up docs into includes
2014-03-17 03:03:53 +01:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
markdownify list group
2014-07-13 10:12:06 +02:00
Revert "Improve callout shortcode. (#31802)" (#31871) This reverts commit 5c6925385ee926a749ead6a4f2ebbfc64e701f36.
2020-10-13 15:37:21 +02:00
{{< callout info >}}
Docs: organize callouts in partials (#37320)
2022-10-16 18:09:33 +02:00
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
Revert "Improve callout shortcode. (#31802)" (#31871) This reverts commit 5c6925385ee926a749ead6a4f2ebbfc64e701f36.
2020-10-13 15:37:21 +02:00
{{< /callout >}}
- Conveying color meaning to AT as markdown include - Add/replace callout for color and AT with include
2016-02-17 11:22:48 +01:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
## With badges
Add a docsref shortcode. This allows for the build to fail if a reference isn't found.
2019-02-04 11:22:02 +01:00
Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{< docsref "/utilities/flex" >}}).
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
<ul class="list-group">
fixes #21584 - revert back to display block for list items to prevent unwanted behaviors - fixes a handful of other linked issues (see main thread) - updates docs to include more utilities for the one example
2017-03-19 00:30:12 +01:00
<li class="list-group-item d-flex justify-content-between align-items-center">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
A list item
docs: Fix badges after #28458. (#29199)
2019-08-04 07:23:25 +02:00
<span class="badge bg-primary rounded-pill">14</span>
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
</li>
fixes #21584 - revert back to display block for list items to prevent unwanted behaviors - fixes a handful of other linked issues (see main thread) - updates docs to include more utilities for the one example
2017-03-19 00:30:12 +01:00
<li class="list-group-item d-flex justify-content-between align-items-center">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
A second list item
docs: Fix badges after #28458. (#29199)
2019-08-04 07:23:25 +02:00
<span class="badge bg-primary rounded-pill">2</span>
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
</li>
fixes #21584 - revert back to display block for list items to prevent unwanted behaviors - fixes a handful of other linked issues (see main thread) - updates docs to include more utilities for the one example
2017-03-19 00:30:12 +01:00
<li class="list-group-item d-flex justify-content-between align-items-center">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
A third list item
docs: Fix badges after #28458. (#29199)
2019-08-04 07:23:25 +02:00
<span class="badge bg-primary rounded-pill">1</span>
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
</li>
</ul>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 22:45:07 +01:00
add markdown toc stuff
2015-05-29 10:58:52 +02:00
## Custom content
markdownify list group
2014-07-13 10:12:06 +02:00
Add a docsref shortcode. This allows for the build to fail if a reference isn't found.
2019-02-04 11:22:02 +01:00
Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{< docsref "/utilities/flex" >}}).
markdownify list group
2014-07-13 10:12:06 +02:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< example >}}
Break up docs into includes
2014-03-17 03:03:53 +01:00
<div class="list-group">
Use `aria-current` where appropriate (#30079)
2020-02-07 12:18:30 +01:00
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
Update custom content example for list group to use utils so the layout doesn't break
2017-01-04 05:08:10 +01:00
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
markdownify list group
2014-07-13 10:12:06 +02:00
</a>
Remove flex utilities from .list-group-item's as they're display: block; meaning the utilities have no affect. Closes #27162.
2018-09-19 07:14:45 +02:00
<a href="#" class="list-group-item list-group-item-action">
Update custom content example for list group to use utils so the layout doesn't break
2017-01-04 05:08:10 +01:00
<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>
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
markdownify list group
2014-07-13 10:12:06 +02:00
</a>
Remove flex utilities from .list-group-item's as they're display: block; meaning the utilities have no affect. Closes #27162.
2018-09-19 07:14:45 +02:00
<a href="#" class="list-group-item list-group-item-action">
Update custom content example for list group to use utils so the layout doesn't break
2017-01-04 05:08:10 +01:00
<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>
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
Break up docs into includes
2014-03-17 03:03:53 +01:00
</a>
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{< /example >}}
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
## Checkboxes and radios
Place Bootstrap's checkboxes and radios within list group items and customize as needed. You can use them without `<label>`s, but please remember to include an `aria-label` attribute and value for accessibility.
{{< example >}}
<ul class="list-group">
<li class="list-group-item">
Added examples for Radios in List Group (#36644) * Add examples for Radios in List Group * Reduce the number of checkboxes and radios to 3 for consistency Drop aria-label on inputs and use label Use class stretched-link on labels to cover the whole list group item Check the first radio by default Remove radios from streched link examples Co-authored-by: Julien Déramond <juderamond@gmail.com>
2022-06-30 21:58:28 +02:00
<input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
<label class="form-check-label" for="firstCheckbox">First checkbox</label>
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
</li>
<li class="list-group-item">
Added examples for Radios in List Group (#36644) * Add examples for Radios in List Group * Reduce the number of checkboxes and radios to 3 for consistency Drop aria-label on inputs and use label Use class stretched-link on labels to cover the whole list group item Check the first radio by default Remove radios from streched link examples Co-authored-by: Julien Déramond <juderamond@gmail.com>
2022-06-30 21:58:28 +02:00
<input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
<label class="form-check-label" for="secondCheckbox">Second checkbox</label>
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
</li>
<li class="list-group-item">
Added examples for Radios in List Group (#36644) * Add examples for Radios in List Group * Reduce the number of checkboxes and radios to 3 for consistency Drop aria-label on inputs and use label Use class stretched-link on labels to cover the whole list group item Check the first radio by default Remove radios from streched link examples Co-authored-by: Julien Déramond <juderamond@gmail.com>
2022-06-30 21:58:28 +02:00
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
<label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
</li>
Added examples for Radios in List Group (#36644) * Add examples for Radios in List Group * Reduce the number of checkboxes and radios to 3 for consistency Drop aria-label on inputs and use label Use class stretched-link on labels to cover the whole list group item Check the first radio by default Remove radios from streched link examples Co-authored-by: Julien Déramond <juderamond@gmail.com>
2022-06-30 21:58:28 +02:00
</ul>
{{< /example >}}
{{< example >}}
<ul class="list-group">
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
<li class="list-group-item">
Added examples for Radios in List Group (#36644) * Add examples for Radios in List Group * Reduce the number of checkboxes and radios to 3 for consistency Drop aria-label on inputs and use label Use class stretched-link on labels to cover the whole list group item Check the first radio by default Remove radios from streched link examples Co-authored-by: Julien Déramond <juderamond@gmail.com>
2022-06-30 21:58:28 +02:00
<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
<label class="form-check-label" for="firstRadio">First radio</label>
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
</li>
<li class="list-group-item">
Added examples for Radios in List Group (#36644) * Add examples for Radios in List Group * Reduce the number of checkboxes and radios to 3 for consistency Drop aria-label on inputs and use label Use class stretched-link on labels to cover the whole list group item Check the first radio by default Remove radios from streched link examples Co-authored-by: Julien Déramond <juderamond@gmail.com>
2022-06-30 21:58:28 +02:00
<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
<label class="form-check-label" for="secondRadio">Second radio</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
<label class="form-check-label" for="thirdRadio">Third radio</label>
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
</li>
</ul>
{{< /example >}}
Added examples for Radios in List Group (#36644) * Add examples for Radios in List Group * Reduce the number of checkboxes and radios to 3 for consistency Drop aria-label on inputs and use label Use class stretched-link on labels to cover the whole list group item Check the first radio by default Remove radios from streched link examples Co-authored-by: Julien Déramond <juderamond@gmail.com>
2022-06-30 21:58:28 +02:00
You can use `.stretched-link` on `<label>`s to make the whole list group item clickable.
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
{{< example >}}
Added examples for Radios in List Group (#36644) * Add examples for Radios in List Group * Reduce the number of checkboxes and radios to 3 for consistency Drop aria-label on inputs and use label Use class stretched-link on labels to cover the whole list group item Check the first radio by default Remove radios from streched link examples Co-authored-by: Julien Déramond <juderamond@gmail.com>
2022-06-30 21:58:28 +02:00
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
<label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
<label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
<label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
</li>
</ul>
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
{{< /example >}}
Convert list group to CSS variables (#35862) * Convert list-group to CSS vars * bundlewatch
2022-03-22 18:02:12 +01:00
## CSS
Add Sass docs (variables, mixins, and loops) to most pages (#32747) * WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-11 04:29:59 +01:00
### Variables
Convert list group to CSS variables (#35862) * Convert list-group to CSS vars * bundlewatch
2022-03-22 18:02:12 +01:00
{{< added-in "5.2.0" >}}
As part of Bootstrap's evolving CSS variables approach, list groups now use local CSS variables on `.list-group` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
{{< scss-docs name="list-group-css-vars" file="scss/_list-group.scss" >}}
### Sass variables
Add Sass docs (variables, mixins, and loops) to most pages (#32747) * WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-11 04:29:59 +01:00
{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
### Sass mixins
Add Sass docs (variables, mixins, and loops) to most pages (#32747) * WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-11 04:29:59 +01:00
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s.
Add Sass docs (variables, mixins, and loops) to most pages (#32747) * WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-11 04:29:59 +01:00
{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
### Sass loop
Add Sass docs (variables, mixins, and loops) to most pages (#32747) * WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-11 04:29:59 +01:00
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
Loop that generates the modifier classes with an overriding of CSS variables.
Add Sass docs (variables, mixins, and loops) to most pages (#32747) * WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-11 04:29:59 +01:00
{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
v5: .form-check layout changes (#29322) * Scope .form-check-input layout to the .form-check parent * Remove margin-bottom from list-group-items in case they are label elements * document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 21:19:45 +02:00
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
## JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our list group to create tabbable panes of local content.
<div class="bd-example" role="tabpanel">
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab" 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="tab" 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="tab" 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="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
</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">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<p>Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p>
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<p>Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p>
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<p>Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p>
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
Replace Lorem Ipsum placeholder text with more representative (or at least english language) text (#32246) Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
2020-12-11 21:05:33 +01:00
<p>Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p>
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
</div>
</div>
</div>
</div>
</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```html
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
Docs: Tried to fix the issue #33650 (#33664) Prefixed the `aria-controls` with `list-` to match with `tabpanel` ids in `Javascript behavior` example in `List Group Component`.
2021-04-17 23:40:43 +02:00
<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>
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
</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>
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
### Using data attributes
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
You can activate a list group navigation without writing any JavaScript by simply specifying `data-bs-toggle="list"` or on an element. Use these data attributes on `.list-group-item`.
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```html
list-group.md: fix snippet (#31981)
2020-10-27 10:24:28 +01:00
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<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>
list-group.md: fix snippet (#31981)
2020-10-27 10:24:28 +01:00
</div>
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
list-group.md: fix snippet (#31981)
2020-10-27 10:24:28 +01:00
<!-- 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>
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
### Via JavaScript
Enable tabbable list item via JavaScript (each list item needs to be activated individually):
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```js
Docs: update documentation js examples, using es6 (#36203) * Docs: update components documentation using es6 * Docs: update js blocks around docs, using es6 * Docs: update components documentation using es6 * Test linter
2022-04-26 18:38:41 +02:00
const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
const tabTrigger = new bootstrap.Tab(triggerEl)
remove jquery references from list group
2019-08-04 11:55:37 +02:00
Docs: update documentation js examples, using es6 (#36203) * Docs: update components documentation using es6 * Docs: update js blocks around docs, using es6 * Docs: update components documentation using es6 * Test linter
2022-04-26 18:38:41 +02:00
triggerEl.addEventListener('click', event => {
docs: use `event` instead of `e` (#32226) It's better for clarity.
2020-11-21 16:00:38 +01:00
event.preventDefault()
remove jquery references from list group
2019-08-04 11:55:37 +02:00
tabTrigger.show()
})
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
})
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
You can activate individual list item in several ways:
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```js
Docs: update documentation js examples, using es6 (#36203) * Docs: update components documentation using es6 * Docs: update js blocks around docs, using es6 * Docs: update components documentation using es6 * Test linter
2022-04-26 18:38:41 +02:00
const triggerEl = document.querySelector('#myTab a[href="#profile"]')
remove jquery references from list group
2019-08-04 11:55:37 +02:00
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
Docs: update documentation js examples, using es6 (#36203) * Docs: update components documentation using es6 * Docs: update js blocks around docs, using es6 * Docs: update components documentation using es6 * Test linter
2022-04-26 18:38:41 +02:00
const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
remove jquery references from list group
2019-08-04 11:55:37 +02:00
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
### Fade effect
To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```html
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
<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>
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
### Methods
Set up a resuming table such as what's in other components.
2022-09-02 15:44:07 +02:00
{{< callout danger >}}
Docs: organize callouts in partials (#37320)
2022-10-16 18:09:33 +02:00
{{< partial "callouts/danger-async-methods.md" >}}
Set up a resuming table such as what's in other components.
2022-09-02 15:44:07 +02:00
{{< /callout >}}
remove jquery references from list group
2019-08-04 11:55:37 +02:00
Set up a resuming table such as what's in other components.
2022-09-02 15:44:07 +02:00
Activates your content as a tab element.
remove jquery references from list group
2019-08-04 11:55:37 +02:00
Set up a resuming table such as what's in other components.
2022-09-02 15:44:07 +02:00
You can create a tab instance with the constructor, for example:
remove jquery references from list group
2019-08-04 11:55:37 +02:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```js
Set up a resuming table such as what's in other components.
2022-09-02 15:44:07 +02:00
const bsTab = new bootstrap.Tab('#myTab')
Add `getOrCreateInstance` method in base-component (#33276) Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-06-03 17:53:27 +02:00
```
Set up a resuming table such as what's in other components.
2022-09-02 15:44:07 +02:00
{{< bs-table >}}
| Method | Description |
| --- | --- |
| `dispose` | Destroys an element's tab. |
| `getInstance` | Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`. |
| `getOrCreateInstance` | Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`. |
| `show` | Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs). |
{{< /bs-table >}}
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
### Events
When showing a new tab, the events fire in the following order:
1. `hide.bs.tab` (on the current active tab)
2. `show.bs.tab` (on the to-be-shown tab)
3. `hidden.bs.tab` (on the previous active tab, the same one as for the `hide.bs.tab` event)
4. `shown.bs.tab` (on the newly-active just-shown tab, the same one as for the `show.bs.tab` event)
Set up a resuming table such as what's in other components.
2022-09-02 15:44:07 +02:00
If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
Rewrite docs tables in Markdown with table shortcode (#31337) Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-03-14 08:38:04 +01:00
{{< bs-table >}}
| Event type | Description |
| --- | --- |
| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
Docs: quick fixes for HTML (#36395) * Using the new helper in the doc * Remove input from `Tab` access * Change scrollspy code examples * Reordering tables for JS * Fix for parcel file * Center align all the code example texts in layout * Alphabetical reorder the helpers
2022-05-20 19:21:48 +02:00
| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
Rewrite docs tables in Markdown with table shortcode (#31337) Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-03-14 08:38:04 +01:00
{{< /bs-table >}}
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
2017-04-02 11:21:04 +02:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```js
Docs: update documentation js examples, using es6 (#36203) * Docs: update components documentation using es6 * Docs: update js blocks around docs, using es6 * Docs: update components documentation using es6 * Test linter
2022-04-26 18:38:41 +02:00
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
tabElm.addEventListener('shown.bs.tab', event => {
querySelector will only select the first element. Adjust to QuerySelectorAll
2021-04-22 15:24:17 +02:00
event.target // newly activated tab
event.relatedTarget // previous active tab
})
Docs: update documentation js examples, using es6 (#36203) * Docs: update components documentation using es6 * Docs: update js blocks around docs, using es6 * Docs: update components documentation using es6 * Test linter
2022-04-26 18:38:41 +02:00
})
docs: switch to fenced codeblocks (#31806)
2020-10-19 11:56:49 +02:00
```
Reference in New Issue Copy Permalink