From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:36 +0200 Subject: Adding upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.3/components/list-group.md | 502 +++++++++++++++++++++++++ 1 file changed, 502 insertions(+) create mode 100644 site/content/docs/5.3/components/list-group.md (limited to 'site/content/docs/5.3/components/list-group.md') diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md new file mode 100644 index 0000000..6c22809 --- /dev/null +++ b/site/content/docs/5.3/components/list-group.md @@ -0,0 +1,502 @@ +--- +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 >}} + +## 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 [a Sass loop](#sass-loops). +{{< /callout >}} + +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 >}} + +### For links and buttons + +Contextual classes also work with `.list-group-item-action` for `        ` and `