본문으로 건너뛰기

Text

텍스트를 래핑한 컴포넌트입니다. 주요 특징으로는 텍스트 관련 속성외에 번역을 위한 기능을 제공한다는 것입니다.

export function TextBasic(){
  return <Frame>
    <Text text='나는 텍스트 입니다. 이 텍스트는 200px 까지만 표시됩니다.'
    size={16}
    weight={700}
    color="red"
    font="pretendard"
    textWidth='200px'
    ellipsis
    />
  </Frame>
}

속성 설명​

text​

text = TextType = string | number | boolean

표시할 텍스트를 지정합니다.

(optional) size​

size = CSSProperties['fontSize']

텍스트의 크기를 지정합니다. css 의 fontSize 와 같습니다.

(optional) weight​

weight = CSSProperties['fontWeight']

텍스트의 굵기를 지정합니다. css 의 fontWeight 와 같습니다.

(optional) color​

color = CSSProperties['color']

텍스트의 색상을 지정합니다. css 의 fontWeight 와 같습니다.

(optional) font​

font = CSSProperties['fontFamily']

텍스트의 폰트를 지정합니다. css 의 fontFamily 와 같습니다.

(optional) textWidth​

textWidth = CSSProperties['width']

텍스트 컨테이너의 폭을 지정합니다. css 의 width 와 같습니다.

(optional) whiteSpace​

whiteSpace = CSSProperties['whiteSpace']

텍스트의 whiteSpace 옵션을 지정합니다. css 의 whiteSpace 와 같습니다.

(optional) ellipsis​

ellipsis = boolean

텍스트의 오버플로우 중 ellipsis 처리 여부를 지정합니다. textWidth 속성과 함께 사용할 수 있습니다.

(optional) translationKey​

translationKey = string

번역시 해당 텍스트의 키를 지정합니다. 이 키는 내부적으로 번역 function 이 실행될때 파라미터로 주입됩니다.

(optional) translator​

translator = TextTranslationFunction = (key: string, text: string) => Promise<string>

텍스트 번역 함수입니다. 입력받은 text 속성을 가지고 translationKey 와 함께 원하는 텍스트로 변환하여 표시할 수 있습니다. 실시간 번역과 같은 기능을 구현할 때 유용합니다.