CardContent

제목, 올바른 내용, 본문 텍스트로 악기 구조를 제공합니다. renderer 텍스트는 그림, 그래프 또는 차트를 정렬하는 데 사용할 수 있는 제목과 여백을 제외한 contentSize을 가져옵니다.

예제

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

사용법

renderer는 헤더 측정 후 metrics를 받아 본문을 반환합니다. 헤더 높이를 추측하지 말고 contentSize를 사용하세요. inset은 헤더와 여백을 확보하고 full은 헤더 뒤까지 카드 전체를 씁니다.
숫자 크기는 포인트입니다. auto는 내용을 측정하고 fill은 부모가 배정한 공간을 씁니다. 부모 크기부터 정하세요. fill이나 긴 텍스트가 고정 부모 공간을 늘리지는 않습니다.

속성

title?string | View | null

헤더 텍스트 또는 View.

예제""

renderer?(metrics: CardContentMetrics) => ViewContent

측정된 헤더 크기로 콘텐츠를 구성합니다.

예제metrics => <Group/>

children?ViewContent

자식 그리기 콘텐츠.

trailing?string | View | null

헤더 끝의 텍스트 또는 View.

예제""

contentMode?"inset" | "full"

inset은 헤더 아래 여백 안에, full은 카드 전체에 내용을 배치합니다.

예제"inset"

headerBackground?View | null

헤더 뒤에 그리는 View입니다. null은 숨김이며 본문 내용에 포함되지 않습니다.

예제<Material type="frosted"/>

공통 속성

width?number | "auto" | "fill"

너비: 포인트, 자동 크기 또는 부모 영역 채우기.

예제100

height?number | "auto" | "fill"

높이: 포인트, 자동 크기 또는 부모 영역 채우기.

예제80

padding?number

콘텐츠 안쪽 여백(포인트).

예제0

x?number

시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.

예제0

y?number

시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.

예제0

transform?ViewTransform

레이아웃을 바꾸지 않는 전체 변환입니다. 이동은 포인트, 회전·기울기는 도, 배율 1은 원래 크기, 기준점은 0–1입니다.

예제{rotation: 0}

background?Paint

배경 색상 또는 그라디언트입니다. clear는 투명입니다.

예제"clear"

opacity?number

전체 View 불투명도: 0은 투명, 1은 불투명입니다.

예제1

cornerRadius?number

모서리 반경(포인트)입니다.

예제0

clipped?boolean

View 경계를 벗어난 내용을 자릅니다.

예제false

clip?"rectangle" | "ellipse"

자르기 모양은 rectangle 또는 ellipse입니다. Material은 false로 해제할 수 있습니다.

예제"rectangle"

mask?View | null

알파 마스크 View입니다. 레이아웃에 영향을 주지 않고 중앙에 배치되며, null이면 마스크가 비활성화됩니다.

예제<Circle width="fill" height="fill" background="white"/>

zIndex?number

형제 View의 그리기 순서입니다. 큰 값이 앞에 표시됩니다.

예제0

blur?number

흐림 반경(포인트)이며 0은 흐림 없음입니다.

예제4

innerShadow?DrawingEffect

효과의 색상, 불투명도, 흐림 반경, x/y 이동량입니다. 거리는 포인트입니다.

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

glow?DrawingEffect

효과의 색상, 불투명도, 흐림 반경, x/y 이동량입니다. 거리는 포인트입니다.

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

shadowColor?Color

바깥 그림자 색상입니다.

예제HDR("black")

shadowOpacity?number

그림자 불투명도 0–1이며 0은 숨김입니다.

예제0

shadowRadius?number

바깥 그림자의 흐림 반경(포인트)입니다.

예제4

shadowX?number

그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.

예제0

shadowY?number

그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.

예제2

animations?Animation[]

속성 변경 애니메이션입니다. duration/delay는 초, from/to는 끝값, repeat/autoreverse는 반복, wrap은 주기입니다.

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

key?string | number

형제 요소 사이의 안정적인 식별자.

조합 예제

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

애니메이션

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

생략 시 동작

표는 구현에서 확인한 생략 동작이며 속성 예제는 기본값이 아닙니다. 고정 결과에는 명시적으로 값을 주고 환경 크기·테마 색을 상수로 보지 마세요.

속성	생략 시 동작
`contentMode`	`"inset"`

예제

사용법

속성

조합 예제

애니메이션

생략 시 동작

관련 API

VStack

Material

이 페이지의 내용