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

卡片 Svelte 组件

卡片，以及 列表视图，是包含和组织信息的一种很棒的方式。卡片包含独特的相关数据，例如，一张照片、一段文字和一个关于单个主题的所有链接。卡片通常是进入更复杂和详细信息的入口点。

卡片组件

包含以下组件

  • 卡片

卡片属性

名称类型默认值描述
colors对象

具有 Tailwind CSS 颜色类的对象

colors.bgIos字符串'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.bgMaterial字符串'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.footerTextIos字符串'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.footerTextMaterial字符串'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineIos字符串'border-black border-opacity-20 dark:border-white dark:border-opacity-20'
colors.outlineMaterial字符串'border-md-light-outline dark:border-md-dark-outline'
colors.textIos字符串''
colors.textMaterial字符串'text-md-light-on-surface dark:text-md-dark-on-surface'
contentWrap布尔值true

用带填充的额外元素包装卡片内容

contentWrapPadding字符串'p-4'

内容包装填充（如果 contentWrap 已启用）

footer字符串

卡片页脚的内容

footerDivider布尔值false

启用页脚和内容之间的分隔线

header字符串

卡片标题的内容

headerDivider布尔值false

启用标题和内容之间的分隔线

margin字符串'm-4'

Tailwind CSS 边距类

outline布尔值未定义

制作卡片轮廓。覆盖 outlineIos 和 outlineMaterial

outlineIos布尔值false

在 iOS 主题中制作卡片轮廓

outlineMaterial布尔值false

在 Material 主题中制作卡片轮廓

raised布尔值未定义

使卡片凸起。覆盖 raisedIos 和 raisedMaterial

raisedIos布尔值false

在 iOS 主题中使卡片凸起

raisedMaterial布尔值false

在 Material 主题中使卡片凸起

卡片插槽

名称描述
footer

卡片页脚的内容

header

卡片标题的内容

示例

Cards.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Card,
    BlockTitle,
    List,
    ListItem,
    Link,
    Button,
  } from 'konsta/svelte';


</script>


<Page>
  <Navbar title="Cards" />


  <BlockTitle withBlock={false}>Simple Cards</BlockTitle>
  <Card>
    This is a simple card with plain text, but cards can also contain their own
    header, footer, list view, image, or any other element.
  </Card>
  <Card header="Card header" footer="Card footer">
    Card with header and footer. Card headers are used to display card titles
    and footers for additional information or just for custom actions.
  </Card>
  <Card>
    Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
    aliquet magna justo.
  </Card>


  <BlockTitle withBlock={false}>Outline Cards</BlockTitle>
  <Card outline>
    This is a simple card with plain text, but cards can also contain their own
    header, footer, list view, image, or any other element.
  </Card>
  <Card outline header="Card header" footer="Card footer">
    Card with header and footer. Card headers are used to display card titles
    and footers for additional information or just for custom actions.
  </Card>
  <Card outline>
    Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
    aliquet magna justo.{' '}
  </Card>


  <BlockTitle withBlock={false}>Outline With Dividers</BlockTitle>
  <Card
    outline
    header="Card header"
    footer="Card footer"
    headerDivider
    footerDivider
  >
    Card with header and footer. Card headers are used to display card titles
    and footers for additional information or just for custom actions.
  </Card>


  <BlockTitle withBlock={false}>Raised Cards</BlockTitle>
  <Card raised>
    This is a simple card with plain text, but cards can also contain their own
    header, footer, list view, image, or any other element.
  </Card>
  <Card raised header="Card header" footer="Card footer">
    Card with header and footer. Card headers are used to display card titles
    and footers for additional information or just for custom actions.
  </Card>
  <Card raised>
    Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
    aliquet magna justo.{' '}
  </Card>


  <BlockTitle withBlock={false}>Card With List View</BlockTitle>
  <Card>
    <List nested class="-m-4">
      <ListItem href title="Link 1" />
      <ListItem href title="Link 2" />
      <ListItem href title="Link 3" />
      <ListItem href title="Link 4" />
      <ListItem href title="Link 5" />
    </List>
  </Card>


  <BlockTitle withBlock={false}>Styled Cards</BlockTitle>
  <div class="lg:grid lg:grid-cols-2">
    <Card outline>
      <div
        class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
        style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
      >
        Journey To Mountains
      </div>
      <div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
        efficitur vitae non felis. Phasellus quis nibh hendrerit...
      </p>
      <svelte:fragment slot="footer">
        <div class="flex justify-between material:hidden">
          <Link>Like</Link>
          <Link>Read more</Link>
        </div>
        <div
          class="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse"
        >
          <Button rounded inline>Like</Button>
          <Button rounded inline outline>Read more</Button>
        </div>
      </svelte:fragment>
    </Card>
    <Card>
      <div
        slot="header"
        class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
        style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
      >
        Lorem Ipsum
      </div>
      <div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
        efficitur vitae non felis. Phasellus quis nibh hendrerit...
      </p>
      <svelte:fragment slot="footer">
        <div class="flex justify-between material:hidden">
          <Link>Like</Link>
          <Link>Read more</Link>
        </div>
        <div
          class="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse"
        >
          <Button rounded inline>Like</Button>
          <Button rounded inline outline>Read more</Button>
        </div>
      </svelte:fragment>
    </Card>
  </div>
</Page>
代码许可证： MIT.
2022 © Konsta UI 作者： nolimits4web.