列表 Svelte 组件

列表组件
列表属性
示例

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

列表视图有许多用途

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

列表组件

包含以下组件

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

列表属性

名称	类型	默认值	描述
colors	object		包含 Tailwind CSS 颜色类别的对象
colors.outlineIos	string	'border-black border-opacity-20 dark:border-white dark:border-opacity-15'
colors.outlineMaterial	string	'border-md-light-outline border-md-dark-outline'
colors.strongBgIos	string	'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterial	string	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
dividers	boolean	undefined	渲染列表项之间的分隔符（边框），覆盖 `dividersIos` 和 `dividersMaterial`
dividersIos	boolean	true	在 iOS 主题中渲染列表项之间的分隔符（边框）
dividersMaterial	boolean	false	在 Material 主题中渲染列表项之间的分隔符（边框）
inset	boolean	undefined	使列表块内嵌。覆盖 `insetIos` 和 `insetMaterial`
insetIos	boolean	false	在 iOS 主题中使列表块内嵌
insetMaterial	boolean	false	在 Material 主题中使列表块内嵌
margin	string	'my-8'	Tailwind CSS 边距类
menuList	boolean		将列表渲染为菜单列表（与 `<MenuList>` 相同）
nested	boolean	false	移除细线/分隔符和边距，适用于将列表块嵌套在其他块中的情况
outline	boolean	undefined	渲染列表外边框。覆盖 `outlineIos` 和 `outlineMaterial`
outlineIos	boolean	false	在 iOS 主题中渲染列表外边框
outlineMaterial	boolean	false	在 Material 主题中渲染列表外边框
strong	boolean	undefined	添加额外的突出显示。覆盖 `strongIos` 和 `strongMaterial`
strongIos	boolean	false	在 iOS 主题中添加额外的突出显示
strongMaterial	boolean	false	在 Material 主题中添加额外的突出显示

示例

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>