CardContent

Başlık, doğru içerik ve gövde metni içeren bir araç yapısı sağlar. renderer metni, şekilleri, grafikleri veya tabloları düzenlemek için kullanılabilecek başlık ve kenar boşlukları hariç contentSize değerini alır.

Örnek

function main() {
  return (
    <CardContent
      title="Speed"
      trailing="GPS"
      renderer={(metrics) => (
        <Text width={metrics.contentSize.width} fontSize={48}>
          78
        </Text>
      )}
    />
  );
}

Kullanım

renderer başlık ölçümünden sonra metrics alır. Yükseklik tahmini yerine contentSize kullanın. inset başlık ve kenarlar için yer ayırır, full başlık arkasını da kapsar.
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

title?string | View | null

Başlık metni veya View.

Örnek""

renderer?(metrics: CardContentMetrics) => ViewContent

Ölçülen başlık boyutlarıyla içerik oluşturur.

Örnekmetrics => <Group/>

children?ViewContent

Alt çizim içeriği.

trailing?string | View | null

Başlığın sonundaki metin veya View.

Örnek""

contentMode?"inset" | "full"

inset başlık altında kenar boşluğu bırakır; full tüm kartı kullanır.

Örnek"inset"

headerBackground?View | null

Başlık arkasındaki View; null kaldırır. Gövde içeriğine katılmaz.

Örnek<Material type="frosted"/>

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 (
    <CardContent
      title="Speed"
      trailing={<Symbol name="location.fill" />}
      contentMode="inset"
      renderer={(metrics) => (
        <VStack
          width={metrics.contentSize.width}
          height={metrics.contentSize.height}
          spacing={4}
        >
          <Text fontSize={Math.min(64, metrics.contentSize.height * 0.55)}>
            78
          </Text>
          <Text fontSize={14}>km/h</Text>
        </VStack>
      )}
    />
  );
}

Animasyon

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.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.

Özellikler	Atlandığında
`contentMode`	`"inset"`

Örnek

Kullanım

Özellikler

Pratik örnek

Animasyon

Atlandığında

İlgili API’ler

VStack

Material

Bu sayfada