Skip to content
On this page

List Group

Displaying a series of content

Usage

Basic Usage

A list itemSecond itemThe third itemAnd the last itempreview
vue
<template>
  <p-list-group>
    <p-list-group-item>A list item</p-list-group-item>
    <p-list-group-item>Second item</p-list-group-item>
    <p-list-group-item>The third item</p-list-group-item>
    <p-list-group-item>And the last item</p-list-group-item>
  </p-list-group>
</template>

Active item

First item activeSecond itemThe third itemAnd the last itempreview
vue
<template>
  <p-list-group>
    <p-list-group-item active>First item active</p-list-group-item>
    <p-list-group-item>Second item</p-list-group-item>
    <p-list-group-item>The third item</p-list-group-item>
    <p-list-group-item>And the last item</p-list-group-item>
  </p-list-group>
</template>

Disabled item

First item disabledSecond itemThe third itemAnd the last itempreview
vue
<template>
  <p-list-group>
    <p-list-group-item disabled>First item disabled</p-list-group-item>
    <p-list-group-item>Second item</p-list-group-item>
    <p-list-group-item>The third item</p-list-group-item>
    <p-list-group-item>And the last item</p-list-group-item>
  </p-list-group>
</template>
vue
<template>
  <p-list-group>
    <p-list-group-item element="link" href="#">
      A First item
    </p-list-group-item>
    <p-list-group-item element="link" href="#">
      Second item
    </p-list-group-item>
    <p-list-group-item element="link" href="#">
      The third item
    </p-list-group-item>
    <p-list-group-item element="link" href="#">
      And the last item
    </p-list-group-item>
  </p-list-group>
</template>

Variant

Flush

First item disabledSecond item activeThe third itemAnd the last itempreview
vue
<template>
  <p-list-group flush>
    <p-list-group-item disabled>First item disabled</p-list-group-item>
    <p-list-group-item active>Second item active</p-list-group-item>
    <p-list-group-item>The third item</p-list-group-item>
    <p-list-group-item>And the last item</p-list-group-item>
  </p-list-group>
</template>

Horizontal

First item disabledSecond item activeThe third itemAnd the last itempreview
vue
<template>
  <p-list-group horizontal>
    <p-list-group-item disabled>First item disabled</p-list-group-item>
    <p-list-group-item active>Second item active</p-list-group-item>
    <p-list-group-item>The third item</p-list-group-item>
    <p-list-group-item>And the last item</p-list-group-item>
  </p-list-group>
</template>

Borderless

First item disabledSecond item activeThe third itemAnd the last itempreview
vue
<template>
  <p-list-group borderless>
    <p-list-group-item disabled>First item disabled</p-list-group-item>
    <p-list-group-item>Second item</p-list-group-item>
    <p-list-group-item>The third item</p-list-group-item>
    <p-list-group-item>And the last item</p-list-group-item>
  </p-list-group>
</template>

Combination

Avatar Image
Danish Brown
Second itemThe third itemAnd the last item
preview
vue
<template>
  <p-list-group rounded borderless class="space-y-2" 
    style="--p-list-group-bg: transparent; --p-list-group-bg-dark: transparent;">
    <p-list-group-item class="shadow-sm">
      <span class="flex items-center space-x-3">
        <p-avatar size="sm" />
        <span>Danish Brown</span>
      </span>
    </p-list-group-item>
    <p-list-group-item class="shadow-sm">
      Second item
    </p-list-group-item>
    <p-list-group-item class="shadow-sm">
      The third item
    </p-list-group-item>
    <p-list-group-item class="shadow-sm">
      And the last item
    </p-list-group-item>
  </p-list-group>
</template>

Custom Content

With badge

A First Item4kSecond Item25The third item7preview
vue
<template>
  <p-list-group>
    <p-list-group-item>
      <span class="flex items-center justify-between">
        <span>A First Item</span>
        <span>
          <p-badge color="info">4k</p-badge>
        </span>
      </span>
    </p-list-group-item>
    <p-list-group-item>
      <span class="flex items-center justify-between">
        <span>Second Item</span>
        <span>
          <p-badge color="info">25</p-badge>
        </span>
      </span>
    </p-list-group-item>
    <p-list-group-item>
      <span class="flex items-center justify-between">
        <span>The third item</span>
        <span>
          <p-badge color="info">7</p-badge>
        </span>
      </span>
    </p-list-group-item>
  </p-list-group>
</template>

Posts

But I must explain to you
2 days ago

how all this mistaken idea of denouncing pleasure and praising pain was born

I will give you a complete
But I must explain to you
2 days ago

how all this mistaken idea of denouncing pleasure and praising pain was born

I will give you a complete
But I must explain to you
2 days ago

how all this mistaken idea of denouncing pleasure and praising pain was born

