Vuse-UI

Appearance

Return to top
On this page

List

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

Basic

Vuse Title 1
Vuse Title 2
Vuse Title 3
Vuse Title 4

Basic
Basic list.
<template>
  <v-list>
    <v-list-item v-for="(item, index) in data" :key="index">{{ item.title }}</v-list-item>
  </v-list>
</template>
<script setup lang="ts">
interface DataItem {
  title: string;
}
const data: DataItem[] = [
  {
    title: 'Vuse Title 1',
  },
  {
    title: 'Vuse Title 2',
  },
  {
    title: 'Vuse Title 3',
  },
  {
    title: 'Vuse Title 4',
  },
];
</script>

Border

props.nameET
Vuse Title 1
props.nameET
Vuse Title 2
props.nameET
Vuse Title 3
props.nameET
Vuse Title 4

Border
Use the bordered attribute to render the border around the list.
<template>
  <v-list bordered>
    <v-list-item v-for="(item, index) in data" :key="index">
      <div :style="{ display: 'flex', alignItems: 'center' }">
        <v-avatar name="Eobard Thawne" size="32px" />
        <span :style="{ marginLeft: '15px' }"> {{ item.title }}</span>
      </div>
    </v-list-item>
  </v-list>
</template>
<script setup lang="ts">
interface DataItem {
  title: string;
}
const data: DataItem[] = [
  {
    title: 'Vuse Title 1',
  },
  {
    title: 'Vuse Title 2',
  },
  {
    title: 'Vuse Title 3',
  },
  {
    title: 'Vuse Title 4',
  },
];
</script>

Size

Mini Size

props.nameET
Vuse Title 1
props.nameET
Vuse Title 2
props.nameET
Vuse Title 3
props.nameET
Vuse Title 4

Default Size

props.nameET
Vuse Title 1
props.nameET
Vuse Title 2
props.nameET
Vuse Title 3
props.nameET
Vuse Title 4

Large Size

props.nameET
Vuse Title 1
props.nameET
Vuse Title 2
props.nameET
Vuse Title 3
props.nameET
Vuse Title 4

Size
Vuse supports a default list size as well as a large and mini size. If a large or mini list is desired, set the size property to either large or mini respectively. Omit the size property for a list with the default size.
<template>
  <h4 :style="{ margin: '16px 0' }">Mini Size</h4>
  <v-list bordered size="mini">
    <v-list-item v-for="(item, index) in data" :key="index">
      <div :style="{ display: 'flex', alignItems: 'center' }">
        <v-avatar name="Eobard Thawne" size="32px" />
        <span :style="{ marginLeft: '15px' }"> {{ item.title }}</span>
      </div>
    </v-list-item>
  </v-list>

  <h4 :style="{ margin: '16px 0' }">Default Size</h4>
  <v-list bordered>
    <v-list-item v-for="(item, index) in data" :key="index">
      <div :style="{ display: 'flex', alignItems: 'center' }">
        <v-avatar name="Eobard Thawne" size="32px" />
        <span :style="{ marginLeft: '15px' }"> {{ item.title }}</span>
      </div>
    </v-list-item>
  </v-list>

  <h4 :style="{ margin: '16px 0' }">Large Size</h4>
  <v-list bordered size="large">
    <v-list-item v-for="(item, index) in data" :key="index">
      <div :style="{ display: 'flex', alignItems: 'center' }">
        <v-avatar name="Eobard Thawne" size="32px" />
        <span :style="{ marginLeft: '15px' }"> {{ item.title }}</span>
      </div>
    </v-list-item>
  </v-list>
</template>
<script setup lang="ts">
interface DataItem {
  title: string;
}
const data: DataItem[] = [
  {
    title: 'Vuse Title 1',
  },
  {
    title: 'Vuse Title 2',
  },
  {
    title: 'Vuse Title 3',
  },
  {
    title: 'Vuse Title 4',
  },
];
</script>

Customizing

Use Attribute

header
Vuse Title 1
Vuse Title 2
Vuse Title 3
Vuse Title 4
footer

Use Slot

props.nameET
Header
Vuse Title 1
Vuse Title 2
Vuse Title 3
Vuse Title 4
props.nameET
Footer

Customizing the header and footer
Customizing the header and footer of list by setting header and footer property.
<template>
  <h4 :style="{ margin: '16px 0' }">Use Attribute</h4>
  <v-list bordered header="header" footer="footer">
    <v-list-item v-for="(item, index) in data" :key="index">
      {{ item.title }}
    </v-list-item>
  </v-list>
  <h4 :style="{ margin: '16px 0' }">Use Slot</h4>
  <v-list bordered>
    <v-list-item v-for="(item, index) in data" :key="index">
      {{ item.title }}
    </v-list-item>
    <template #header>
      <div :style="{ display: 'flex', alignItems: 'center' }">
        <v-avatar name="Eobard Thawne" size="32px" />
        <span :style="{ marginLeft: '15px' }"> Header</span>
      </div>
    </template>
    <template #footer>
      <div :style="{ display: 'flex', alignItems: 'center' }">
        <v-avatar name="Eobard Thawne" size="32px" />
        <span :style="{ marginLeft: '15px' }"> Footer</span>
      </div>
    </template>
  </v-list>
</template>
<script setup lang="ts">
interface DataItem {
  title: string;
}
const data: DataItem[] = [
  {
    title: 'Vuse Title 1',
  },
  {
    title: 'Vuse Title 2',
  },
  {
    title: 'Vuse Title 3',
  },
  {
    title: 'Vuse Title 4',
  },
];
</script>

Copyright © 2023 Vuse-ui