CardКарточка

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

Использование

При необходимости импортируйте компонент:

import 'mdui/components/card.js';

При необходимости импортируйте типы TypeScript:

import type { Card } from 'mdui/components/card.js';

Пример использования:

Card

<mdui-card style="width: 200px;height: 124px">Card</mdui-card>

Примеры

Варианты

Используйте атрибут variant для установки варианта карточки.

<mdui-card variant="elevated" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="filled" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="outlined" style="width: 200px;height: 124px"></mdui-card>

Исходный код

Возможность нажатия

Добавьте атрибут clickable, чтобы карточка стала интерактивной. При этом добавляются эффекты при наведении курсора и эффект пульсации при клике.

<mdui-card clickable style="width: 200px;height: 124px"></mdui-card>

Исходный код

Ссылка

Добавьте атрибут href, чтобы превратить карточку в ссылку. При этом также можно использовать связанные с ссылками атрибуты: download, target, rel.

<mdui-card href="https://www.mdui.org" target="_blank" style="width: 200px;height: 124px"></mdui-card>

Исходный код

Отключённое состояние

Добавьте атрибут disabled, чтобы отключить карточку.

<mdui-card disabled style="width: 200px;height: 124px"></mdui-card>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
Вариант карточки. Возможные значения: `elevated` — карточка с тенью, заметное визуальное отделение от фона `filled` — залитая цветом карточка, слабое визуальное отделение от фона `outlined` — карточка с рамкой, максимальное визуальное отделение от фона
`clickable`	`clickable`	`boolean`	`false`
Определяет, является ли карточка кликабельной. При `true` карточка реагирует на наведение и показывает эффект волны при клике.
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключена ли карточка.
`href`	`href`	`string`	-
Целевой URL ссылки. Если задано это свойство, компонент будет отображаться как элемент `<a>` и можно использовать свойства, связанные со ссылками.
`download`	`download`	`string`	-
Имя файла для скачивания при переходе по ссылке. Примечание: Это свойство действует только при заданном свойстве `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Определяет, где будет открыта ссылка. Возможные значения: `_blank` — открывает ссылку в новом окне `_parent` — открывает ссылку в родительском фрейме `_self` — открывает ссылку в текущем фрейме (по умолчанию) `_top` — открывает ссылку во всём окне Примечание: Это свойство действует только при заданном свойстве `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Определяет тип связи между текущим документом и связанным документом. Возможные значения: `alternate` — альтернативная версия текущего документа `author` — автор текущего документа или статьи `bookmark` — постоянная ссылка на ближайший родительский раздел `external` — ссылка ведёт на другой сайт `help` — ссылка на соответствующую справочную документацию `license` — основное содержимое текущего документа лицензируется по лицензии связанного файла `me` — текущий документ представляет владельца связанного контента `next` — текущий документ является частью серии, а цитируемый документ — следующим в серии `nofollow` — не передавать ссылке вес `noreferrer` — не передаёт заголовок `Referer`. Эффект аналогичен `noopener` `opener` — если гиперссылка создаёт контекст просмотра верхнего уровня (то есть значение атрибута `target` равно `_blank`), создаётся вспомогательный контекст просмотра `prev` — текущий документ является частью серии, а цитируемый документ — предыдущим в серии `search` — содержит ссылку на ресурс, который можно использовать для поиска по текущему файлу и связанным с ним страницам `tag` — указывает тег, относящийся к текущему документу (определяется по указанному адресу) Примечание: Доступно только при заданном свойстве `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.

Методы

Название	Параметры	Возвращаемое значение
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.

Slots

Название
(по умолчанию)
Содержимое карточки.

Пользовательские CSS-свойства

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.

Предыдущая глава

ButtonIcon Кнопка с иконкой

Следующая глава

Checkbox Чекбокс