From 3ea39841c8049525e31e9f4d6300f0c60cdb42de Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Tue, 24 Jan 2023 13:33:51 +0100 Subject: Adding upstream version 5.2.3+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.2/components/list-group.md | 494 +++++++++++++++++++++++++ 1 file changed, 494 insertions(+) create mode 100644 site/content/docs/5.2/components/list-group.md (limited to 'site/content/docs/5.2/components/list-group.md') diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md new file mode 100644 index 0000000..7804c74 --- /dev/null +++ b/site/content/docs/5.2/components/list-group.md @@ -0,0 +1,494 @@ +--- +layout: docs +title: List group +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. +group: components +toc: true +--- + +## Basic example + +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. + +{{< example >}} + +{{< /example >}} + +## Active items + +Add `.active` to a `.list-group-item` to indicate the current active selection. + +{{< example >}} + +{{< /example >}} + +## Disabled items + +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). + +{{< example >}} + +{{< /example >}} + +## Links and buttons + +Use ``s or ` + + + + + +{{< /example >}} + +## 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). + +{{< example >}} +
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • +
+{{< /example >}} + +## Numbered + +Add the `.list-group-numbered` modifier class (and optionally use an `
    ` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `
      `s default browser styling) for better placement inside list group items and to allow for better customization. + +Numbers are generated by `counter-reset` on the `
        `, and then styled and placed with a `::before` pseudo-element on the `
      1. ` with `counter-increment` and `content`. + +{{< example >}} +
          +
        1. A list item
          2. +
        2. A list item
          3. +
        3. A list item
          4. +
        +{{< /example >}} + +These work great with custom content as well. + +{{< example >}} +
          +
        1. +
          +
          Subheading
          + Content for list item +
          + 14 +
          2. +
        2. +
          +
          Subheading
          + Content for list item +
          + 14 +
          3. +
        3. +
          +
          Subheading
          + Content for list item +
          + 14 +
          4. +
        +{{< /example >}} + +## Horizontal + +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.** + +**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. + +{{< example >}} +{{< list-group.inline >}} +{{- range $.Site.Data.breakpoints }} +
          +
        • An item
          • +
        • A second item
          • +
        • A third item
          • +
        +{{- end -}} +{{< /list-group.inline >}} +{{< /example >}} + +## Contextual classes + +Use contextual classes to style list items with a stateful background and color. + +{{< example >}} +
          +
        • A simple default list group item
          • +{{< list.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +
        • A simple {{ .name }} list group item
          • +{{- end -}} +{{< /list.inline >}} +
        +{{< /example >}} + +Contextual classes also work with `.list-group-item-action`. 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. + +{{< example >}} +
        + A simple default list group item +{{< list.inline >}} +{{- range (index $.Site.Data "theme-colors") }} + A simple {{ .name }} list group item +{{- end -}} +{{< /list.inline >}} +
        +{{< /example >}} + +{{< callout info >}} +{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< /callout >}} + +## With badges + +Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{< docsref "/utilities/flex" >}}). + +{{< example >}} +
          +
        • + A list item + 14 +
          • +
        • + A second list item + 2 +
          • +
        • + A third list item + 1 +
          • +
        +{{< /example >}} + +## Custom content + +Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{< docsref "/utilities/flex" >}}). + +{{< example >}} +
        + +
        +
        List group item heading
        + 3 days ago +
        +

        Some placeholder content in a paragraph.

        + And some small print. +         + +
        +
        List group item heading
        + 3 days ago +
        +

        Some placeholder content in a paragraph.

        + And some muted small print. +         + +
        +
        List group item heading
        + 3 days ago +
        +

        Some placeholder content in a paragraph.

        + And some muted small print. +         +
        +{{< /example >}} + +## Checkboxes and radios + +Place Bootstrap's checkboxes and radios within list group items and customize as needed. You can use them without `