CardContent

Menyediakan struktur instrumen dengan judul, konten yang tepat, dan teks isi. Teks renderer akan mendapatkan contentSize dikurangi judul dan margin, yang dapat digunakan untuk menyusun gambar, grafik, atau bagan.

Contoh

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

Penggunaan

renderer menerima metrics setelah header diukur. Gunakan contentSize, bukan perkiraan tinggi. inset menyisakan header dan margin; full memakai seluruh kartu termasuk belakang header.
Ukuran angka memakai poin. auto mengukur isi; fill memakai alokasi induk. Tentukan ukuran wadah dahulu; fill atau teks panjang tidak memperbesar induk tetap.

Properti

title?string | View | null

Teks header atau View.

Contoh""

renderer?(metrics: CardContentMetrics) => ViewContent

Membuat konten menggunakan ukuran header yang telah diukur.

Contohmetrics => <Group/>

children?ViewContent

Konten gambar anak.

trailing?string | View | null

Teks atau View di ujung header.

Contoh""

contentMode?"inset" | "full"

inset menempatkan isi di bawah header dengan jarak; full memakai seluruh kartu.

Contoh"inset"

headerBackground?View | null

View di belakang header; null menghapusnya. Bukan bagian isi utama.

Contoh<Material type="frosted"/>

Properti umum

width?number | "auto" | "fill"

Lebar dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh100

height?number | "auto" | "fill"

Tinggi dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh80

padding?number

Padding konten dalam poin.

Contoh0

x?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0

y?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0

transform?ViewTransform

Transformasi seluruh View tanpa mengubah tata letak. Translasi dalam poin, rotasi/kemiringan dalam derajat, skala 1 tetap, jangkar 0–1.

Contoh{rotation: 0}

background?Paint

Warna atau gradasi latar; clear berarti transparan.

Contoh"clear"

opacity?number

Opasitas seluruh View: 0 transparan, 1 buram.

Contoh1

cornerRadius?number

Radius sudut dalam poin.

Contoh0

clipped?boolean

Potong gambar yang melewati batas View.

Contohfalse

clip?"rectangle" | "ellipse"

Bentuk potongan rectangle atau ellipse; Material juga menerima false untuk mematikan.

Contoh"rectangle"

mask?View | null

View masker alfa. Di tengah tanpa memengaruhi tata letak; null menonaktifkan masker.

Contoh<Circle width="fill" height="fill" background="white"/>

zIndex?number

Urutan gambar antar saudara; nilai lebih besar di depan.

Contoh0

blur?number

Radius buram dalam poin; 0 menonaktifkan.

Contoh4

innerShadow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

Contoh{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

Contoh{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Warna bayangan luar.

ContohHDR("black")

shadowOpacity?number

Opasitas bayangan 0–1; 0 menyembunyikannya.

Contoh0

shadowRadius?number

Radius buram bayangan luar dalam poin.

Contoh4

shadowX?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh0

shadowY?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh2

animations?Animation[]

Animasi perubahan properti. duration/delay dalam detik; from/to adalah ujung; repeat/autoreverse untuk pengulangan, wrap untuk periode.

Contoh[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Identitas stabil di antara elemen sejajar.

Contoh praktis

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

Animasi

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

Jika dihilangkan

Tabel menunjukkan perilaku penghilangan yang diverifikasi dari implementasi; contoh bukan default. Untuk hasil tetap beri nilai eksplisit; ukuran dan warna kontekstual bukan konstanta.

Properti	Jika dihilangkan
`contentMode`	`"inset"`

Contoh

Penggunaan

Properti

Contoh praktis

Animasi

Jika dihilangkan

API terkait

VStack

Material

Di halaman ini