CardContent

Fournit une structure d'instrument avec un titre, un contenu droit et un corps de texte. Le texte renderer obtiendra contentSize moins le titre et les marges, qui peuvent être utilisés pour organiser des figures, des graphiques ou des diagrammes.

Exemple

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

Utilisation

renderer reçoit metrics après mesure de l’en-tête. Utilisez contentSize plutôt qu’une hauteur supposée. inset réserve en-tête et marges ; full utilise toute la carte, y compris derrière l’en-tête.
Les dimensions numériques sont en points. auto mesure le contenu, fill utilise l’espace alloué par le parent. Dimensionnez d’abord le conteneur ; fill et un long texte n’agrandissent pas un parent fixe.

Propriétés

title?string | View | null

Texte d’en-tête ou View.

Exemple""

renderer?(metrics: CardContentMetrics) => ViewContent

Crée le contenu à partir des dimensions mesurées de l’en-tête.

Exemplemetrics => <Group/>

children?ViewContent

Contenu de dessin enfant.

trailing?string | View | null

Texte ou View à la fin de l’en-tête.

Exemple""

contentMode?"inset" | "full"

inset place le contenu sous l’en-tête avec marge ; full utilise toute la carte.

Exemple"inset"

headerBackground?View | null

View derrière l’en-tête ; null le retire. Il ne participe pas au contenu principal.

Exemple<Material type="frosted"/>

Propriétés communes

width?number | "auto" | "fill"

Largeur en points, taille automatique ou remplissage du parent.

Exemple100

height?number | "auto" | "fill"

Hauteur en points, taille automatique ou remplissage du parent.

Exemple80

padding?number

Marge intérieure du contenu en points.

Exemple0

x?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0

y?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0

transform?ViewTransform

Transformation globale sans changer la mise en page. Translation en points, rotation/inclinaison en degrés, échelle 1 inchangée, ancrages 0–1.

Exemple{rotation: 0}

background?Paint

Fond de couleur ou dégradé ; clear le rend transparent.

Exemple"clear"

opacity?number

Opacité globale du View : 0 transparent, 1 opaque.

Exemple1

cornerRadius?number

Rayon des coins en points.

Exemple0

clipped?boolean

Découpe les dessins dépassant les limites du View.

Exemplefalse

clip?"rectangle" | "ellipse"

Forme de découpe rectangle ou ellipse ; Material accepte aussi false pour la désactiver.

Exemple"rectangle"

mask?View | null

View de masque alpha. Centrée sans modifier la disposition ; null désactive le masque.

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

zIndex?number

Ordre entre éléments frères ; les valeurs élevées sont devant.

Exemple0

blur?number

Rayon du flou en points ; 0 le désactive.

Exemple4

innerShadow?DrawingEffect

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

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

glow?DrawingEffect

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

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

shadowColor?Color

Couleur de l’ombre extérieure.

ExempleHDR("black")

shadowOpacity?number

Opacité de l’ombre de 0 à 1 ; 0 la masque.

Exemple0

shadowRadius?number

Rayon du flou de l’ombre extérieure, en points.

Exemple4

shadowX?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple0

shadowY?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple2

animations?Animation[]

Anime les changements de propriété. duration/delay en secondes ; from/to définissent les extrémités ; repeat/autoreverse la répétition, wrap la période.

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

key?string | number

Identifiant stable parmi les éléments frères.

Exemple pratique

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

En cas d’omission

Le tableau décrit les omissions vérifiées dans l’implémentation. Les exemples de propriétés ne sont pas des valeurs par défaut. Pour un résultat fixe, passez une valeur explicite ; tailles et couleurs contextuelles ne sont pas constantes.

Propriétés	En cas d’omission
`contentMode`	`"inset"`

Exemple

Utilisation

Propriétés

Exemple pratique

Animation

En cas d’omission

API associées

VStack

Material

Sur cette page