Rectangle

Рисует прямоугольник с дополнительными закругленными углами для использования с фоном, индикаторами выполнения и границами. background заполняет внутреннюю часть, stroke обводки, lineWidth и strokePosition управляют шириной и положением обводки.

Пример

function main() {
  return (
    <Rectangle
      width={160}
      height={80}
      cornerRadius={16}
      background={LinearGradient(['#A9E56F', '#30B3A2'])}
      stroke={$env.foreground}
      lineWidth={2}
      strokePosition="inside"
    />
  );
}

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

background заливает, stroke обводит. cornerRadius не больше половины короткой стороны. inside внутри, center на границе, outside снаружи; родитель может обрезать внешнюю обводку.
mask использует альфу: непрозрачное показывает, прозрачное скрывает. Чёрный и белый с одинаковой альфой равны. Маска не участвует в раскладке; задайте размер и отличайте от clipped.
background/stroke принимают Color или Gradient. Используйте три конструктора: позиции и центры 0–1, радиусы в пунктах. HDR оборачивает один цвет; яркость зависит от устройства и среды.

Свойства

background?Paint

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

ПримерHDR($env.dark ? "white" : "black")

cornerRadius?number

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

Пример0

stroke?Paint

Цвет или градиент обводки; clear скрывает её.

Пример"clear"

lineWidth?number

Толщина линии в пунктах; 0 не рисует линию.

Пример2

strokePosition?"inside" | "center" | "outside"

Положение обводки относительно контура: inside, center или outside.

Пример"inside"

lineCap?"round" | "butt" | "square"

Конец линии: butt обрезает, square продлевает квадратом, round закругляет.

Пример"round"

lineJoin?"round" | "miter" | "bevel"

Форма стыков: miter, round или bevel.

Пример"round"

dash?number[]

Чередующиеся длины штрихов и пробелов в пунктах; пустой массив даёт сплошную линию.

Пример[]

dashPhase?number

Смещение штрихового узора в пунктах.

Пример0

trimStart?number

Видимый участок trimStart–trimEnd в 0–1. Circle/Ellipse/Arc используют углы.

Пример0

trimEnd?number

Видимый участок trimStart–trimEnd в 0–1. Circle/Ellipse/Arc используют углы.

Пример1

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

width?number | "auto" | "fill"

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

Пример"fill"

height?number | "auto" | "fill"

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

Пример"fill"

x?number

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

Пример0

y?number

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

Пример0

transform?ViewTransform

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

Пример{rotation: 0}

opacity?number

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

Пример1

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 (
    <HStack spacing={20}>
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="inside"
      />
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="outside"
      />
    </HStack>
  );
}

Анимация

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

При пропуске

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

Свойства	При пропуске
`cornerRadius`	`0`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`trimStart`	`0`
`trimEnd`	`1`
`background`	`HDR($env.dark ? 'white' : 'black')`

Пример

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

Свойства

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

Анимация

При пропуске

Color / Gradient

ZStack

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

Rectangle

Пример

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

Свойства

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

Анимация

При пропуске

Связанные API

Color / Gradient

ZStack

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