🔥 認識我們的新專案 t0ggles - 您終極的專案管理工具！ 🔥

列表項目 Vue 元件

列表項目元件

包含以下元件

  • ListItem - 主要列表項目元素

ListItem 屬性

名稱類型預設值描述
after字串

列表項目「after」區域的內容

chevron布林值未定義

如果列表項目是連結，則啟用箭頭圖示。覆寫 chevronIos 和 chevronMaterial

chevronIcon字串

允許使用自訂箭頭圖示取代預設箭頭圖示

chevronIos布林值true

如果列表項目是 iOS 主題中的連結，則啟用箭頭圖示

chevronMaterial布林值true

如果列表項目是 Material 主題中的連結，則啟用箭頭圖示

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字串

要新增至項目「content」元素的額外類別

dividers布林值未定義

在列表項目之間呈現分隔線 (邊框)。如果未指定，則繼承父列表元件的 dividers 屬性值

footer字串

列表項目「footer」區域的內容

groupTitle布林值false

將其呈現為列表群組標題

header字串

列表項目「header」區域的內容

href字串 | 布林值

列表項目連結的 href 屬性

innerClass字串

要新增至項目「inner」元素的額外類別

label布林值false

將項目內容呈現為 <label> 元素。適用於建立單選/核取方塊列表項目

link布林值false

將列表項目呈現為連結 (<a>)

linkComponent字串'a'

列表項目連結 HTML 元素

linkProps任何

包含要傳遞至連結/按鈕的其他屬性 (屬性) 的物件

mediaClass字串

要新增至項目「media」元素的額外類別

menuListItem布林值

將列表項目呈現為選單列表項目 (與 <MenuListItem> 相同)

menuListItemActive布林值false

使選單列表項目反白顯示 (作用中) (與 <MenuListItem active> 相同)

strongTitle布林值 | 'auto'

使項目標題變為粗體。當為 'auto' 時，如果有指定 subtitle 或 text，則會將其變為粗體

subtitle字串

列表項目「subtitle」區域的內容

target字串

列表項目連結的 target 屬性

text字串

列表項目「text」區域的內容

title字串

列表項目「title」區域的內容

titleFontSizeIos字串'text-[17px]'

iOS 主題中項目標題字體大小的 Tailwind CSS 類別

titleFontSizeMaterial字串'text-[16px]'

Material 主題中項目標題字體大小的 Tailwind CSS 類別

titleWrapClass字串

要新增至項目「titleWrap」元素的額外類別

touchRipple布林值true

在 Material 主題中啟用觸控漣漪效果

ListItem 插槽

名稱描述
after

列表項目「after」區域的內容

content

item-content 的內容

footer

列表項目「footer」區域的內容

header

列表項目「header」區域的內容

inner

item-inner 的內容

media

列表項目「media」區域的內容

subtitle

列表項目「subtitle」區域的內容

text

列表項目「text」區域的內容

title

列表項目「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.