CardContent

Fornece uma estrutura de instrumento com título, conteúdo correto e corpo do texto. O texto renderer receberá contentSize menos o título e as margens, que podem ser usadas para organizar figuras, gráficos ou tabelas.

Exemplo

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

Uso

renderer recebe metrics após medir o cabeçalho. Use contentSize, não uma altura estimada. inset reserva cabeçalho e margens; full ocupa toda a carta, inclusive atrás do cabeçalho.
Dimensões numéricas usam pontos. auto mede o conteúdo; fill usa o espaço atribuído pelo pai. Dimensione o contêiner primeiro. fill e texto longo não ampliam um pai fixo.

Propriedades

title?string | View | null

Texto de cabeçalho ou uma View.

Exemplo""

renderer?(metrics: CardContentMetrics) => ViewContent

Cria conteúdo usando as medidas calculadas do cabeçalho.

Exemplometrics => <Group/>

children?ViewContent

Conteúdo de desenho filho.

trailing?string | View | null

Texto ou View no final do cabeçalho.

Exemplo""

contentMode?"inset" | "full"

inset mantém o conteúdo abaixo do cabeçalho com margem; full usa o cartão inteiro.

Exemplo"inset"

headerBackground?View | null

View atrás do cabeçalho; null remove. Não integra o conteúdo principal.

Exemplo<Material type="frosted"/>

Propriedades comuns

width?number | "auto" | "fill"

Largura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo100

height?number | "auto" | "fill"

Altura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo80

padding?number

Espaçamento interno do conteúdo em pontos.

Exemplo0

x?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0

y?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0

transform?ViewTransform

Transforma o View inteiro sem mudar o layout. Translação em pontos, rotação/inclinação em graus, escala 1 sem mudança, âncoras 0–1.

Exemplo{rotation: 0}

background?Paint

Cor ou gradiente de fundo; clear é transparente.

Exemplo"clear"

opacity?number

Opacidade de todo o View: 0 transparente, 1 opaco.

Exemplo1

cornerRadius?number

Raio dos cantos em pontos.

Exemplo0

clipped?boolean

Recorta o desenho que ultrapassa os limites do View.

Exemplofalse

clip?"rectangle" | "ellipse"

Recorte rectangle ou ellipse; Material também aceita false para desativar.

Exemplo"rectangle"

mask?View | null

View de máscara alfa. Centralizada sem afetar o layout; null desativa a máscara.

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

zIndex?number

Ordem entre elementos irmãos; valores maiores ficam na frente.

Exemplo0

blur?number

Raio do desfoque em pontos; 0 desativa.

Exemplo4

innerShadow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

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

glow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

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

shadowColor?Color

Cor da sombra externa.

ExemploHDR("black")

shadowOpacity?number

Opacidade da sombra entre 0 e 1; 0 oculta.

Exemplo0

shadowRadius?number

Raio de desfoque da sombra externa em pontos.

Exemplo4

shadowX?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo0

shadowY?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo2

animations?Animation[]

Anima mudanças de propriedade. duration/delay em segundos; from/to são extremos; repeat/autoreverse controlam repetição e wrap o período.

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

key?string | number

Identidade estável entre elementos irmãos.

Exemplo prático

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

Animação

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

Quando omitido

A tabela apresenta omissões verificadas na implementação. Exemplos não são padrões. Para resultado fixo, passe valor explícito; dimensões e cores de contexto não são constantes.

Propriedades	Quando omitido
`contentMode`	`"inset"`

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

APIs relacionadas

VStack

Material

Nesta página