列表項目 Svelte 組件

列表項目組件
ListItem Props
ListItem Slots
範例

列表項目組件

包含以下組件

ListItem - 主要列表項目元素

ListItem Props

名稱	類型	預設值	描述
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	字串		要新增至項目「content」元素的額外類別
dividers	布林值	未定義	在列表項目之間呈現分隔線 (邊框)。如果未指定，則從父 List 組件繼承 `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 主題中啟用觸摸漣漪效果
onClick	函式(e)		`click` 事件處理常式

ListItem Slots

名稱	描述
after	列表項目「after」區域的內容
content	項目內容的內容
footer	列表項目「footer」區域的內容
header	列表項目「header」區域的內容
inner	項目內部的內容
media	列表項目「media」區域的內容
subtitle	列表項目「subtitle」區域的內容
text	列表項目「text」區域的內容
title	列表項目「title」區域的內容

範例

List.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Badge,
    Block,
    BlockTitle,
    List,
    ListGroup,
    ListItem,
  } from 'konsta/svelte';
  import DemoIcon from '../components/DemoIcon.svelte';

</script>

<Page>
  <Navbar title="List" />

  <BlockTitle>Simple List</BlockTitle>
  <List>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong List</BlockTitle>
  <List strong>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Outline List</BlockTitle>
  <List strong outline>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Inset List</BlockTitle>
  <List strong inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Outline Inset List</BlockTitle>
  <List strong outline inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Simple Links List</BlockTitle>
  <List strongIos outlineIos>
    <ListItem title="Link 1" link />
    <ListItem title="Link 2" link />
    <ListItem title="Link 3" link />
  </List>

  <BlockTitle>Data list, with icons</BlockTitle>
  <List strongIos outlineIos>
    <ListItem title="Ivan Petrov" after="CEO">
      <DemoIcon slot="media" />
    </ListItem>
    <ListItem title="John Doe">
      <DemoIcon slot="media" />
      <Badge slot="after">5</Badge>
    </ListItem>
    <ListItem title="Jenna Smith">
      <DemoIcon slot="media" />
    </ListItem>
  </List>
  <BlockTitle>Links</BlockTitle>
  <List strongIos outlineIos>
    <ListItem link title="Ivan Petrov" after="CEO"
      ><DemoIcon slot="media" /></ListItem
    >
    <ListItem link title="John Doe" after="Cleaner"
      ><DemoIcon slot="media" /></ListItem
    >
    <ListItem link title="Jenna Smith"><DemoIcon slot="media" /></ListItem>
  </List>
  <BlockTitle>Links, Header, Footer</BlockTitle>
  <List strongIos outlineIos>
    <ListItem link header="Name" title="John Doe" after="Edit">
      <DemoIcon slot="media" />
    </ListItem>
    <ListItem link header="Phone" title="+7 90 111-22-3344" after="Edit">
      <DemoIcon slot="media" />
    </ListItem>
    <ListItem link header="Email" title="john@doe" footer="Home" after="Edit">
      <DemoIcon slot="media" />
    </ListItem>
    <ListItem
      link
      header="Email"
      title="john@konsta"
      footer="Work"
      after="Edit"
    >
      <DemoIcon slot="media" />
    </ListItem>
  </List>

  <BlockTitle>Links, no icons</BlockTitle>
  <List strongIos outlineIos>
    <ListItem link title="Ivan Petrov" />
    <ListItem link title="John Doe" />
    <ListItem groupTitle title="Group title Here" />
    <ListItem link title="Ivan Petrov" />
    <ListItem link title="Jenna Smith" />
  </List>

  <BlockTitle>Grouped with sticky titles</BlockTitle>
  <List strongIos outlineIos>
    <ListGroup>
      <ListItem
        title="A"
        groupTitle
        class="ios:top-11-safe material:top-16-safe sticky"
      />
      <ListItem title="Aaron " />
      <ListItem title="Abbie" />
      <ListItem title="Adam" />
    </ListGroup>
    <ListGroup>
      <ListItem
        title="B"
        groupTitle
        class="ios:top-11-safe material:top-16-safe sticky"
      />
      <ListItem title="Bailey" />
      <ListItem title="Barclay" />
      <ListItem title="Bartolo" />
    </ListGroup>
    <ListGroup>
      <ListItem
        title="C"
        groupTitle
        class="ios:top-11-safe material:top-16-safe sticky"
      />
      <ListItem title="Caiden" />
      <ListItem title="Calvin" />
      <ListItem title="Candy" />
    </ListGroup>
  </List>

  <BlockTitle class="text-2xl">Media Lists</BlockTitle>
  <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>
  </Block>

  <BlockTitle>Songs</BlockTitle>
  <List strongIos outlineIos>
    <ListItem
      chevronMaterial={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."
    >
      <img
        class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
        slot="media"
        src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
        width="80"
        alt="demo"
      />
    </ListItem>
    <ListItem
      chevronMaterial={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."
    >
      <img
        class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
        slot="media"
        src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
        width="80"
        alt="demo"
      />
    </ListItem>
    <ListItem
      chevronMaterial={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."
    >
      <img
        class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
        slot="media"
        src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
        width="80"
        alt="demo"
      />
    </ListItem>
  </List>
  <BlockTitle>Mail App</BlockTitle>
  <List strongIos outlineIos>
    <ListItem
      chevronMaterial={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."
    />
    <ListItem
      chevronMaterial={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."
    />
    <ListItem
      chevronMaterial={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."
    />
    <ListItem
      chevronMaterial={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."
    />
  </List>
</Page>