AisListGroup

List groups are a flexible and powerful component for displaying a series of content. List group items can be modified to support just about any content within. They can also be used as navigation via various props.

Basic Usage

Using Default Slot

List Group Item #1

List Group Item #2

List Group Item #3

List Group Item #4

Using 'Items' Prop

List Group Item #1

List Group Item #2

List Group Item #3

List Group Item #4

Active items

Set the active prop on AisListGroupItem to indicate the current active selection.

List Group Item #1

List Group Item #2

List Group Item #3

List Group Item #4

Disabled items

Set the disabled prop on AisListGroupItem to make it appear disabled (also works with actionable items. see below).

List Group Item #1

List Group Item #2

List Group Item #3

List Group Item #4

Actionable items

Turn a AisListGroupItem into an actionable link by specifying either a href prop or to prop. Or set the action prop to emit a click event and behave more like a button.

List Group Item #1

List Group Item #2

List Group Item #3

List Group Item #4

With Badges

Add AisBadges to any list group item to show unread counts, activity, and more with the help of some flex utility classes.

List Group Item #1 23

List Group Item #2 17

List Group Item #3 11

List Group Item #4 2

Custom Content

Add nearly any HTML or component within.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

Inside AisCard

Incorporate list groups into cards. Use prop flush on the AisListGroup when using AisCard with no-body prop to make the sides of the list group flush with the card.

Card with flush list group

List Group Item #1

List Group Item #2

List Group Item #3

List Group Item #4

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem.

Card with list group

List Group Item #1

List Group Item #2

List Group Item #3

List Group Item #4

Component Reference

Props

Property 1	Type(s)	Description	Required	Default
flush	`Boolean`	Boolean prop to be used when nested inside a card that has `no-body` prop set to `true`. This helps ensure that there is no margin around the list group		`false`
items	`Array`	Array of AisListGroupItem objects. These objects could contain any AisListGroupItem props		`[]`

Slots

Name 1	Scoped	Description
default	No	Scoped slot for custom rendering the list group items

Events

Event 1	Arguments	Description

List Group Item Props

Property 1	Type(s)	Description	Default
action	`Boolean`	Boolean prop to indicate click event should be emitted, sets cursor to pointer, and adds hover effect	`false`
active	`Boolean`	Boolean prop to indicate this list group item is active. Adds `.active` to the list group item.	`false`
disabled	`Boolean`	Places component in a disabled state, when `true`	`false`
href	`String`	When provided, the list group will be a link to the provided `href` value	`''`
icon	`Undefined`	Accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons	`undefined`
iconClass	`Array`, `String`	Class(es) to apply to the icon, if present	`''`
label	`String`	The text for the list group item label	`''`
to	`String`	When provided, the list group will be a link to the provided `to` path	`''`

List Group Item Slots

Name 1	Scoped	Description
default		Scoped slot for custom rendering the list group item label

List Group Item Events

Event 1	Arguments	Description
click	event `object` - Native event object	Emitted when the list group item is clicked Note: This is only emitted when `href` and `to` are both empty AND `action` prop is true

AisInputGroup

AisLogo

AisListGroup #

Basic Usage #

Active items #

Disabled items #

Actionable items #

With Badges #

Custom Content #

List group item heading

List group item heading

List group item heading

Inside AisCard #

Component Reference #

Props #

Slots #

Events #

List Group Item Props #

List Group Item Slots #

List Group Item Events #

AisListGroup

Basic Usage

Active items

Disabled items

Actionable items

With Badges

Custom Content

Inside AisCard

Component Reference

Props

Slots

Events

List Group Item Props

List Group Item Slots

List Group Item Events