card 卡片

card 在卡片式布局中放置相关联的信息和操作。

XML 元素

card

Java 类

JmixCard

基本用法

在线示例

下面的示例中使用的卡片的属性和插槽展示相关联的信息和操作：

<card id="card" width="30em"
      themeNames="cover-media elevated outlined"
      title="msg://card.title" subtitle="msg://card.subtitle">
    <media>
        <image resource="icons/jmix-background.png"/>
    </media>
    <headerPrefix>
        <avatar image="icons/jmix-icon.png"/>
    </headerPrefix>
    <content>
        <p text="msg://card.content.text"/>
    </content>
    <footer>
        <button id="visitSiteButton" text="msg://visitSiteButton.text" icon="EXTERNAL_LINK" themeNames="primary"
                iconAfterText="true"/>
        <button id="learnMoreButton" text="msg://learnMoreButton.text" icon="QUESTION"
                iconAfterText="true"/>
    </footer>
</card>

标题和副标题

标题用于识别卡片，而副标题在其下方添加次要文本。分别使用 title 和 subtitle 属性来定义，还可以使用同名的内部元素。内部元素优先级高于属性。

当使用了 自定义 header 时，会忽略这两个属性的配置。

使用 title 和 subtitle 属性的卡片：

<card width="20em"
      themeNames="elevated"
      title="msg://card.title"
      subtitle="msg://card.subtitle">
    <content>
        <p text="msg://card.content.text"/>
    </content>
</card>

使用 title 和 subtitle 内部元素的卡片：

<card width="20em"
      themeNames="elevated">
    <title>
        <div>
            <h2 text="msg://card.title"/>
            <div text="msg://card.subtitle"
                 classNames="uppercase text-xs text-secondary"/>
        </div>
    </title>
    <content>
        <p text="msg://card.content.text"/>
    </content>
</card>
<card width="20em"
      title="msg://card.title"
      themeNames="elevated">
    <subtitle>
        <div text="msg://card.subtitle"/>
    </subtitle>
    <content>
        <p text="msg://card.content.text"/>
    </content>
</card>

自定义 Header

在线示例

通过 header 元素可以声明自定义内容替换预定义的标题和副标题区域。headerPrefix 和 headerSuffix 插槽用于在该内容的前后放置组件。

<layout classNames="card-header">
    <card id="card" width="30em"
          themeNames="cover-media elevated outlined">
        <headerPrefix>
            <avatar image="icons/jmix-icon.png"/>
        </headerPrefix>
        <header>
            <flexLayout flexDirection="COLUMN_REVERSE" classNames="header">
                <h2 text="Jmix"/>
                <div text="Modern Dev platform" classNames="subtitle"/>
            </flexLayout>
        </header>
        <headerSuffix>
            <badge text="Fullstack" themeNames="success"/>
        </headerSuffix>
    </card>
</layout>

headerPrefix 插槽一般包含一个 头像、图标 或其他可视化的标识符元素。

headerSuffix 插槽一般包含状态提示符或者操作。

媒体

指定一个可视化组件，例如 图片、头像 或 图标，作为卡片的媒体内容显示。

如需控制媒体内容的尺寸，请使用 themeNames 属性设置 stretch-media 或 cover-media 样式。

<card width="20em"
      themeNames="elevated, stretch-media"
      title="msg://card.title"
      subtitle="msg://card.subtitle">
    <media>
        <image resource="icons/headphones.png"/>
    </media>
    <content>
        <p text="msg://card.content.text"/>
    </content>
</card>

主要内容

包含卡片的主要内容。这个插槽可以放置任意个元素，为丰富和复杂的布局提供灵活性。

<card width="20em"
      title="msg://card.title"
      subtitle="msg://card.subtitle"
      themeNames="outlined" titleHeadingLevel="4">
    <content>
        <p text="msg://card.content.text"/>
        <vbox spacing="false" padding="false">
            <p text="Color:"/>
            <radioButtonGroup id="colorRBtn"
                              themeNames="vertical"/>
        </vbox>
    </content>
</card>

定义卡片的底部区域。此插槽支持多个元素，可为操作、状态指示和补充信息提供灵活的布局。

Footer 位于主要内容之后，当卡片的高度足够时，在底部显示。

<card width="20em"
      themeNames="elevated"
      title="msg://card.title"
      subtitle="msg://card.subtitle" titleHeadingLevel="1">
    <content>
        <p text="msg://card.content.text"/>
    </content>
    <footer>
        <span text=" Delivery: 1-2 days"
              themeNames="badge, success"/>
        <button id="buyButton"
                text="Buy Now"
                icon="vaadin:clock"
                iconAfterText="true"/>
    </footer>
</card>

样式版本

在线示例

使用 themeNames 设置组件的样式。

样式 描述 支持的主题

outlined

为卡片添加边框

Aura, Lumo

elevated

为卡片添加阴影效果。

Aura, Lumo

horizontal

卡片内容水平布局。

Aura, Lumo

stretch-media

调整媒体内容以填满其容器。

Aura, Lumo

cover-media

裁剪媒体内容以覆盖其容器。

Aura, Lumo

XML 属性

通用属性 对所有组件都是一样的配置。

下面是 card 的特殊属性：

Name Description Default

subtitle

设置具有预定义样式的次要文本内容。参考 标题和副标题。

—

title

设置具有预定义样式的文本内容。参考 标题和副标题。

—

titleHeadingLevel

设置通过标题（title 属性）的 aria-level。取值有效范围是 1 至 6。该配置对自定义标题组件无效。

2

事件和处理器

下面是 card 支持的通用事件：

AttachEvent - DetachEvent

XML 内部元素

一个 card 可以包含 title、subtitle、header、headerPrefix、headerSuffix、media、content 和 footer 作为其内部元素。

参考