列表項目 React 組件

列表項目組件
ListItem 屬性
範例

列表項目組件

包含以下組件

ListItem - 主要的列表項目元素

ListItem 屬性

名稱	類型	預設值	描述
after	ReactNode		列表項目「後」區域的內容
chevron	布林值	未定義	如果列表項目是連結，則啟用箭頭圖示。覆寫 `chevronIos` 和 `chevronMaterial`
chevronIcon	ReactNode		允許用自訂的圖示取代預設的箭頭圖示
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	布林值	未定義	透過新增必要的其他類別以進行樣式設定，來啟用聯絡人列表
contentChildren	ReactNode		項目內容的內容
contentClassName	字串		要新增到項目「內容」元素上的其他類別
dividers	布林值	未定義	在列表項目之間呈現分隔線（邊框）。如果未指定，則從父列表組件繼承 `dividers` 屬性值
footer	ReactNode		列表項目「頁尾」區域的內容
groupTitle	布林值	false	將其呈現為列表群組標題
header	ReactNode		列表項目「頁首」區域的內容
href	字串 \| 布林值		列表項目連結的 `href` 屬性
innerChildren	ReactNode		項目內部的內容
innerClassName	字串		要新增到項目「內部」元素上的其他類別
label	布林值	false	將項目內容呈現為 `<label>` 元素。適用於建立單選/核取方塊列表項目
link	布林值	false	將列表項目呈現為連結 (`<a>`)
linkComponent	字串	'a'	列表項目連結 HTML 元素
linkProps	any		具有要傳遞到連結/按鈕的其他屬性 (屬性) 的物件
media	ReactNode		列表項目「媒體」區域的內容
mediaClassName	字串		要新增到項目「媒體」元素上的其他類別
menuListItem	布林值		將列表項目呈現為選單列表項目（與 `<MenuListItem>` 相同）
menuListItemActive	布林值	false	使選單列表項目醒目顯示（活動中）（與 `<MenuListItem active>` 相同）
strongTitle	布林值 \| 'auto'		使項目標題變粗（粗體）。當 `'auto'` 時，如果也指定了 `subtitle` 或 `text`，則會使其變粗
subtitle	ReactNode		列表項目「副標題」區域的內容
target	字串		列表項目連結的 `target` 屬性
text	ReactNode		列表項目「文字」區域的內容
title	ReactNode		列表項目「標題」區域的內容
titleFontSizeIos	字串	'text-[17px]'	iOS 主題中項目標題字體大小的 Tailwind CSS 類別
titleFontSizeMaterial	字串	'text-[16px]'	Material 主題中項目標題字體大小的 Tailwind CSS 類別
titleWrapClassName	字串		要新增到項目「titleWrap」元素上的其他類別
touchRipple	布林值	true	在 Material 主題中啟用觸控漣漪效果

範例

List.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Badge,
  Block,
  BlockTitle,
  List,
  ListGroup,
  ListItem,
} from 'konsta/react';
import DemoIcon from '../components/DemoIcon';

export default function ListPage() {
  return (
    <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 media={<DemoIcon />} title="Ivan Petrov" after="CEO" />
        <ListItem
          title="John Doe"
          media={<DemoIcon />}
          after={<Badge>5</Badge>}
        />
        <ListItem media={<DemoIcon />} title="Jenna Smith" />
      </List>
      <BlockTitle>Links</BlockTitle>
      <List strongIos outlineIos>
        <ListItem media={<DemoIcon />} link title="Ivan Petrov" after="CEO" />
        <ListItem media={<DemoIcon />} link title="John Doe" after="Cleaner" />
        <ListItem media={<DemoIcon />} link title="Jenna Smith" />
      </List>
      <BlockTitle>Links, Header, Footer</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          media={<DemoIcon />}
          link
          header="Name"
          title="John Doe"
          after="Edit"
        />
        <ListItem
          media={<DemoIcon />}
          link
          header="Phone"
          title="+7 90 111-22-3344"
          after="Edit"
        />
        <ListItem
          link
          header="Email"
          title="john@doe"
          footer="Home"
          after="Edit"
          media={<DemoIcon />}
        />
        <ListItem
          link
          header="Email"
          title="john@konsta"
          footer="Work"
          after="Edit"
          media={<DemoIcon />}
        />
      </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
            className="ios:top-11-safe material:top-16-safe sticky"
          />
          <ListItem title="Aaron " />
          <ListItem title="Abbie" />
          <ListItem title="Adam" />
        </ListGroup>
        <ListGroup>
          <ListItem
            title="B"
            groupTitle
            className="ios:top-11-safe material:top-16-safe  sticky"
          />
          <ListItem title="Bailey" />
          <ListItem title="Barclay" />
          <ListItem title="Bartolo" />
        </ListGroup>
        <ListGroup>
          <ListItem
            title="C"
            groupTitle
            className="ios:top-11-safe material:top-16-safe  sticky"
          />
          <ListItem title="Caiden" />
          <ListItem title="Calvin" />
          <ListItem title="Candy" />
        </ListGroup>
      </List>

      <BlockTitle className="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
          link
          chevronMaterial={false}
          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."
          media={
            <img
              className="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"
            />
          }
        />
        <ListItem
          link
          chevronMaterial={false}
          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."
          media={
            <img
              className="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"
            />
          }
        />
        <ListItem
          link
          chevronMaterial={false}
          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."
          media={
            <img
              className="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"
            />
          }
        />
      </List>
      <BlockTitle>Mail App</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          link
          chevronMaterial={false}
          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
          link
          chevronMaterial={false}
          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
          link
          chevronMaterial={false}
          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
          link
          chevronMaterial={false}
          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>
  );
}