CapDrive
사용 가이드

Text

판독값, 단위 또는 설명 텍스트를 표시합니다. 글꼴, 글꼴 크기, 정렬, 줄 바꿈 및 잘림을 설정할 수 있습니다. 내용은 문자열로 균일하게 변환되며, 빈 값은 빈 것으로 표시됩니다.

예제

function main() {
  return (
    <Text fontSize={32} font="rounded" lineLimit={2} truncationMode="tail">
      Hello, CapDrive
    </Text>
  );
}

사용법

  • 내용은 toString()으로 변환하며 null/undefined는 비웁니다. Text 안에 Symbol을 넣지 말고 HStack으로 조합하세요. width 제한 후 lineLimit/truncationMode를 지정합니다. minimumScaleFactor=1은 축소하지 않습니다.
  • 숫자 크기는 포인트입니다. auto는 내용을 측정하고 fill은 부모가 배정한 공간을 씁니다. 부모 크기부터 정하세요. fill이나 긴 텍스트가 고정 부모 공간을 늘리지는 않습니다.

속성

children?TextContent | TextContent[]

자식 그리기 콘텐츠.

fontSize?number

글꼴 크기(포인트).

예제14
fontWeight?"ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"

글자 두께는 ultraLight부터 black까지이며 regular가 보통입니다.

예제"regular"
font?"default" | "rounded" | "monospaced" | "serif"

글꼴 모양: default, rounded, monospaced, serif입니다.

예제"default"
color?Paint

HDR 색상을 포함한 그리기 색상.

예제HDR($env.foreground)
alignment?"leading" | "center" | "trailing"

가용 너비 안의 글자 정렬: leading, center, trailing입니다.

예제"leading"
lineLimit?number | null

최대 줄 수입니다. null 또는 생략하면 줄 수 제한 없이 줄바꿈합니다.

예제1
truncationMode?"head" | "middle" | "tail"

넘치는 글자를 생략할 위치: head, middle, tail입니다.

예제"tail"
minimumScaleFactor?number

공간 부족 시 최소 글자 배율 0.01–1이며 1은 축소하지 않습니다.

예제0.5
monospacedDigits?boolean

숫자 폭을 같게 하여 값이 바뀔 때 좌우 흔들림을 줄입니다.

예제true
letterSpacing?number

추가 글자 간격(포인트)입니다.

예제0
contentAnimation?ContentAnimation

내용 변경 효과입니다. View가 지원하는 type을 선택하며 duration/delay는 초입니다.

예제{type: "numericText"}
공통 속성
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 (
    <VStack width={180} spacing={12}>
      <Text width="fill" fontSize={20} lineLimit={2} truncationMode="tail">
        CapDrive — a longer instrument title
      </Text>
      <HStack alignment="firstTextBaseline" spacing={4}>
        <Text fontSize={48} monospacedDigits={true}>
          78
        </Text>
        <Text fontSize={14}>km/h</Text>
      </HStack>
    </VStack>
  );
}

애니메이션

애니메이션

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

생략 시 동작

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

속성생략 시 동작
fontSize14
fontWeight"regular"
font"default"
monospacedDigitstrue
minimumScaleFactor1
lineLimitnull
alignment"center"
truncationMode"tail"
colorHDR($env.foreground)

HStack

Symbol

Color / Gradient

Color / Gradient

이전

Image

다음 단계

이 페이지의 내용

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