CapDrive
Руководство

Text

Отображение показаний, единиц измерения или описательного текста. Можно установить шрифт, размер шрифта, выравнивание, перенос строк и усечение; содержимое равномерно преобразуется в строку, а пустые значения отображаются как пустые.

Пример

function main() {
  return (
    <Text fontSize={32} font="rounded" lineLimit={2} truncationMode="tail">
      Hello, CapDrive
    </Text>
  );
}

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

  • Содержимое преобразуется через toString(); null/undefined пусты. Значки объединяйте через HStack, не вкладывайте View в Text. Ограничьте width перед lineLimit/truncationMode. minimumScaleFactor=1 запрещает уменьшение.
  • Числовые размеры — в пунктах. auto измеряет содержимое, fill использует выделенное место. Сначала задайте контейнер: fill и длинный текст не расширяют фиксированного родителя.

Свойства

children?TextContent | TextContent[]

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

fontSize?number

Размер шрифта в пунктах.

Пример14
fontWeight?"ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"

Насыщенность шрифта от ultraLight до black; regular — обычная.

Пример"regular"
font?"default" | "rounded" | "monospaced" | "serif"

Дизайн шрифта: default, rounded, monospaced или serif.

Пример"default"
color?Paint

Цвет рисования, включая цвета HDR.

ПримерHDR($env.foreground)
alignment?"leading" | "center" | "trailing"

Выравнивание текста в доступной ширине: leading, center или trailing.

Пример"leading"
lineLimit?number | null

Максимум строк; null или отсутствие разрешает перенос без ограничения числа строк.

Пример1
truncationMode?"head" | "middle" | "tail"

Место сокращения текста: head, middle или tail.

Пример"tail"
minimumScaleFactor?number

Минимальный масштаб текста при нехватке места: 0.01–1; 1 запрещает уменьшение.

Пример0.5
monospacedDigits?boolean

Одинаковая ширина цифр предотвращает горизонтальные скачки чисел.

Примерtrue
letterSpacing?number

Дополнительный межсимвольный интервал в пунктах.

Пример0
contentAnimation?ContentAnimation

Переход при изменении содержимого. Выберите поддерживаемый type; duration/delay в секундах.

Пример{type: "numericText"}
Общие свойства
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 (
    <VStack width={180} spacing={12}>
      <Text width="fill" fontSize={20} lineLimit={2} truncationMode="tail">
        CapDrive — a longer instrument title
      </Text>
      <HStack alignment="firstTextBaseline" spacing={4}>
        <Text fontSize={48} monospacedDigits={true}>
          78
        </Text>
        <Text fontSize={14}>km/h</Text>
      </HStack>
    </VStack>
  );
}

Анимация

Анимация

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

При пропуске

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

СвойстваПри пропуске
fontSize14
fontWeight"regular"
font"default"
monospacedDigitstrue
minimumScaleFactor1
lineLimitnull
alignment"center"
truncationMode"tail"
colorHDR($env.foreground)

HStack

Symbol

Color / Gradient

Color / Gradient

Предыдущее

Image

Следующий шаг

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

ПримерИспользованиеСвойстваПрактический примерАнимацияПри пропускеСвязанные API