Card 🔗

Карточки – один из самых популярных способов представления контента в интерфейсах

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

Исходный код для примера выше:

<Grid m={3}>
    <Card variant="white" color="red-1">
        <svelte:fragment slot="title">Svelte</svelte:fragment>
        <svelte:fragment slot="text">Svelte is a radical new approach to building user interfaces</svelte:fragment>
        <svelte:fragment slot="right">Перейти</svelte:fragment>
    </Card>
    <Card variant="white" color="blue-2">
        <svelte:fragment slot="title">React</svelte:fragment>
        <svelte:fragment slot="text">A JavaScript library for building user interfaces</svelte:fragment>
        <svelte:fragment slot="right">Перейти</svelte:fragment>
    </Card>
    <Card variant="white" color="red-2">
        <svelte:fragment slot="title">Vue</svelte:fragment>
        <svelte:fragment slot="text">The Progressive JavaScript Framework</svelte:fragment>
        <svelte:fragment slot="right">Перейти</svelte:fragment>
    </Card>
</Grid>

Параметры:

variant

enum

Вариант заднего фона карточки (белый или серый).
Поддерживаются два значения: white и grey.
Значение по умолчанию: grey

color

enum

Изображение градиента (в правом углу карточки).
Поддерживаются четыре значения: red-1, red-2, blue-1 и blue-2.
Значение по умолчанию: red-1

transition

object

Объект, описывающий переходы для компонента. Имеет следующие свойства:
in – переход при монтировании компонента
out – переход при демонтировании компонента

Каждое из этих свойств может содержать в себе объект со следующими свойствами:
func – функция, выполняющая переход от начального состояния к конечному
options – опциональный объект с опциональными свойствами delay, duration и easing
Подробнее: Документация по Svelte

node

HTMLElement

Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)

id

string

Аналог стандартного атрибута id

className

string

Аналог стандартного атрибута class

Слоты:

title

Заголовок карточки

text

Текст внутри карточки

left

Текст, располагающийся в левой половине подвала карточки

right

Текст, располагающийся в правой половине подвала карточки (по умолчанию синего цвета)

Поддерживаемые события:

on:click

on:mouseover

on:mouseleave

on:mouseup

on:mousedown