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 와 함께 원하는 텍스트로 변환하여 표시할 수 있습니다. 실시간 번역과 같은 기능을 구현할 때 유용합니다.