列表 React 组件

列表组件
列表属性
示例

列表视图是通用的、强大的用户界面组件，在应用程序中经常发现。列表视图以可滚动的多行列表形式呈现数据，这些行可能被划分为部分/组。

列表视图有许多用途

让用户浏览层次结构化的数据
呈现项目的索引列表
在视觉上不同的分组中显示详细信息和控件
呈现可选择的选项列表

列表组件

包含以下组件

List - 主列表视图元素
ListGroup - 列表组元素

列表属性

名称	类型	默认值	描述
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.outlineIos	字符串	'border-black border-opacity-20 dark:border-white dark:border-opacity-15'
colors.outlineMaterial	字符串	'border-md-light-outline border-md-dark-outline'
colors.strongBgIos	字符串	'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterial	字符串	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
component	字符串	'div'	组件的 HTML 元素
dividers	布尔值	未定义	在列表项之间呈现分隔线（边框），覆盖 `dividersIos` 和 `dividersMaterial`
dividersIos	布尔值	true	在 iOS 主题中在列表项之间呈现分隔线（边框）
dividersMaterial	布尔值	false	在 Material 主题中在列表项之间呈现分隔线（边框）
inset	布尔值	未定义	使列表块内嵌。覆盖 `insetIos` 和 `insetMaterial`
insetIos	布尔值	false	使列表块在 iOS 主题中内嵌
insetMaterial	布尔值	false	使列表块在 Material 主题中内嵌
margin	字符串	'my-8'	Tailwind CSS 边距类
menuList	布尔值		将列表呈现为菜单列表（与 `<MenuList>` 相同）
nested	布尔值	false	删除发际线/分隔线和边距，适用于将列表块嵌套在其他块中的情况
outline	布尔值	未定义	呈现列表外部边框。覆盖 `outlineIos` 和 `outlineMaterial`
outlineIos	布尔值	false	在 iOS 主题中呈现列表外部边框
outlineMaterial	布尔值	false	在 Material 主题中呈现列表外部边框
strong	布尔值	未定义	添加额外的突出显示。覆盖 `strongIos` 和 `strongMaterial`
strongIos	布尔值	false	在 iOS 主题中添加额外的突出显示
strongMaterial	布尔值	false	在 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>
  );
}