Vue List group - free examples & tutorial (original) (raw)

Vue Bootstrap 5 List group component

Responsive Vue List group built with the latest Bootstrap 5. Multiple code examples, a user-friendly guide, extensive API, and customization tools.

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.

Note: Read the API tab to find all available options and advanced customization

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.

An item
A second item
A third item
A fourth item
And a fifth one

Small

If you need a more compact list, add small prop to a MDBListGroup which will reduce the padding of the items in the list.

An item
A second item
A third item
A fourth item
And a fifth one

Active items

Add active prop to a MDBListGroupItem to indicate the current active selection. You also need to add extra spacing prop to MDBListGroupItem to keep the text from sticking to the edge of the list and noBorder prop to a MDBListGroup remove borders between items.

An active item
A second item
A third item
A fourth item
And a fifth one

Disabled items

Add disabled to a MDBListGroupItem 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).

An disabled item
A second item
A third item
A fourth item
And a fifth one

Links and buttons

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by addingMDBListGroupItem 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.

Be sure to not use the standard .btn classes here.

Buttons

With <button>s, you can also make use of the disabled prop.

Ripple

You can also add a ripple to the item. Click it, to see the effect.

No borders

Add noBorder props to the items to remove all the borders.

An item
A second item
A third item
A fourth item
And a fifth one

Numbered

Add the numbered property 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.

Numbers are generated by counter-reset on the <ol>, and then styled and placed with a ::before psuedo-element on the<li> with counter-increment and content.

A list item
A list item
A list item

These work great with custom content as well.

Subheading
Content for list item
14
Subheading
Content for list item
14
Subheading
Content for list item
14

Horizontal

Add horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive varianthorizontal={sm|md|lg|xl|xxl} to make a list group horizontal starting at that breakpoint’s min-width. Currentlyhorizontal list groups cannot be combined with flush or light list groups.

ProTip: Want equal-width list group items when horizontal? Add.flex-fill to each list group item.

An item
A second item
A third item
An item
A second item
A third item
An item
A second item
A third item
An item
A second item
A third item
An item
A second item
A third item
An item
A second item
A third item

Contextual props

Use contextual color props to style list items with a stateful background and color.

Dapibus ac facilisis in
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

Contextual props also work withMDBListGroupItem 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.

Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the.visually-hidden class.

Badges

Add badges to any list group item to show unread counts, activity, and more with the help of some flexbox utilities.

A list item14
A second list item2
A third list item1

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help offlexbox utilities.

John Doe
john.doe@gmail.com
Active
Alex Ray
alex.ray@gmail.com
Onboarding
Kate Hunington
kate.hunington@gmail.com
Awaiting

Checkboxes

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 anaria-label attribute and value for accessibility.

First checkbox
Second checkbox
Third checkbox
Fourth checkbox
Fifth checkbox

And if you want <label>s as the MDBListGroupItem for large hit areas, you can do that, too.

First checkbox Second checkbox Third checkbox Fourth checkbox Fifth checkbox

JavaScript behavior

Use the tab JavaScript plugin to extend our list group to create tabbable panes of local content.

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.

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.

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.

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.

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.

Additional examples

A few additional, practical examples with different types of content and elements.

Images

John Doe
john.doe@gmail.com
Active
Alex Ray
alex.ray@gmail.com
Onboarding
Kate Hunington
kate.hunington@gmail.com
Awaiting

Headings

Marketing team

Design team

Action buttons

John Doe
john.doe@gmail.com
View
Alex Ray
alex.ray@gmail.com
View
Kate Hunington
kate.hunington@gmail.com
View

CTA

Our company starts its operations

11 March 2020
Some placeholder content in a paragraph relating to "Our company starts its operations". 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.

First customer

19 March 2020
Some placeholder content in a paragraph relating to "First customer". 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.

Our team exceeds 10 people

24 June 2020
Some placeholder content in a paragraph relating to "Our team exceeds 10 people". 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.

View all