CapDrive
사용 가이드

Material

콘텐츠 영역을 형성하기 위해 텍스트 및 그래픽과 겹쳐질 수 있는 반투명 유리 재질의 표면을 그립니다. type은 현재 반투명을 지원하고 style은 재료 두께를 제어합니다. 눈에 보이는 효과는 그 뒤에 있는 콘텐츠에 따라 달라집니다.

예제

function main() {
  return (
    <ZStack>
      <Material type="frosted" style="thin" />
      <Text>CapDrive</Text>
    </ZStack>
  );
}

사용법

  • Material은 children과 padding이 없는 표면입니다. ZStack으로 텍스트를 올리며 유리 효과는 뒤의 내용에 달려 있습니다. type은 현재 frosted, style은 두께이며 이미지 질감은 지원하지 않습니다.
  • mask는 알파로 불투명 부분을 보이고 투명 부분을 숨깁니다. 같은 알파의 흑백은 같습니다. 본체 배치에 참여하지 않으므로 크기를 지정하고 clipped 경계 잘라내기와 구분하세요.

속성

type"frosted"

재질 종류이며 현재 frosted는 기본 반투명 유리입니다.

예제"frosted"
style?"ultraThin" | "thin" | "regular" | "thick" | "ultraThick" | "bar"

ultraThin부터 ultraThick까지의 재질이며 bar는 시스템 막대 재질입니다.

예제"ultraThin"
공통 속성
width?number | "auto" | "fill"

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

예제100
height?number | "auto" | "fill"

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

예제80
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?boolean | "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 (
    <ZStack width={200} height={100}>
      <HStack spacing={0} width="fill" height="fill">
        <Rectangle width="fill" height="fill" background="blue" />
        <Rectangle width="fill" height="fill" background="orange" />
      </HStack>
      <Material
        width={160}
        height={64}
        type="frosted"
        style="thin"
        cornerRadius={16}
      />
      <Text fontSize={28}>78 km/h</Text>
    </ZStack>
  );
}

애니메이션

애니메이션

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

생략 시 동작

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

속성생략 시 동작
type"frosted"
style"ultraThin"

ZStack

Image

ZStack

이전

CardContent

다음 단계

이 페이지의 내용

예제사용법속성조합 예제애니메이션생략 시 동작관련 API