CapDrive
Kullanım kılavuzu

Text

Okumayı, birimleri veya açıklayıcı metni görüntüleyin. Yazı tipi, yazı tipi boyutu, hizalama, satır kaydırma ve kesme ayarlanabilir; içerik eşit şekilde bir dizeye dönüştürülür ve boş değerler boş olarak görüntülenir.

Örnek

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

Kullanım

  • İçerik toString() ile dönüşür; null/undefined boştur. Simge ve metni HStack ile birleştirin, Text içine View koymayın. lineLimit/truncationMode öncesi width sınırlayın. minimumScaleFactor=1 küçültmez.
  • 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

children?TextContent | TextContent[]

Alt çizim içeriği.

fontSize?number

Punto cinsinden yazı tipi boyutu.

Örnek14
fontWeight?"ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"

Yazı kalınlığı ultraLight ile black arası; regular normaldir.

Örnek"regular"
font?"default" | "rounded" | "monospaced" | "serif"

Yazı tasarımı: default, rounded, monospaced veya serif.

Örnek"default"
color?Paint

HDR renkleri dahil çizim rengi.

ÖrnekHDR($env.foreground)
alignment?"leading" | "center" | "trailing"

Metnin genişlik içindeki hizası: leading, center veya trailing.

Örnek"leading"
lineLimit?number | null

En fazla satır sayısı; null veya atlama sınırsız satır kaydırır.

Örnek1
truncationMode?"head" | "middle" | "tail"

Sığmayan metnin çıkarılacağı yer: head, middle veya tail.

Örnek"tail"
minimumScaleFactor?number

Yer daralınca en küçük metin ölçeği 0.01–1; 1 küçültmez.

Örnek0.5
monospacedDigits?boolean

Eşit genişlikte rakamlar, değer değişirken yatay sıçramayı önler.

Örnektrue
letterSpacing?number

Ek karakter aralığı, punto.

Örnek0
contentAnimation?ContentAnimation

İçerik değişimi geçişi. Desteklenen type seçilir; duration/delay saniyedir.

Örnek{type: "numericText"}
Ortak özellikler
width?number | "auto" | "fill"

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

Örnek100
height?number | "auto" | "fill"

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

Örnek80
padding?number

Punto cinsinden içerik iç boşluğu.

Örnek0
x?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
y?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
transform?ViewTransform

Yerleşimi değiştirmeyen bütünsel dönüşüm. Kaydırma punto, dönüş/eğim derece, ölçek 1 değişmez, dayanak 0–1.

Örnek{rotation: 0}
background?Paint

Arka plan rengi veya gradyanı; clear saydamdır.

Örnek"clear"
opacity?number

Tüm View opaklığı: 0 saydam, 1 opak.

Örnek1
cornerRadius?number

Köşe yarıçapı, punto.

Örnek0
clipped?boolean

View sınırlarını aşan çizimi kırpar.

Örnekfalse
clip?"rectangle" | "ellipse"

Kırpma şekli rectangle veya ellipse; Material için false kapatır.

Örnek"rectangle"
mask?View | null

Alfa maskesi View öğesi. Düzeni etkilemeden ortalanır; null maskeyi devre dışı bırakır.

Örnek<Circle width="fill" height="fill" background="white"/>
zIndex?number

Kardeşler arasında çizim sırası; büyük değer öndedir.

Örnek0
blur?number

Bulanıklık yarıçapı, punto; 0 kapatır.

Örnek4
innerShadow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Dış gölge rengi.

ÖrnekHDR("black")
shadowOpacity?number

Gölge opaklığı 0–1; 0 gizler.

Örnek0
shadowRadius?number

Dış gölge bulanıklık yarıçapı, punto.

Örnek4
shadowX?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek0
shadowY?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek2
animations?Animation[]

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

Örnek[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

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

Pratik örnek

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

Animasyon

Animasyon

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

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.

ÖzelliklerAtlandığında
fontSize14
fontWeight"regular"
font"default"
monospacedDigitstrue
minimumScaleFactor1
lineLimitnull
alignment"center"
truncationMode"tail"
colorHDR($env.foreground)

HStack

Symbol

Color / Gradient

Color / Gradient

Önceki

Image

Sonraki adım

Bu sayfada

ÖrnekKullanımÖzelliklerPratik örnekAnimasyonAtlandığındaİlgili API’ler