🔥 遇见我们的新项目 t0ggles - 你终极的项目管理工具！ 🔥

列表 Vue 组件

列表视图是功能强大且用途广泛的用户界面组件，经常在应用程序中找到。列表视图以可滚动列表的形式显示数据，该列表包含多行，这些行可以分为部分/组。

列表视图有许多用途

  • 允许用户浏览层次结构化的数据
  • 显示索引的项目列表
  • 以视觉上不同的分组方式显示详细信息和控件
  • 显示可选择的选项列表

列表组件

包含以下组件

  • List - 主要列表视图元素
  • ListGroup - 列表组元素

列表属性

名称类型默认值描述
颜色对象

包含 Tailwind CSS 颜色类别的对象

colors.outlineIos字符串'border-black border-opacity-20 dark:border-white dark:border-opacity-15'
colors.outlineMaterial字符串'border-md-light-outline border-md-dark-outline'
colors.strongBgIos字符串'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterial字符串'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
组件字符串'div'

组件的 HTML 元素

分隔符布尔值未定义

在列表项之间渲染分隔符（边框），覆盖 dividersIos 和 dividersMaterial

dividersIos布尔值真

在 iOS 主题中渲染列表项之间的分隔符（边框）

dividersMaterial布尔值假

在 Material 主题中渲染列表项之间的分隔符（边框）

内嵌布尔值未定义

使列表块内嵌。覆盖 insetIos 和 insetMaterial

insetIos布尔值假

在 iOS 主题中使列表块内嵌

insetMaterial布尔值假

在 Material 主题中使列表块内嵌

边距字符串'my-8'

Tailwind CSS 边距类

菜单列表布尔值

将列表渲染为菜单列表（与 <MenuList> 相同）

嵌套布尔值假

删除细线/分隔符和边距，适用于将列表块嵌套在其他块中的情况

轮廓布尔值未定义

渲染列表外部边框。覆盖 outlineIos 和 outlineMaterial

outlineIos布尔值假

在 iOS 主题中渲染列表外部边框

outlineMaterial布尔值假

在 Material 主题中渲染列表外部边框

强布尔值未定义

添加额外的突出显示。覆盖 strongIos 和 strongMaterial

strongIos布尔值假

在 iOS 主题中添加额外的突出显示

strongMaterial布尔值假

在 Material 主题中添加额外的突出显示

示例

