card

ДЕМО

Компонент Card - это универсальный контейнер для отображения контента в виде карточки, предлагающий варианты настройки макета и внешнего вида для группировки связанного контента и действий.

XML-элемент

card

Java-класс

JmixCard

Атрибуты

id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - enabled - height - maxHeight - maxWidth - minHeight - minWidth - subtitle - themeNames - title - titleHeadingLevel - visible - width

Обработчики

AttachEvent - DetachEvent

Элементы

content - footer - header - headerPrefix - headerSuffix - media - subtitle - title

Основы

Следующий пример демонстрирует создание простой карточки с информацией о товаре.

<card id="productCard"
      width="30em"
      themeNames="elevated"> (1)
    <title>
        <p text="msg://card.title"/> (2)
    </title>
    <subtitle>
        <p text="msg://card.subtitle"/> (3)
    </subtitle>
    <media>
        <image resource="icons/headphones.png"/> (4)
    </media>
    <content>
        <p text="msg://card.content.text"/>(5)
    </content>
    <footer> (6)
        <button id="addButton"
                text="msg://addButton.text"
                icon="EXTERNAL_LINK"
                themeNames="primary"
                iconAfterText="true"/>
        <button id="detailsButton"
                text="msg://detailsButton.text"
                icon="QUESTION"
                iconAfterText="true"/>
    </footer>
</card>
1 Вариант темы elevated применяет эффект тени.
2 Определяет основной заголовок с помощью предопределенного слота title.
3 Определяет дополнительный заголовок с помощью предопределенного слота subtitle.
4 Слот media содержит изображение товара.
5 Слот content содержит основной описательный текст.
6 Слот footer группирует кнопки действий, фиксируя их в нижней части карточки.
card basic

Компонент Card отображает контент в структурированном, карточном макете. Информация внутри карточки может быть заполнена либо через атрибуты компонента, либо с использованием его внутренних элементов, известных как слоты.

Визуальный вид карточки - включая тени, границы и фон - настраивается. Это достигается применением различных вариантов темы.

Слоты

Компонент предоставляет несколько предопределенных слотов для гибкой организации контента. Слот - это вложенный элемент внутри компонента.

Чтобы добавить слот в Jmix Studio, выберите card в XML-дескрипторе экрана или на панели структуры Jmix UI и нажмите Add→[Slot Name] на панели Component Inspector.
Все слоты, кроме content и footer, ограничены содержанием одного вложенного компонента.

Title

Title (заголовок) - текстовое содержимое с предопределенным стилем.

Определить заголовок карточки можно одним из следующих способов:

  • Используя атрибут title на компоненте.

  • Используя вложенный элемент title.

  • Если заголовок указан и с помощью атрибута title, и с помощью вложенного элемента title, используется значение из вложенного элемента, а значение атрибута игнорируется.

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

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

Subtitle

Subtitle (подзаголовок) предоставляет дополнительный текстовый контент с предопределенным стилем, отображаемым непосредственно под основным заголовком. Он предназначен для использования вместе с заголовком.

Определить подзаголовок карточки можно одним из следующих способов:

  • Используя атрибут subtitle на компоненте.

  • Используя вложенный элемент subtitle.

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

  • subtitle (и title) не отображаются, если присутствует слот 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>

Карточка с вложенным элементом subtitle:

<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 (заголовок) определяет пользовательский компонент, используемый в качестве заголовка карточки.

Когда определен слот заголовка, он имеет приоритет над слотами title и subtitle. Пользовательская разметка заголовка отображается вместо них, полностью заменяя заголовок и подзаголовок по умолчанию.

Карточка с вложенным элементом header:

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

HeaderPrefix

HeaderPrefix (префикс заголовка) определяет компонент для отображения перед основным содержимым заголовка.

card header prefix

Этот слот обычно используется для таких элементов, как аватар, иконка или другой визуальный индикатор, предшествующий заголовку и подзаголовку.

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

HeaderSuffix

HeaderSuffix (суффикс заголовка) определяет компонент для отображения после основного содержимого заголовка.

card header suffix

Этот слот обычно используется для кнопок действий, декоративных иконок или других интерактивных элементов, относящихся к заголовку.

<card width="20em"
      themeNames="elevated"
      title="msg://card.title"
      subtitle="msg://card.subtitle">
    <content>
        <p text="msg://card.content.text"/>
    </content>
    <headerSuffix>
        <span text="SALE!" themeNames="badge, error"/>
    </headerSuffix>
</card>

Media

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

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

Применяет границу (рамку) вокруг карточки.

card outlined

elevated

Добавляет эффект тени для создания ощущения глубины.

card elevated

horizontal

Располагает содержимое карточки горизонтально.

card horizontal

stretch-media

Масштабирует медиа-контент, чтобы заполнить его контейнер.

card stretch media

cover-media

Обрезает медиа-контент для заполнения его контейнера.

card cover media

Все варианты темы можно комбинировать вместе.

Атрибуты

Общие атрибуты служат одной и той же цели для всех компонентов.

Следующие атрибуты специфичны для card:

Название

Описание

Значение по умолчанию

subtitle

Задает дополнительное текстовое содержимое с предопределенным стилем. Смотрите Subtitle.

title

Задает текстовое содержимое с предопределенным стилем. Смотрите Title.

titleHeadingLevel

Этот параметр определяет уровень HTML-заголовка для текста заголовков. Его значение присваивается HTML-атрибуту aria-level. Значение titleHeadingLevel должно быть в пределах от 1 до 6. Важно: Значения вне допустимого диапазона (1-6) могут вызвать серьезные проблемы с доступностью, и их следует избегать.

2

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

Дополнительную информацию смотрите в документации Vaadin.