Text

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import React from 'react'
import { Text } from './Text'
export default {
title: 'Text(テキスト)/Text',
component: Text,
}
export const Default: Story = () => (
<>
<Text as="h1" size="XXL" leading="TIGHT">
&lt;Text&gt;
</Text>
<Text as="p">
デフォルトの出力要素は <code>span</code> で、文字サイズは <code>M</code>、行間は
<code>NORMAL</code>、色は <code>inherit</code> です。
</Text>
<Text as="p">
styled-components と同じく <code>as</code> で要素を差し替えられます。
</Text>
<Text as="p">
<Text color="TEXT_GREY"></Text><Text weight="bold">ウェイト</Text>
<Text whiteSpace="nowrap">ホワイトスペース</Text>を変えられます。
</Text>
<Text as="p">
<code>emphasis</code> を渡すとそのテキストは<Text emphasis>強調</Text>を示し、<code>em</code>
要素の太字装飾で出力します。
</Text>
<Text as="p">
<Text emphasis>入れ子</Text>もできますが、
<Text color="TEXT_LINK" weight="bold">
Valid
</Text>
な HTML になるよう注意してください。
</Text>
</>
)
処理中

Props

NameRequiredTypeDescription
size-"XXS", "XS", "S", "M", "L", "XL", "XXL"
weight-"inherit", string & {}, "-moz-initial", "initial", "revert", "unset", "bold", "normal", number & {}, "bolder", "lighter"
italic-false, true
color-"TEXT_BLACK", "TEXT_WHITE", "TEXT_GREY", "TEXT_DISABLED", "TEXT_LINK", "inherit"
leading-"NONE", "TIGHT", "NORMAL", "RELAXED"
whiteSpace-"pre", "inherit", "-moz-initial", "initial", "revert", "unset", "normal", "-moz-pre-wrap", "break-spaces", "nowrap", "pre-line", "pre-wrap"
emphasis-false, true