🔥 认识我们的新项目 t0ggles - 您终极的项目管理工具！ 🔥

列表项 Vue 组件

列表项组件

包含以下组件

  • ListItem - 主列表项元素

ListItem 属性

名称类型默认值描述
after字符串

列表项“after”区域的内容

chevron布尔值未定义

如果列表项是链接，则启用 chevron 图标。覆盖 chevronIos 和 chevronMaterial

chevronIcon字符串

允许用自定义图标替换默认的 chevron 图标

chevronIos布尔值true

如果列表项在 iOS 主题中是链接，则启用 chevron 图标

chevronMaterial布尔值true

如果列表项在 Material 主题中是链接，则启用 chevron 图标

colors对象

包含 Tailwind CSS 颜色类别的对象

colors.activeBgIos字符串'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'
colors.activeBgMaterial字符串''
colors.groupTitleBgIos字符串'bg-ios-light-surface-variant dark:bg-ios-dark-surface-variant'
colors.groupTitleBgMaterial字符串'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.groupTitleContactsBgIos字符串'dark:bg-[#323234]'
colors.groupTitleContactsBgMaterial字符串'bg-transparent dark:bg-transparent'
colors.groupTitleContactsTextMaterial字符串'text-md-light-primary dark:text-md-dark-primary'
colors.groupTitleСontactsTextIos字符串'text-opacity-90 dark:text-opacity-90'
colors.menuListItemActiveBgIos字符串'bg-primary bg-opacity-15 dark:bg-primary'
colors.menuListItemActiveBgMaterial字符串'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.menuListItemActiveTextIos字符串'text-primary dark:text-white'
colors.menuListItemActiveTextMaterial字符串'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.menuListItemBgIos字符串'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'
colors.menuListItemBgMaterial字符串'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.menuListItemTextIos字符串'text-black dark:text-white'
colors.menuListItemTextMaterial字符串'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.primaryTextIos字符串'text-black dark:text-white'
colors.primaryTextMaterial字符串'text-md-light-on-surface dark:text-md-dark-on-surface'
colors.secondaryTextIos字符串'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.secondaryTextMaterial字符串'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.touchRipple字符串'touch-ripple-black dark:touch-ripple-white'
component字符串'li'

组件的 HTML 元素

contacts布尔值未定义

通过添加用于样式的必要附加类来启用联系人列表

contentClass字符串

要添加到项目“内容”元素的附加类

dividers布尔值未定义

在列表项之间呈现分隔线（边框）。如果未指定，则从父 List 组件继承 dividers 属性值

footer字符串

列表项“页脚”区域的内容

groupTitle布尔值false

将其呈现为列表组标题

header字符串

列表项“页眉”区域的内容

href字符串 | 布尔值

列表项链接的 href 属性

innerClass字符串

要添加到项目“内部”元素的附加类

label布尔值false

将项目内容呈现为 <label> 元素。用于创建单选按钮/复选框列表项

link布尔值false

将列表项呈现为链接 (<a>)

linkComponent字符串'a'

列表项链接 HTML 元素

linkProps任何

包含要传递给链接/按钮的附加属性（属性）的对象

mediaClass字符串

要添加到项目“媒体”元素的附加类

menuListItem布尔值

将列表项呈现为菜单列表项（与 <MenuListItem> 相同）

menuListItemActive布尔值false

使菜单列表项高亮显示（活动）（与 <MenuListItem active> 相同）

strongTitle布尔值 | 'auto'

使项目标题变为粗体。当 'auto' 时，如果还指定了 subtitle 或 text，则会使其变为粗体

subtitle字符串

列表项“副标题”区域的内容

target字符串

列表项链接的 target 属性

text字符串

列表项“文本”区域的内容

title字符串

列表项“标题”区域的内容

titleFontSizeIos字符串'text-[17px]'

iOS 主题中项目标题字体的 Tailwind CSS 类

titleFontSizeMaterial字符串'text-[16px]'

Material 主题中项目标题字体的 Tailwind CSS 类

titleWrapClass字符串

要添加到项目“标题包装”元素的附加类

touchRipple布尔值true

在 Material 主题中启用触摸涟漪效果

ListItem 插槽

名称描述
after

列表项“after”区域的内容

content

项目内容的内容

footer

列表项“页脚”区域的内容

header

列表项“页眉”区域的内容

inner

项目内部的内容

media

列表项“媒体”区域的内容

subtitle

列表项“副标题”区域的内容

text

列表项“文本”区域的内容

title

列表项“标题”区域的内容

示例

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.