CardContent

Proporciona una estructura de instrumento con título, contenido correcto y texto del cuerpo. El texto renderer obtendrá contentSize menos el título y los márgenes, que se pueden utilizar para organizar figuras, gráficos o tablas.

Ejemplo

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

Uso

renderer recibe metrics tras medir la cabecera. Usa contentSize, no una altura estimada. inset reserva cabecera y márgenes; full usa toda la tarjeta, incluso detrás de la cabecera.
Las medidas numéricas son puntos. auto mide el contenido y fill usa el espacio asignado. Define primero el contenedor: fill y un texto largo no amplían un padre fijo.

Propiedades

title?string | View | null

Texto de cabecera o una View.

Ejemplo""

renderer?(metrics: CardContentMetrics) => ViewContent

Crea contenido con las medidas calculadas de la cabecera.

Ejemplometrics => <Group/>

children?ViewContent

Contenido de dibujo hijo.

trailing?string | View | null

Texto o View al final de la cabecera.

Ejemplo""

contentMode?"inset" | "full"

inset coloca contenido bajo la cabecera con margen; full usa toda la tarjeta.

Ejemplo"inset"

headerBackground?View | null

View detrás de la cabecera; null lo elimina. No forma parte del contenido principal.

Ejemplo<Material type="frosted"/>

Propiedades comunes

width?number | "auto" | "fill"

Anchura en puntos, tamaño automático o relleno del contenedor.

Ejemplo100

height?number | "auto" | "fill"

Altura en puntos, tamaño automático o relleno del contenedor.

Ejemplo80

padding?number

Relleno interior del contenido en puntos.

Ejemplo0

x?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0

y?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0

transform?ViewTransform

Transformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.

Ejemplo{rotation: 0}

background?Paint

Color o degradado de fondo; clear es transparente.

Ejemplo"clear"

opacity?number

Opacidad de todo el View: 0 transparente, 1 opaco.

Ejemplo1

cornerRadius?number

Radio de las esquinas en puntos.

Ejemplo0

clipped?boolean

Recorta el dibujo que sobresale de los límites del View.

Ejemplofalse

clip?"rectangle" | "ellipse"

Recorte rectangle o ellipse; Material también admite false para desactivarlo.

Ejemplo"rectangle"

mask?View | null

View de máscara alfa. Centrada sin afectar al diseño; null desactiva la máscara.

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

zIndex?number

Orden entre elementos hermanos; los valores mayores aparecen delante.

Ejemplo0

blur?number

Radio de desenfoque en puntos; 0 lo desactiva.

Ejemplo4

innerShadow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

glow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

shadowColor?Color

Color de la sombra exterior.

EjemploHDR("black")

shadowOpacity?number

Opacidad de la sombra de 0 a 1; 0 la oculta.

Ejemplo0

shadowRadius?number

Radio de desenfoque de la sombra, en puntos.

Ejemplo4

shadowX?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo0

shadowY?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo2

animations?Animation[]

Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.

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

key?string | number

Identidad estable entre elementos hermanos.

Ejemplo práctico

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

Animación

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

Al omitir

La tabla documenta omisiones comprobadas en la implementación. Los ejemplos no son valores predeterminados. Especifica valores para resultados fijos; tamaños y colores del contexto no son constantes.

Propiedades	Al omitir
`contentMode`	`"inset"`

Ejemplo

Uso

Propiedades

Ejemplo práctico

Animación

Al omitir

API relacionadas

VStack

Material

En esta página