🔥 遇见我们的新项目 t0ggles - 您终极的项目管理工具！ 🔥

列表项 Svelte 组件

列表项组件

包含以下组件

  • ListItem - 主列表项元素

ListItem 属性

名称类型默认值描述
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字符串

要添加到项目“内容”元素上的附加类

dividers布尔值未定义

在列表项之间呈现分隔线（边框）。如果未指定，则从父列表组件继承dividers 属性值

footer字符串

列表项“页脚”区域的内容

groupTitle布尔值false

将其渲染为列表组标题

header字符串

列表项“页眉”区域的内容

href字符串 | 布尔值

列表项链接的href 属性

innerClass字符串

要添加到项目“内部”元素上的附加类

label布尔值false

将项目内容渲染为<label> 元素。用于创建单选按钮/复选框列表项

link布尔值false

将列表项渲染为链接（<a>）

linkComponent字符串'a'

列表项链接 HTML 元素

linkProps任何

包含要传递给链接/按钮的附加属性（属性）的对象

mediaClass字符串

要添加到项目“媒体”元素上的附加类

menuListItem布尔值

将列表项渲染为菜单列表项（与<MenuListItem> 相同）

menuListItemActive布尔值false

使菜单列表项突出显示（活动）（与<MenuListItem active> 相同）

strongTitle布尔值 | 'auto'

使项目标题变为粗体（粗体）。当为'auto' 时，如果还指定了subtitle 或 text，它将使其变为粗体

subtitle字符串

列表项“副标题”区域的内容

target字符串

列表项链接的target 属性

text字符串

列表项“文本”区域的内容

title字符串

列表项“标题”区域的内容

titleFontSizeIos字符串'text-[17px]'

iOS 主题中项目标题字体的 Tailwind CSS 类

titleFontSizeMaterial字符串'text-[16px]'

Material 主题中项目标题字体的 Tailwind CSS 类

titleWrapClass字符串

要添加到项目“标题包装”元素上的附加类

touchRipple布尔值true

在 Material 主题中启用触摸波纹效果

onClickfunction(e)

click 事件处理程序

ListItem 插槽

名称描述
after

列表项“after”区域的内容

content

项目内容的内容

footer

列表项“页脚”区域的内容

header

列表项“页眉”区域的内容

inner

项目内部的内容

media

列表项“媒体”区域的内容

subtitle

列表项“副标题”区域的内容

text

列表项“文本”区域的内容

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>
代码许可证 MIT.
2022 © Konsta UI 作者 nolimits4web.