卡片 Svelte 组件

卡片，以及列表视图，是包含和组织信息的另一种好方法。卡片包含唯一的相关数据，例如关于单个主题的照片、文本和链接。卡片通常是通往更复杂和详细信息的入口点。

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

卡片组件

包含以下组件：

卡片
卡片头
卡片内容
卡片页脚

卡片属性

属性	类型	默认值	描述
<Card> 属性
标题	字符串		卡片头内容
内容	字符串		卡片内容
页脚	字符串		卡片页脚内容
填充	布尔值	true	在卡片内容上添加额外的内部填充
轮廓	布尔值	false	使卡片轮廓 - 带边框
outlineIos	布尔值	false	在 iOS 主题中使卡片轮廓
outlineMd	布尔值	false	在 MD 主题中使卡片轮廓
凸起	布尔值	false	使卡片凸起 - 带阴影
headerDivider	布尔值	false	为卡片头添加分隔线（边框）
footerDivider	布尔值	false	为卡片页脚添加分隔线（边框）
可扩展	布尔值	false	启用可扩展卡片
expandableAnimateWidth	布尔值	false	启用卡片内容宽度也动画化和响应，但可能会影响性能
expandableOpened	布尔值	false	指示可扩展卡片是否打开的布尔属性
动画	布尔值	true	指定是否使用动画打开可扩展卡片
hideNavbarOnOpen	布尔值		将隐藏打开可扩展卡片时的导航栏。默认情况下继承相同的应用程序卡片参数。
hideToolbarOnOpen	布尔值		将隐藏打开可扩展卡片时的工具栏。默认情况下继承相同的应用程序卡片参数。
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>

改进此文档

在此页面上

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