List.vue
<template>
  <k-page>
    <k-navbar title="List" />


    <k-block-title>Simple List</k-block-title>
    <k-list>
      <k-list-item title="Item 1" />
      <k-list-item title="Item 2" />
      <k-list-item title="Item 3" />
    </k-list>


    <k-block-title>Strong List</k-block-title>
    <k-list strong>
      <k-list-item title="Item 1" />
      <k-list-item title="Item 2" />
      <k-list-item title="Item 3" />
    </k-list>


    <k-block-title>Strong Outline List</k-block-title>
    <k-list strong outline>
      <k-list-item title="Item 1" />
      <k-list-item title="Item 2" />
      <k-list-item title="Item 3" />
    </k-list>


    <k-block-title>Strong Inset List</k-block-title>
    <k-list strong inset>
      <k-list-item title="Item 1" />
      <k-list-item title="Item 2" />
      <k-list-item title="Item 3" />
    </k-list>


    <k-block-title>Strong Outline Inset List</k-block-title>
    <k-list strong outline inset>
      <k-list-item title="Item 1" />
      <k-list-item title="Item 2" />
      <k-list-item title="Item 3" />
    </k-list>


    <k-block-title>Simple Links List</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item title="Link 1" link />
      <k-list-item title="Link 2" link />
      <k-list-item title="Link 3" link />
    </k-list>


    <k-block-title>Data list, with icons</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item title="Ivan Petrov" after="CEO">
        <template #media>
          <demo-icon />
        </template>
      </k-list-item>
      <k-list-item title="John Doe">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <k-badge>5</k-badge>
        </template>
      </k-list-item>
      <k-list-item title="Jenna Smith">
        <template #media>
          <demo-icon />
        </template>
      </k-list-item>
    </k-list>
    <k-block-title>Links</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item link title="Ivan Petrov" after="CEO">
        <template #media>
          <demo-icon />
        </template>
      </k-list-item>
      <k-list-item link title="John Doe" after="Cleaner">
        <template #media>
          <demo-icon />
        </template>
      </k-list-item>
      <k-list-item link title="Jenna Smith">
        <template #media>
          <demo-icon />
        </template>
      </k-list-item>
    </k-list>
    <k-block-title>Links, Header, Footer</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item link header="Name" title="John Doe" after="Edit">
        <template #media>
          <demo-icon />
        </template>
      </k-list-item>
      <k-list-item link header="Phone" title="+7 90 111-22-3344" after="Edit">
        <template #media>
          <demo-icon />
        </template>
      </k-list-item>
      <k-list-item
        link
        header="Email"
        title="john@doe"
        footer="Home"
        after="Edit"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-item>
      <k-list-item
        link
        header="Email"
        title="john@konsta"
        footer="Work"
        after="Edit"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-item>
    </k-list>


    <k-block-title>Links, no icons</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item link title="Ivan Petrov" />
      <k-list-item link title="John Doe" />
      <k-list-item group-title title="Group title Here" />
      <k-list-item link title="Ivan Petrov" />
      <k-list-item link title="Jenna Smith" />
    </k-list>


    <k-block-title>Grouped with sticky titles</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-group>
        <k-list-item
          title="A"
          group-title
          class="ios:top-11-safe material:top-16-safe sticky"
        />
        <k-list-item title="Aaron " />
        <k-list-item title="Abbie" />
        <k-list-item title="Adam" />
      </k-list-group>
      <k-list-group>
        <k-list-item
          title="B"
          group-title
          class="ios:top-11-safe material:top-16-safe sticky"
        />
        <k-list-item title="Bailey" />
        <k-list-item title="Barclay" />
        <k-list-item title="Bartolo" />
      </k-list-group>
      <k-list-group>
        <k-list-item
          title="C"
          group-title
          class="ios:top-11-safe material:top-16-safe sticky"
        />
        <k-list-item title="Caiden" />
        <k-list-item title="Calvin" />
        <k-list-item title="Candy" />
      </k-list-group>
    </k-list>


    <k-block-title class="text-2xl">Media Lists</k-block-title>
    <k-block>
      <p>
        Media Lists are almost the same as Data Lists, but with a more flexible
        layout for visualization of more complex data, like products, services,
        user, etc.
      </p>
    </k-block>


    <k-block-title>Songs</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item
        :chevron-material="false"
        link
        title="Yellow Submarine"
        after="$15"
        subtitle="Beatles"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <img
            class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
            src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
            width="80"
            alt="demo"
          />
        </template>
      </k-list-item>
      <k-list-item
        :chevron-material="false"
        link
        title="Don't Stop Me Now"
        after="$22"
        subtitle="Queen"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <img
            class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
            src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
            width="80"
            alt="demo"
          />
        </template>
      </k-list-item>
      <k-list-item
        :chevron-material="false"
        link
        title="Billie Jean"
        after="$16"
        subtitle="Michael Jackson"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <img
            class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
            src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
            width="80"
            alt="demo"
          />
        </template>
      </k-list-item>
    </k-list>
    <k-block-title>Mail App</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item
        :chevron-material="false"
        link
        title="Facebook"
        after="17:14"
        subtitle="New messages from John Doe"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      />
      <k-list-item
        :chevron-material="false"
        link
        title="John Doe (via Twitter)"
        after="17:11"
        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      />
      <k-list-item
        :chevron-material="false"
        link
        title="Facebook"
        after="16:48"
        subtitle="New messages from John Doe"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      />
      <k-list-item
        :chevron-material="false"
        link
        title="John Doe (via Twitter)"
        after="15:32"
        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      />
    </k-list>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBadge,
    kBlock,
    kBlockTitle,
    kList,
    kListGroup,
    kListItem,
  } from 'konsta/vue';
  import DemoIcon from '../components/DemoIcon.vue';


  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBadge,
      kBlock,
      kBlockTitle,
      kList,
      kListGroup,
      kListItem,
      DemoIcon,
    },


  };
</script>
代码许可证： MIT.
2022 © Konsta UI 由 nolimits4web.