I will give you a complete
preview
vue
<template>
  <p-list-group>
    <p-list-group-item>
      <span class="flex items-center justify-between">
        <p-heading element="h6">
          But I must explain to you
        </p-heading>
        <p-caption>2 days ago</p-caption>
      </span>
      <p class="max-w-md py-2">
        how all this mistaken idea of 
        denouncing pleasure and praising pain was born
      </p>
      <p-caption>I will give you a complete</p-caption>
    </p-list-group-item>
    <p-list-group-item>
      <span class="flex items-center justify-between">
        <p-heading element="h6">
          But I must explain to you
        </p-heading>
        <p-caption>2 days ago</p-caption>
      </span>
      <p class="max-w-md py-2">
        how all this mistaken idea of 
        denouncing pleasure and praising pain was born
      </p>
      <p-caption>I will give you a complete</p-caption>
    </p-list-group-item>
    <p-list-group-item>
      <span class="flex items-center justify-between">
        <p-heading element="h6">
          But I must explain to you
        </p-heading>
        <p-caption>2 days ago</p-caption>
      </span>
      <p class="max-w-md py-2">
        how all this mistaken idea of 
        denouncing pleasure and praising pain was born
      </p>
      <p-caption>I will give you a complete</p-caption>
    </p-list-group-item>
  </p-list-group>
</template>

Notification

Cooperation Agreement Letter.pdf
Done
Avatar Image
Nancy (NS9999) has reviewed the document
Cooperation Agreement Letter.pdf.pdf
Avatar Image
Ozman (OT9999) Mention you in discussion
Cooperation Agreement Letter.pdf.pdf
What is this document for, @Jane? please give a complete explanation
preview
vue
<template>
  <p-list-group>
    <p-list-group-item>
      <span class="flex items-center space-x-3">
        <span class="flex items-center justify-center w-10 h-10 rounded-full bg-base dark:bg-dark-base shrink-0">
          <IconCheck class="text-success dark:text-dark-success" />
        </span>
        <span>
          <p-subheading>Cooperation Agreement Letter.pdf</p-subheading>
          <p-caption class="!text-success">Done</p-caption>
        </span>
      </span>
    </p-list-group-item>
    <p-list-group-item>
      <span class="flex items-center space-x-3">
        <span>
          <p-avatar />
        </span>
        <span>
          <p-subheading>
            Nancy (NS9999) has reviewed the document
          </p-subheading>
          <p-caption class="!flex items-center">
            <IconDocument class="mr-2" /> Cooperation Agreement Letter.pdf.pdf
          </p-caption>
        </span>
      </span>
    </p-list-group-item>
    <p-list-group-item>
      <span class="flex items-start space-x-3">
        <span>
          <p-avatar src="https://picsum.photos/50" />
        </span>
        <span>
          <p-subheading>
            Ozman (OT9999) Mention you in discussion
          </p-subheading>
          <p-caption class="!flex items-center">
            <IconDocument class="mr-2" /> Cooperation Agreement Letter.pdf.pdf
          </p-caption>
          <p-card style="--p-card-padding-y: 4px; --p-card-padding-x: 8px;" class="mt-3">
            What is this document for, @Jane? 
            please give a complete explanation
          </p-card>
        </span>
      </span>
    </p-list-group-item>
  </p-list-group>
</template>

Variables

List group use local CSS variables for enhanced real-time customization.

List Group

sass
--p-list-group-bg: theme(backgroundColor.default.DEFAULT);
--p-list-group-bg-dark: theme(backgroundColor.dark.default.DEFAULT);

List Group Item

sass
--p-list-item-bg: theme(backgroundColor.default.DEFAULT);
--p-list-item-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
--p-list-item-bg-active: theme(backgroundColor.default.alpha);
--p-list-item-bg-active-dark: theme(backgroundColor.dark.default.alpha);
--p-list-item-padding-x: theme(spacing.4);
--p-list-item-padding-y: theme(spacing.2);

API

Props <p-list-group>

PropsTypeDefaultDescription
flushBooleanfalseEnable flush, list group without container-border
horizontalBooleanfalseEnable horizontal list group
borderlessBooleanfalseRemove all border in list group
roundedBooleanfalseEnable rounded in each list group item

Slots <p-list-group>

NameDescription
defaultList group content

Events <p-list-group>

NameArgumentsDescription
There no event here

Props <p-list-group-item>

PropsTypeDefaultDescription
activeBooleanfalseActive state of list group item
disabledBooleanfalseDisable state of list group item
elementBooleanfalseChange tag element of list group item, valid value is div, span and link

Slots <p-list-group-item>

NameDescription
defaultList group item content

Events <p-list-group-item>

NameArgumentsDescription
There no event here

Released under the MIT License.