SusCard

Карточка-поверхность для группировки title, body и actions.

Пакет

SusKit · Молекулы (коммерческий)

Открыть в песочнице

SusKit · Molecules

Свойства

Имя	Тип	По умолчанию
Variant	Prop<string>	"elevated"	v-model
Selected	Prop<bool>	false	v-model
Disabled	Prop<bool>	false	v-model
Title	Prop<string>	""	v-model
Subtitle	Prop<string>	""	v-model
Text	Prop<string>	""	v-model
Image	Prop<string>	""	v-model
ImageHeight	Prop<float>	0f	v-model
ImageGradient	Prop<bool>	false	v-model
Loading	Prop<bool>	false	v-model
LoadingColor	Prop<string>	"primary"	v-model
Hover	Prop<bool>	false	v-model
Link	Prop<bool>	false	v-model
Rounded	Prop<string>	"md"	v-model
MinHeight	Prop<float>	0f	v-model
MinWidth	Prop<float>	0f	v-model

Слоты

Имя
header
(по умолчанию)
actions
footer

События

Имя	Поле	Payload
Click	OnClick	—

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• sus-card
• sus-card__actions
• sus-card__body
• sus-card__header
• sus-card__image-gradient
• sus-card__image-wrap
• sus-card__loader
• sus-card__subtitle
• sus-card__text
• sus-card__title
• sus-card--disabled
• sus-card--elevated
• sus-card--flat
• sus-card--hover
• sus-card--link
• sus-card--loading
• sus-card--outlined
• sus-card--rounded-lg
• sus-card--rounded-pill
• sus-card--rounded-sm
• sus-card--rounded-xl
• sus-card--selected
• sus-card--tonal
• sus-slot

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

<template>
  <sus:SusCard Title="Card title"
               Subtitle="Subtitle"
               Text="Body text for the card."
               Variant="elevated"
               :Selected="Selected.Value"
               :Hover="Hover.Value"
               :Loading="Loading.Value"
               @click="OnClick">
    <template #actions>
      <sus:SusButton Text="Details" Variant="text" />
    </template>
  </sus:SusCard>
</template>

<script>
public Prop<bool> Selected = new(false);
public Prop<bool> Hover = new(false);
public Prop<bool> Loading = new(false);
void OnClick() { /* fires when Link is true */ }
</script>

var card = new SusCard();
card.Title.Value = "Card title";
card.Subtitle.Value = "Subtitle";
card.Text.Value = "Body text for the card preview.";
card.Variant.Value = "elevated";
card.Rounded.Value = "md";
card.OnClick += () => { /* … */ };

Вариант

elevated · flat · tonal · outlined

Заметки

• Слоты: header, default body, actions, footer.
• Установите Link, чтобы включить обработку кликов (OnClick).
• Image + ImageHeight / ImageGradient добавляют медиа-полосу над header.