Spacer

Выделите оставшееся пространство в стеке, чтобы разместить контент с обеих сторон, или зарезервируйте гибкое расстояние для контента. minLength устанавливает минимальную длину, явные width или height могут зафиксировать размер в соответствующем направлении.

Пример

function main() {
  return (
    <HStack>
      <Text>A</Text>
      <Spacer minLength={16} />
      <Text>B</Text>
    </HStack>
  );
}

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

Spacer ничего не рисует. В HStack занимает горизонтальный остаток, в VStack вертикальный; minLength — минимум. Явные width/height фиксируют ось. Фон, прозрачность и эффекты отсутствуют.
Числовые размеры — в пунктах. auto измеряет содержимое, fill использует выделенное место. Сначала задайте контейнер: fill и длинный текст не расширяют фиксированного родителя.

Свойства

minLength?number

Минимальное гибкое пространство по главной оси родительского Stack, в пунктах.

Пример0

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

width?number | "auto" | "fill"

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

Пример"auto"

height?number | "auto" | "fill"

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

Пример"auto"

animations?SpacerAnimation[]

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

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

key?string | number

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

Пример""

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

function main() {
  return (
    <VStack spacing={16}>
      <HStack width={240}>
        <Text>A</Text>
        <Spacer minLength={20} />
        <Text>B</Text>
      </HStack>
      <HStack width={240}>
        <Text>A</Text>
        <Spacer width={20} />
        <Text>B</Text>
      </HStack>
    </VStack>
  );
}

Анимация

widthheightminLength

При пропуске

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

Свойства	При пропуске
`minLength`	`0`

Пример

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

Свойства

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

Анимация

При пропуске

Связанные API

HStack

VStack

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