`<c-list>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-list bordered>
      <c-list-item
        v-for="item in items"
        :key="item.label"
        ripple
        :active.prop="selected === item.label"
        @click="selected = item.label"
      >
        <c-icon slot="pre" :path="item.icon" />

        <c-list-item-title>{{ item.label }}</c-list-item-title>
      </c-list-item>
    </c-list>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { mdiAccount, mdiBell, mdiCog } from '@mdi/js';

const items = [
  { icon: mdiAccount, label: 'Profile' },
  { icon: mdiBell, label: 'Notifications' },
  { icon: mdiCog, label: 'Settings' },
];

const selected = ref('Profile');
</script>

Basic · c-list-item

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-list>
      <c-list-item hoverable>
        <c-icon slot="pre" :path="mdiAccount" />

        <c-list-item-title>Profile</c-list-item-title>
      </c-list-item>

      <c-list-item active>
        <c-icon slot="pre" :path="mdiBell" />

        <c-list-item-title>Notifications</c-list-item-title>

        <c-icon slot="post" :path="mdiChevronRight" />
      </c-list-item>

      <c-list-item disabled>
        <c-icon slot="pre" :path="mdiCog" />

        <c-list-item-title>Settings</c-list-item-title>
      </c-list-item>
    </c-list>
  </div>
</template>

<script setup lang="ts">
import { mdiAccount, mdiBell, mdiChevronRight, mdiCog } from '@mdi/js';
</script>

Basic · c-list-item-title

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-list>
      <c-list-item>
        <c-list-item-title>Profile</c-list-item-title>
      </c-list-item>

      <c-list-item active>
        <c-list-item-title>Notifications</c-list-item-title>
      </c-list-item>

      <c-list-item>
        <c-list-item-title>Settings</c-list-item-title>
      </c-list-item>
    </c-list>
  </div>
</template>

API reference

`<c-list>`

Properties

Property	Attribute	Type	Default	Description
`bordered`	`bordered`	`boolean`	`false`	Show border arount the list items
`disabled`	`disabled`	`boolean`	`false`	Disable the list

Slots

Slot	Description
`default`	c-list-item components of the list

CSS parts

Style from outside with c-list::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The grid container laying out the list items

`<c-list-item>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Set the item active
`disabled`	`disabled`	`boolean`	`false`	Disable the item
`disabledByParent`	`disabled-by-parent`	`boolean`	`false`	Disabled by the parent list
`hoverable`	`hoverable`	`boolean`	`false`	Display background color on hover
`href`	`href`	`string`	`''`	Hyperlink url
`ripple`	`ripple`	`boolean`	`false`	Add ripple effect to the item
`target`	`target`	`string`	`'_blank'`	Hyperlink target

Slots

Slot	Description
`pre`	Leading content (e.g. an icon) shown before the item's main content
`default`	Main content of the item, e.g. a c-list-item-title
`post`	Trailing content (e.g. an icon or action) shown after the item's main content

CSS parts

Style from outside with c-list-item::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The item's content box — a `<div>`, or an `<a>` when `href` is set

`<c-list-item-title>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Set the title active

Slots

Slot	Description
`default`	The title text of the list item

CSS parts

Style from outside with c-list-item-title::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The element wrapping the title text