Spacer

İçeriği her iki tarafa da itmek için Yığın'da kalan alanı ayırın veya içerik için elastik mesafe ayırın. minLength minimum uzunluğu ayarlar; açık width veya height boyutu karşılık gelen yönde sabitleyebilir.

Örnek

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

Kullanım

Spacer çizmez. HStack içinde yatay, VStack içinde dikey kalan alanı alır; minLength alt sınırdır. width/height ekseni sabitler. Arka plan, opaklık ve efekt yoktur.
Sayısal ölçüler noktadır. auto içeriği ölçer, fill ebeveynin ayırdığı alanı kullanır. Önce kapsayıcıyı boyutlandırın; fill veya uzun metin sabit ebeveyni genişletmez.

Özellikler

minLength?number

Üst Stack ana eksenindeki en küçük esnek boşluk, punto.

Örnek0

Ortak özellikler

width?number | "auto" | "fill"

Punto cinsinden genişlik, otomatik boyut veya üst alanı doldurma.

Örnek"auto"

height?number | "auto" | "fill"

Punto cinsinden yükseklik, otomatik boyut veya üst alanı doldurma.

Örnek"auto"

animations?SpacerAnimation[]

Özellik değişimini canlandırır. duration/delay saniye; from/to uçlar; repeat/autoreverse tekrar, wrap dönem.

Örnek[{property: "minLength", duration: 0.25, curve: "easeInOut"}]

key?string | number

Kardeş öğeler arasında kararlı kimlik.

Örnek""

Pratik örnek

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>
  );
}

Animasyon

widthheightminLength

Atlandığında

Tablo uygulamada doğrulanmış atlama davranışıdır; örnekler varsayılan değildir. Sabit sonuç için açık değer kullanın; bağlama bağlı boyut ve tema renkleri sabit sayı değildir.

Özellikler	Atlandığında
`minLength`	`0`

Örnek

Kullanım

Özellikler

Pratik örnek

Animasyon

Atlandığında

İlgili API’ler

HStack

VStack

Bu sayfada