卡片 Svelte 组件

卡片，连同列表视图，是包含和组织您信息的一种更多方式。卡片包含独特的相关数据，例如，关于单个主题的照片、文本和链接。卡片通常是更复杂和详细信息的一个入口点。

卡片 Svelte 组件表示卡片组件。

卡片组件

包含以下组件：

Card
CardHeader
CardContent
CardFooter

卡片属性

属性	类型	默认	描述
<Card> 属性
title	字符串		卡片头部内容
内容	字符串		卡片内容
尾部	字符串		卡片尾部内容
内边距	布尔值	true	在卡片内容上添加额外的内部内边距
outline	布尔值	false	创建卡片轮廓 - 带边框
轮廓Ios	布尔值	false	在 iOS 主题中创建卡片轮廓
轮廓Md	布尔值	false	在 MD 主题中创建卡片轮廓
raised	布尔值	false	创建带阴影的卡片 - 抬起
headerDivider	布尔值	false	为卡片头部添加分隔符（边框）
footerDivider	布尔值	false	为卡片尾部添加分隔符（边框）
expandable	布尔值	false	启用可展开卡片
expandableAnimateWidth	布尔值	false	启用卡片内容宽度也可动画化和响应式，但可能影响性能
expandableOpened	布尔值	false	布尔属性指示可展开卡片是否已打开
animate	布尔值	true	指定是否用动画打开可展开卡片
hideNavbarOnOpen	布尔值		在可展开卡片打开时将隐藏 Navbar。默认继承相同应用卡片参数.
hideToolbarOnOpen	布尔值		在可展开卡片打开时将隐藏 Toolbar。默认继承相同应用卡片参数.
swipeToClose	布尔值		允许通过滑动关闭可展开卡片。默认继承相同应用卡片参数.
背景遮罩	布尔值		启用可展开卡片背景层。默认继承相同应用卡片参数.
backdropEl	字符串		允许指定自定义可展开卡片背景元素。这应该是背景元素的 CSS 选择器，例如`.card-backdrop.custom-backdrop`
closeByBackdropClick	布尔值		当启用时，点击可展开卡片的背景将关闭它。默认继承相同应用卡片参数.
<CardContent> 属性
内边距	布尔值	true	添加额外的内部内边距

卡片事件

事件	描述
<Card> 事件
cardBeforeOpen	事件将在可展开卡片开始其打开动画之前触发。`event.detail.prevent`包含一个函数，当调用时将阻止卡片打开
cardOpen	事件将在可展开卡片开始其打开动画时触发
cardOpened	事件将在可展开卡片完成其打开动画后触发
cardClose	事件将在可展开卡片开始其关闭动画时触发
cardClosed	事件将在可展开卡片完成其关闭动画后触发

卡片插槽

<Card>组件具有以下插槽：

default- 元素将作为卡片内容元素的子元素插入
content- 与default
header- 元素将作为卡片头部元素的子元素插入
footer- 元素将作为卡片尾部元素的子元素插入

<Card>
  <span slot="header">Header</span>
  <span slot="content">Content</span>
  <span slot="footer">Footer</span>
</Card>

渲染到

<div class="card">
  <div class="card-header">
    <span>Header</span>
  </div>
  <div class="card-content">
    <span>Content</span>
  </div>
  <div class="card-footer">
    <span>Footer</span>
  </div>
</div>

示例

cards.svelte

<script>
  import {
    Navbar,
    Page,
    Block,
    BlockTitle,
    Card,
    CardHeader,
    CardContent,
    CardFooter,
    List,
    ListItem,
    Link,
  } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<Page>
  <Navbar title="Cards" />

  <Block>
    <p>
      Cards are a great way to contain and organize your information, especially when combined with
      List Views. Cards can contain unique related data, like for example photos, text or links
      about a particular subject. Cards are typically an entry point to more complex and detailed
      information.
    </p>
  </Block>
  <BlockTitle>Simple Cards</BlockTitle>
  <Card
    content="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
    title="Card header"
    content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
    footer="Card footer"
  />
  <Card
    content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
  />

  <BlockTitle>Outline Cards</BlockTitle>
  <Card
    outline
    content="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
    outline
    title="Card header"
    content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
    footer="Card footer"
  />
  <Card
    outline
    content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
  />

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

  <BlockTitle>Raised Cards</BlockTitle>
  <Card
    raised
    content="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
    raised
    title="Card header"
    content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
    footer="Card footer"
  />
  <Card
    raised
    content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
  />

  <BlockTitle>Styled Cards</BlockTitle>
  <Card outlineMd class="demo-card-header-pic">
    <CardHeader
      valign="bottom"
      style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
      >Journey To Mountains</CardHeader
    >
    <CardContent>
      <p class="date">Posted on January 21, 2015</p>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis.
        Phasellus quis nibh hendrerit...
      </p>
    </CardContent>
    <CardFooter>
      <Link>Like</Link>
      <Link>Read more</Link>
    </CardFooter>
  </Card>
  <Card class="demo-card-header-pic">
    <CardHeader
      valign="bottom"
      style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
      >Journey To Mountains</CardHeader
    >
    <CardContent>
      <p class="date">Posted on January 21, 2015</p>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis.
        Phasellus quis nibh hendrerit...
      </p>
    </CardContent>
    <CardFooter>
      <Link>Like</Link>
      <Link>Read more</Link>
    </CardFooter>
  </Card>

  <BlockTitle>Cards With List View</BlockTitle>
  <Card>
    <CardContent padding={false}>
      <List>
        <ListItem link="#">Link 1</ListItem>
        <ListItem link="#">Link 2</ListItem>
        <ListItem link="#">Link 3</ListItem>
        <ListItem link="#">Link 4</ListItem>
        <ListItem link="#">Link 5</ListItem>
      </List>
    </CardContent>
  </Card>
  <Card title="New Releases:">
    <CardContent padding={false}>
      <List mediaList>
        <ListItem title="Yellow Submarine" subtitle="Beatles">
          <img
            slot="media"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg"
            width="44"
          />
        </ListItem>
        <ListItem title="Don't Stop Me Now" subtitle="Queen">
          <img
            slot="media"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg"
            width="44"
          />
        </ListItem>
        <ListItem title="Billie Jean" subtitle="Michael Jackson">
          <img
            slot="media"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg"
            width="44"
          />
        </ListItem>
      </List>
    </CardContent>
    <CardFooter>
      <span>January 20, 2015</span>
      <span>5 comments</span>
    </CardFooter>
  </Card>
</Page>

改进此文档

在本页上

卡片组件
卡片属性
卡片事件
卡片插槽
示例