Text

テキストを表示するためのコンポーネントです。タイポグラフィのデザイントークンを使用しています。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

入れ子にしたときの出力要素に注意する

デフォルトの出力要素は<span>になるため、入れ子にしたときにValidなHTMLになるように注意してください。

種類

フォントサイズ

size propsで指定できます。値はタイポグラフィのフォントサイズのデザイントークンを参照してください。

ウェイト

weight propsで指定できます。

強調、イタリック体

emphasis props、italic propsで指定できます。

color propsで指定できます。値は色の文字のデザイントークンを参照してください。

行送り

leading propsで指定できます。値は行送りのデザイントークンを参照してください。

折り返し

whiteSpace propsで指定できます。

見出しスタイル

styleType propsで指定できます。

Headingコンポーネントの種類に合わせた見た目(フォントサイズ、ウェイト、色)を提供しますが、見出しとして使う場合はTextではなくHeadingを使用してください。

Props

size
"XXS""XS""S""M""L""XL""XXL"
weight
"normal""bold"
italic
falsetrue
leading
"NONE""TIGHT""NORMAL""LOOSE"
whiteSpace
"pre""normal""nowrap""pre-line""pre-wrap"
emphasis
falsetrue

強調するかどうかの真偽値。指定すると em 要素になる

styleType
"screenTitle""sectionTitle""blockTitle""subBlockTitle""subSubBlockTitle"

見た目の種類。Heading の種類と同じ