CardContent

Предоставляет структуру инструмента с заголовком, нужным содержимым и основным текстом. Текст renderer получит contentSize минус заголовок и поля, которые можно использовать для упорядочения рисунков, графиков или диаграмм.

Пример

function main() {
  return (
    <CardContent
      title="Speed"
      trailing="GPS"
      renderer={(metrics) => (
        <Text width={metrics.contentSize.width} fontSize={48}>
          78
        </Text>
      )}
    />
  );
}

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

renderer получает metrics после измерения заголовка. Используйте contentSize, не угадывайте высоту. inset оставляет место заголовку и полям; full использует всю карточку, включая область под заголовком.
Числовые размеры — в пунктах. auto измеряет содержимое, fill использует выделенное место. Сначала задайте контейнер: fill и длинный текст не расширяют фиксированного родителя.

Свойства

title?string | View | null

Текст заголовка или View.

Пример""

renderer?(metrics: CardContentMetrics) => ViewContent

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

Примерmetrics => <Group/>

children?ViewContent

Дочернее графическое содержимое.

trailing?string | View | null

Текст или View в конце заголовка.

Пример""

contentMode?"inset" | "full"

inset размещает содержимое под заголовком с отступом; full использует всю карточку.

Пример"inset"

headerBackground?View | null

View за заголовком; null убирает его. Не является основным содержимым.

Пример<Material type="frosted"/>

Общие свойства

width?number | "auto" | "fill"

Ширина в пунктах, автоматический размер или заполнение родителя.

Пример100

height?number | "auto" | "fill"

Высота в пунктах, автоматический размер или заполнение родителя.

Пример80

padding?number

Внутренний отступ содержимого в пунктах.

Пример0

x?number

Визуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.

Пример0

y?number

Визуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.

Пример0

transform?ViewTransform

Преобразование всего View без изменения раскладки. Сдвиг в пунктах, поворот/наклон в градусах, масштаб 1 без изменений, якоря 0–1.

Пример{rotation: 0}

background?Paint

Цвет или градиент фона; clear означает прозрачность.

Пример"clear"

opacity?number

Непрозрачность всего View: 0 прозрачно, 1 непрозрачно.

Пример1

cornerRadius?number

Радиус скругления в пунктах.

Пример0

clipped?boolean

Обрезать рисунок за границами View.

Примерfalse

clip?"rectangle" | "ellipse"

Форма обрезки rectangle или ellipse; Material также принимает false для отключения.

Пример"rectangle"

mask?View | null

View альфа-маски. По центру без влияния на компоновку; null отключает маску.

Пример<Circle width="fill" height="fill" background="white"/>

zIndex?number

Порядок среди соседей; большее значение выводится впереди.

Пример0

blur?number

Радиус размытия в пунктах; 0 отключает его.

Пример4

innerShadow?DrawingEffect

Цвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.

Пример{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Цвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.

Пример{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Цвет внешней тени.

ПримерHDR("black")

shadowOpacity?number

Непрозрачность тени 0–1; 0 скрывает её.

Пример0

shadowRadius?number

Радиус размытия внешней тени в пунктах.

Пример4

shadowX?number

Смещение тени в пунктах: x вправо, y вниз.

Пример0

shadowY?number

Смещение тени в пунктах: x вправо, y вниз.

Пример2

animations?Animation[]

Анимация изменения свойства. duration/delay в секундах; from/to — границы; repeat/autoreverse — повторы, wrap — период.

Пример[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Стабильный идентификатор среди соседних элементов.

Практический пример

function main() {
  return (
    <CardContent
      title="Speed"
      trailing={<Symbol name="location.fill" />}
      contentMode="inset"
      renderer={(metrics) => (
        <VStack
          width={metrics.contentSize.width}
          height={metrics.contentSize.height}
          spacing={4}
        >
          <Text fontSize={Math.min(64, metrics.contentSize.height * 0.55)}>
            78
          </Text>
          <Text fontSize={14}>km/h</Text>
        </VStack>
      )}
    />
  );
}

Анимация

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

При пропуске

Таблица описывает проверенное поведение без свойства. Примеры не являются значениями по умолчанию. Фиксированный результат требует явных значений; размеры и цвета темы зависят от контекста.

Свойства	При пропуске
`contentMode`	`"inset"`

Пример

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

Свойства

Практический пример

Анимация

При пропуске

Связанные API

VStack

Material

На этой странице