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 или одноимённых вложенных элементов. Вложенный элемент имеет приоритет над соответствующим атрибутом.

Если задан пользовательский заголовок, эти значения не отображаются.

Карточка с атрибутами 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, чтобы заменить стандартную область заголовка и подзаголовка пользовательским содержимым. Слоты 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>
            <span text="Fullstack" themeNames="badge success"/>
        </headerSuffix>
    </card>
</layout>

Слот headerPrefix обычно содержит аватар, значок или другой визуальный идентификатор.

Слот headerSuffix обычно содержит индикатор состояния или действие.

Медиа карточки

Слот media задаёт визуальный компонент, например изображение, аватар или значок, который отображается как медиасодержимое карточки.

Чтобы настроить размер медиасодержимого, примените вариант темы stretch-media или cover-media с помощью атрибута themeNames.

<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>

Содержимое карточки

Слот content содержит основное содержимое карточки. В него можно добавить любое количество элементов, чтобы создавать сложные компоновки.

<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
Все варианты темы можно комбинировать.

Атрибуты

Следующие атрибуты относятся только к card:

Имя Описание По умолчанию

subtitle

Задаёт вспомогательный текст со стандартным оформлением. См. Заголовок и подзаголовок.

—

title

Задаёт текст заголовка со стандартным оформлением. См. Заголовок и подзаголовок.

—

titleHeadingLevel

Задаёт aria-level заголовка, определённого атрибутом title. Не влияет на пользовательский компонент заголовка. Используйте значение от 1 до 6, чтобы сохранить правильную иерархию заголовков.

2

Обработчики

Имя Описание

AttachEvent

Срабатывает при присоединении карточки к UI.

DetachEvent

Срабатывает при отсоединении карточки от UI.

Элементы

card может содержать описанные выше элементы title, subtitle, header, headerPrefix, headerSuffix, media, content и footer.

Смотрите также