列表项 React 组件

列表项组件
ListItem 属性
示例

列表项组件

包含以下组件

ListItem - 主列表项元素

ListItem 属性

名称	类型	默认值	描述
after	ReactNode		列表项 "after" 区域的内容
chevron	boolean	undefined	如果列表项是链接，则启用引导图标。覆盖 `chevronIos` 和 `chevronMaterial`
chevronIcon	ReactNode		允许使用自定义图标替换默认引导图标
chevronIos	boolean	true	如果列表项是 iOS 主题中的链接，则启用引导图标
chevronMaterial	boolean	true	如果列表项是 Material 主题中的链接，则启用引导图标
colors	object		包含 Tailwind CSS 颜色类对象的
colors.activeBgIos	string	'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'
colors.activeBgMaterial	string	''
colors.groupTitleBgIos	string	'bg-ios-light-surface-variant dark:bg-ios-dark-surface-variant'
colors.groupTitleBgMaterial	string	'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.groupTitleContactsBgIos	string	'dark:bg-[#323234]'
colors.groupTitleContactsBgMaterial	string	'bg-transparent dark:bg-transparent'
colors.groupTitleContactsTextMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.groupTitleСontactsTextIos	string	'text-opacity-90 dark:text-opacity-90'
colors.menuListItemActiveBgIos	string	'bg-primary bg-opacity-15 dark:bg-primary'
colors.menuListItemActiveBgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.menuListItemActiveTextIos	string	'text-primary dark:text-white'
colors.menuListItemActiveTextMaterial	string	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.menuListItemBgIos	string	'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'
colors.menuListItemBgMaterial	string	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.menuListItemTextIos	string	'text-black dark:text-white'
colors.menuListItemTextMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.primaryTextIos	string	'text-black dark:text-white'
colors.primaryTextMaterial	string	'text-md-light-on-surface dark:text-md-dark-on-surface'
colors.secondaryTextIos	string	'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.secondaryTextMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.touchRipple	string	'touch-ripple-black dark:touch-ripple-white'
component	string	'li'	组件的 HTML 元素
contacts	boolean	undefined	通过添加必要的额外样式类来启用联系人列表
contentChildren	ReactNode		item-content 的内容
contentClassName	string		要添加到项目 "content" 元素上的额外类
dividers	boolean	undefined	在列表项之间呈现分隔线（边框）。如果未指定，则继承父列表组件的 `dividers` 属性值
footer	ReactNode		列表项 "footer" 区域的内容
groupTitle	boolean	false	将其呈现为列表组标题
header	ReactNode		列表项 "header" 区域的内容
href	string \| boolean		列表项链接的 `href` 属性
innerChildren	ReactNode		item-inner 的内容
innerClassName	string		要添加到项目 "inner" 元素上的额外类
label	boolean	false	将项目内容呈现为 `<label>` 元素。用于创建单选/复选框列表项
link	boolean	false	将列表项呈现为链接 (`<a>`)
linkComponent	string	'a'	列表项链接 HTML 元素
linkProps	any		包含要传递给链接/按钮的额外属性（属性）的对象
media	ReactNode		列表项 "media" 区域的内容
mediaClassName	string		要添加到项目 "media" 元素上的额外类
menuListItem	boolean		将列表项呈现为菜单列表项（与 `<MenuListItem>` 相同）
menuListItemActive	boolean	false	使菜单列表项突出显示（活动）（与 `<MenuListItem active>` 相同）
strongTitle	boolean \| 'auto'		使项目标题变为粗体。当 `'auto'` 时，如果也指定了 `subtitle` 或 `text`，它将使其变为粗体
subtitle	ReactNode		列表项 "subtitle" 区域的内容
target	string		列表项链接的 `target` 属性
text	ReactNode		列表项 "text" 区域的内容
title	ReactNode		列表项 "title" 区域的内容
titleFontSizeIos	string	'text-[17px]'	iOS 主题中项目标题字体的 Tailwind CSS 类
titleFontSizeMaterial	string	'text-[16px]'	Material 主题中项目标题字体的 Tailwind CSS 类
titleWrapClassName	string		要添加到项目 "titleWrap" 元素上的额外类
touchRipple	boolean	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>
  );
}