CardContent

Fornisce una struttura dello strumento con titolo, contenuto corretto e corpo del testo. Il testo renderer otterrà contentSize meno il titolo e i margini, che possono essere utilizzati per organizzare figure, grafici o diagrammi.

Esempio

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

Utilizzo

renderer riceve metrics dopo la misura dell’intestazione. Usa contentSize anziché stimarne l’altezza. inset riserva intestazione e margini; full usa tutta la scheda, anche dietro l’intestazione.
Le misure numeriche sono punti. auto misura il contenuto; fill usa lo spazio assegnato dal genitore. Dimensiona prima il contenitore: fill e testo lungo non ampliano un genitore fisso.

Proprietà

title?string | View | null

Testo dell’intestazione o una View.

Esempio""

renderer?(metrics: CardContentMetrics) => ViewContent

Crea il contenuto usando le dimensioni misurate dell’intestazione.

Esempiometrics => <Group/>

children?ViewContent

Contenuto di disegno figlio.

trailing?string | View | null

Testo o View alla fine dell’intestazione.

Esempio""

contentMode?"inset" | "full"

inset mantiene il contenuto sotto l’intestazione con margini; full usa tutta la scheda.

Esempio"inset"

headerBackground?View | null

View dietro l’intestazione; null lo rimuove. Non fa parte del contenuto principale.

Esempio<Material type="frosted"/>

Proprietà comuni

width?number | "auto" | "fill"

Larghezza in punti, dimensione automatica o riempimento del contenitore.

Esempio100

height?number | "auto" | "fill"

Altezza in punti, dimensione automatica o riempimento del contenitore.

Esempio80

padding?number

Spaziatura interna del contenuto in punti.

Esempio0

x?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0

y?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0

transform?ViewTransform

Trasformazione globale senza cambiare il layout. Traslazione in punti, rotazione/inclinazione in gradi, scala 1 invariata, ancoraggi 0–1.

Esempio{rotation: 0}

background?Paint

Colore o gradiente di sfondo; clear è trasparente.

Esempio"clear"

opacity?number

Opacità dell’intero View: 0 trasparente, 1 opaco.

Esempio1

cornerRadius?number

Raggio degli angoli in punti.

Esempio0

clipped?boolean

Ritaglia il disegno oltre i limiti del View.

Esempiofalse

clip?"rectangle" | "ellipse"

Forma di ritaglio rectangle o ellipse; Material accetta anche false per disattivarlo.

Esempio"rectangle"

mask?View | null

View per la maschera alfa. Centrata senza modificare il layout; null disattiva la maschera.

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

zIndex?number

Ordine tra elementi fratelli; valori più grandi appaiono davanti.

Esempio0

blur?number

Raggio della sfocatura in punti; 0 la disattiva.

Esempio4

innerShadow?DrawingEffect

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

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

glow?DrawingEffect

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

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

shadowColor?Color

Colore dell’ombra esterna.

EsempioHDR("black")

shadowOpacity?number

Opacità dell’ombra 0–1; 0 la nasconde.

Esempio0

shadowRadius?number

Raggio di sfocatura dell’ombra esterna in punti.

Esempio4

shadowX?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio0

shadowY?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio2

animations?Animation[]

Anima le modifiche alle proprietà. duration/delay in secondi; from/to sono estremi; repeat/autoreverse controllano le ripetizioni, wrap il periodo.

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

key?string | number

Identità stabile tra elementi fratelli.

Esempio pratico

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

Animazione

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

Quando omesso

La tabella documenta omissioni verificate nell’implementazione. Gli esempi non sono valori predefiniti. Specifica valori per risultati fissi; misure e colori contestuali non sono costanti.

Proprietà	Quando omesso
`contentMode`	`"inset"`

Esempio

Utilizzo

Proprietà

Esempio pratico

Animazione

Quando omesso

API correlate

VStack

Material

In questa pagina