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>

Link

A First item Second item The third item And the last itempreview

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

Danish BrownSecond itemThe third itemAnd the last itempreview

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 completepreview

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

Nancy (NS9999) has reviewed the document

Cooperation Agreement Letter.pdf.pdf

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>`

Props	Type	Default	Description
`flush`	`Boolean`	`false`	Enable flush, list group without container-border
`horizontal`	`Boolean`	`false`	Enable horizontal list group
`borderless`	`Boolean`	`false`	Remove all border in list group
`rounded`	`Boolean`	`false`	Enable rounded in each list group item

Slots `<p-list-group>`

Name	Description
`default`	List group content

Events `<p-list-group>`

Name	Arguments	Description
There no event here

Props `<p-list-group-item>`

Props	Type	Default	Description
`active`	`Boolean`	`false`	Active state of list group item
`disabled`	`Boolean`	`false`	Disable state of list group item
`element`	`Boolean`	`false`	Change tag element of list group item, valid value is `div`, `span` and `link`

Slots `<p-list-group-item>`

Name	Description
`default`	List group item content

Events `<p-list-group-item>`

Name	Arguments	Description
There no event here

List Group ​

Usage ​

Basic Usage ​

Active item ​

Disabled item ​

Link ​

Variant ​

Flush ​

Horizontal ​

Borderless ​

Combination ​

Custom Content ​

With badge ​

Posts ​

But I must explain to you

But I must explain to you

But I must explain to you

Notification ​

Cooperation Agreement Letter.pdf

Nancy (NS9999) has reviewed the document

Ozman (OT9999) Mention you in discussion

Variables ​

List Group ​

List Group Item ​

API ​

Props <p-list-group> ​

Slots <p-list-group> ​

Events <p-list-group> ​

Props <p-list-group-item> ​

Slots <p-list-group-item> ​

Events <p-list-group-item> ​

List Group

Usage

Basic Usage

Active item

Disabled item

Link

Variant

Flush

Horizontal

Borderless

Combination

Custom Content

With badge

Posts

Notification

Variables

List Group

List Group Item

API

Props `<p-list-group>`

Slots `<p-list-group>`

Events `<p-list-group>`

Props `<p-list-group-item>`

Slots `<p-list-group-item>`

Events `<p-list-group-item>`