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

<template>
  <div class="grid grid-cols-2 gap-20">
    <div class="flex flex-col gap-1">
      <div class="font-bold text-base text-center">Using Default Slot</div>
      <AisListGroup>
        <AisListGroupItem>List Group Item #1</AisListGroupItem>
        <AisListGroupItem>List Group Item #2</AisListGroupItem>
        <AisListGroupItem>List Group Item #3</AisListGroupItem>
        <AisListGroupItem>List Group Item #4</AisListGroupItem>
      </AisListGroup>
    </div>

    <div class="flex flex-col gap-1">
      <div class="font-bold text-base text-center">Using 'Items' Prop</div>
      <AisListGroup :items="items"></AisListGroup>
    </div>
  </div>
</template>

<script setup>

  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';
  import {ref} from "vue";

  const items = ref([
      'List Group Item #1',
      'List Group Item #2',
      'List Group Item #3',
      'List Group Item #4',
  ])
</script>

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

<template>
  <AisListGroup class="max-w-[400px]">
    <AisListGroupItem icon="list">List Group Item #1</AisListGroupItem>
    <AisListGroupItem icon="list" active>List Group Item #2</AisListGroupItem>
    <AisListGroupItem icon="list">List Group Item #3</AisListGroupItem>
    <AisListGroupItem icon="list">List Group Item #4</AisListGroupItem>
  </AisListGroup>
</template>

<script setup>
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';
</script>

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

<template>
  <AisListGroup class="max-w-[400px]">
    <AisListGroupItem>List Group Item #1</AisListGroupItem>
    <AisListGroupItem>List Group Item #2</AisListGroupItem>
    <AisListGroupItem disabled>List Group Item #3</AisListGroupItem>
    <AisListGroupItem>List Group Item #4</AisListGroupItem>
  </AisListGroup>
</template>

<script setup>
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';
</script>

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

<template>
  <AisListGroup class="max-w-[400px]">
    <AisListGroupItem to="/item/1">List Group Item #1</AisListGroupItem>
    <AisListGroupItem href="/item/2" active>List Group Item #2</AisListGroupItem>
    <AisListGroupItem to="/item/3" disabled>List Group Item #3</AisListGroupItem>
    <AisListGroupItem action @click="handleClick">List Group Item #4</AisListGroupItem>
  </AisListGroup>
</template>

<script setup>
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';

  const handleClick = (e) => console.log(`4.click...`)
</script>

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

<template>
  <AisListGroup class="max-w-[400px]">
    <AisListGroupItem>
      <div class="flex justify-between items-center">
        List Group Item #1
        <AisBadge variant="info" size="sm">23</AisBadge>
      </div>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex justify-between items-center">
        List Group Item #2
        <AisBadge variant="info" size="sm">17</AisBadge>
      </div>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex justify-between items-center">
        List Group Item #3
        <AisBadge variant="info" size="sm">11</AisBadge>
      </div>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex justify-between items-center">
        List Group Item #4
        <AisBadge variant="info" size="sm">2</AisBadge>
      </div>
    </AisListGroupItem>
  </AisListGroup>
</template>

<script setup>
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';
  import AisBadge from "@/components/badge/AisBadge.vue";
</script>

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.

<template>
  <AisListGroup class="max-w-[400px]">
    <AisListGroupItem>
      <div class="flex w-100 justify-between">
        <h5 class="mb-1 text-xl leading-normal">List group item heading</h5>
        <small>3 days ago</small>
      </div>

      <p class="mb-1 mt-1 text-base">
        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
      </p>

      <small>Donec id elit non mi porta.</small>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex w-100 justify-between">
        <h5 class="mb-1 text-xl leading-normal">List group item heading</h5>
        <small>3 days ago</small>
      </div>

      <p class="mb-1 mt-1 text-base">
        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
      </p>

      <small>Donec id elit non mi porta.</small>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex w-100 justify-between">
        <h5 class="mb-1 text-xl leading-normal">List group item heading</h5>
        <small>3 days ago</small>
      </div>

      <p class="mb-1 mt-1 text-base">
        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
      </p>

      <small>Donec id elit non mi porta.</small>
    </AisListGroupItem>
  </AisListGroup>
</template>

<script setup>
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';
</script>

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

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.

<template>
  <div class="grid grid-cols-2 gap-4">
    <div>
      <AisCard no-body header="Card with flush list group">
        <AisListGroup flush>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
        </AisListGroup>

        <AisCardBody>
          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.
        </AisCardBody>

      </AisCard>
    </div>

    <div>
      <AisCard header="Card with list group">
        <AisListGroup>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
        </AisListGroup>

        <div class="mt-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.
        </div>

      </AisCard>
    </div>
  </div>
</template>

<script setup>
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';
  import AisCard from "@/components/card/AisCard.vue";
  import AisCardBody from "@/components/card/AisCardBody.vue";
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
flush	Boolean		false	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	false

Slots

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

Events

Event	Arguments	Description

List Group Item Props

Property	Type(s)	Required	Default	Description	Deprecated
action	Boolean		false	Boolean prop to indicate click event should be emitted, sets cursor to pointer, and adds hover effect	false
active	Boolean		false	Boolean prop to indicate this list group item is active. Adds .active to the list group item.	false
disabled	Boolean		false	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	false
icon	Undefined		undefined	Accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons	false
iconClass	Array, String		''	Class(es) to apply to the icon, if present	false
label	String		''	The text for the list group item label	false
to	String		''	When provided, the list group will be a link to the provided to path	false

List Group Item Slots

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

List Group Item Events

Event	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