List Group
List groups support any content inside of them. Take advantage of their flexibility to display list of items, as well as vertical navigation.
<template>
<IListGroup>
<IListGroupItem active>Active</IListGroupItem>
<IListGroupItem href="https://inkline.io">Link</IListGroupItem>
<IListGroupItem :to="{ path: '/docs/components/list-group' }">Router Link</IListGroupItem>
<IListGroupItem>Item</IListGroupItem>
<IListGroupItem disabled>Disabled</IListGroupItem>
</IListGroup>
</template>
Behind the scenes, the <IListGroupItem> is converted into a <RouterLink> if it has the :to property, or a plain <a> tag if it has a href property. Otherwise, it uses a simple <div> tag.
The list group component comes with a predefined set of basic color variants. You can set the color of a list group using the color property.
<template>
<IListGroup color="light">
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
</IListGroup>
<IListGroup color="dark">
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
</IListGroup>
</template>
You're able to use the size modifier to control the padding of your list groups, using one of the available sizes: sm, md, and lg. The default size is set to md.
<template>
<IListGroup size="sm">
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
</IListGroup>
<IListGroup size="md">
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
</IListGroup>
<IListGroup size="lg">
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
</IListGroup>
</template>
You can control the active state of your <IListGroupItem> using the active property.
If you're providing a to property, the list group item will be converted into a router-link or nuxt-link. You can use the active-class and exact-active-class properties and set them to -active when using it as a routing component.
<template>
<IListGroup>
<IListGroupItem :to="{ path: '/docs/components/list-group' }" exact-active-class="-active">
Active Router Link
</IListGroupItem>
<IListGroupItem :to="{ path: '/docs' }" active> Active Item </IListGroupItem>
</IListGroup>
</template>
You can control the disabled state of your <IListGroupItem> using the disabled property.
<template>
<IListGroup>
<IListGroupItem disabled>Disabled List Group Item</IListGroupItem>
</IListGroup>
</template>
You can disable the border of your list group by setting the border property to false.
<template>
<IListGroup :border="false">
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
<IListGroupItem>List Group Item</IListGroupItem>
</IListGroup>
</template>
The <IListGroupItem> accepts any type of content, allowing you to create large sized list group items.
<template>
<IListGroup>
<IListGroupItem>
<h4>List Group Heading</h4>
<p class="_margin:0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</IListGroupItem>
<IListGroupItem>
<h4>List Group Heading</h4>
<p class="_margin:0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</IListGroupItem>
<IListGroupItem>
<h4>List Group Heading</h4>
<p class="_margin:0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</IListGroupItem>
</IListGroup>
</template>
<script setup></script>
IListGroup
IListGroupItem
IListGroup
IListGroupItem
IListGroup
IListGroupItem