CardContent

Bietet eine Instrumentenstruktur mit Titel, rechtem Inhalt und Textkörper. Der Text renderer erhält contentSize abzüglich des Titels und der Ränder, die zum Anordnen von Abbildungen, Grafiken oder Diagrammen verwendet werden können.

Beispiel

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

Verwendung

renderer erhält nach der Header-Messung metrics. contentSize verwenden statt Headerhöhe zu schätzen. inset reserviert Header und Ränder; full nutzt die gesamte Karte, auch hinter dem Header.
Maße sind Punkte. auto misst Inhalt, fill nutzt den zugeteilten Elternraum. Zuerst den Container bemessen; fill und langer Text vergrößern keinen festen Elternrahmen.

Eigenschaften

title?string | View | null

Kopfzeilentext oder eine View.

Beispiel""

renderer?(metrics: CardContentMetrics) => ViewContent

Erstellt Inhalte anhand der gemessenen Kopfzeilenmaße.

Beispielmetrics => <Group/>

children?ViewContent

Untergeordneter Zeicheninhalt.

trailing?string | View | null

Text oder View am Ende der Kopfzeile.

Beispiel""

contentMode?"inset" | "full"

inset lässt Inhalt unter der Kopfzeile mit Abstand; full nutzt die ganze Karte.

Beispiel"inset"

headerBackground?View | null

View hinter der Kopfzeile; null entfernt ihn. Kein Bestandteil des Inhaltslayouts.

Beispiel<Material type="frosted"/>

Allgemeine Eigenschaften

width?number | "auto" | "fill"

Breite in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel100

height?number | "auto" | "fill"

Höhe in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel80

padding?number

Innenabstand des Inhalts in Punkten.

Beispiel0

x?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0

y?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0

transform?ViewTransform

Gesamten View ohne Layoutänderung transformieren. Verschiebung in Punkten, Drehung/Neigung in Grad, Skalierung 1 unverändert, Anker 0–1.

Beispiel{rotation: 0}

background?Paint

Hintergrundfarbe oder Verlauf; clear ist transparent.

Beispiel"clear"

opacity?number

Deckkraft des gesamten Views: 0 transparent, 1 undurchsichtig.

Beispiel1

cornerRadius?number

Eckenradius in Punkten.

Beispiel0

clipped?boolean

Zeichnung außerhalb der View-Grenzen abschneiden.

Beispielfalse

clip?"rectangle" | "ellipse"

Schnittform rectangle oder ellipse; Material erlaubt auch false zum Abschalten.

Beispiel"rectangle"

mask?View | null

View als Alphamaske. Zentriert ohne Einfluss auf das Layout; null deaktiviert die Maske.

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

zIndex?number

Zeichenreihenfolge unter Geschwistern; größere Werte liegen vorne.

Beispiel0

blur?number

Unschärferadius in Punkten; 0 deaktiviert die Unschärfe.

Beispiel4

innerShadow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

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

glow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

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

shadowColor?Color

Farbe des äußeren Schattens.

BeispielHDR("black")

shadowOpacity?number

Schattendeckkraft 0–1; 0 blendet ihn aus.

Beispiel0

shadowRadius?number

Unschärferadius des äußeren Schattens in Punkten.

Beispiel4

shadowX?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel0

shadowY?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel2

animations?Animation[]

Attributänderung animieren. duration/delay in Sekunden; from/to sind Endwerte; repeat/autoreverse steuern Wiederholung, wrap die Periode.

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

key?string | number

Stabile Kennung unter Geschwisterelementen.

Praxisbeispiel

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

Animation

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

Beim Weglassen

Die Tabelle zeigt implementierte Vorgaben beim Weglassen. Eigenschaftsbeispiele sind keine Standardwerte. Für feste Ergebnisse explizite Werte setzen; kontextabhängige Maße und Themenfarben sind keine Konstanten.

Eigenschaften	Beim Weglassen
`contentMode`	`"inset"`

Beispiel

Verwendung

Eigenschaften

Praxisbeispiel

Animation

Beim Weglassen

Verwandte APIs

VStack

Material

Auf dieser Seite