テキスト

基本的なテキストプリミティブ。

ソースコードを表示問題を報告 Playgroundで表示

すばやい茶色のキツネは、のろまな犬を飛び越えます。

<Text>The quick brown fox jumps over the lazy dog.</Text>

APIリファレンス

このコンポーネントはspan要素に基づいており、共通のマージンプロパティをサポートしています。

プロパティ	型	デフォルト
`as`	`"span" \| "div" \| "label" \| "p"`	`"span"`
`asChild`	`boolean`	デフォルト値なし
`size`	`Responsive<enum>`	デフォルト値なし
`weight`	`Responsive<"light" \| "regular" \| "medium" \| "bold">`	デフォルト値なし
`align`	`Responsive<"left" \| "center" \| "right">`	デフォルト値なし
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both">`	デフォルト値なし
`truncate`	`boolean`	デフォルト値なし
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	デフォルト値なし
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし

例

別の要素として

asプロパティを使用して、テキストをp、label、div、またはspanとしてレンダリングします。このプロパティは純粋にセマンティックなものであり、視覚的な外観は変更しません。

これは段落要素です。

これはラベル要素です。

これはdiv要素です。

これはspan要素です。

<Text as="p">This is a <Strong>paragraph</Strong> element.</Text>
<Text as="label">This is a <Strong>label</Strong> element.</Text>
<Text as="div">This is a <Strong>div</Strong> element.</Text>
<Text as="span">This is a <Strong>span</Strong> element.</Text>

サイズ

sizeプロパティを使用してテキストサイズを制御します。このプロパティは、正しい行の高さと修正された文字間隔も提供します。テキストサイズが大きくなるにつれて、相対的な行の高さと文字間隔が小さくなります。

すばやい茶色のキツネは、のろまな犬を飛び越えます。すばやい茶色のキツネは、のろまな犬を飛び越えます。すばやい茶色のキツネは、のろまな犬を飛び越えます。すばやい茶色のキツネは、のろまな犬を飛び越えます。すばやい茶色のキツネは、のろまな犬を飛び越えます。すばやい茶色のキツネは、のろまな犬を飛び越えます。すばやい茶色のキツネは、のろまな犬を飛び越えます。すばやい茶色のキツネは、のろまな犬を飛び越えます。すばやい茶色のキツネは、のろまな犬を飛び越えます。

<Flex direction="column" gap="3">
  <Text size="1">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="2">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="3">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="4">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="5">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="6">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="7">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="8">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="9">The quick brown fox jumps over the lazy dog.</Text>
</Flex>

サイズ2～4は、長文コンテンツに適しています。

タイポグラフィの目標は、美しさを最大化し、読みやすく快適にするために、フォントサイズ、行の高さ、行の幅を比例的に関連付けることです。問題は、どの比率が最良の結果をもたらすかということです。黄金比は、美しさと実用性が交差する自然の中でよく観察されます。この「神聖な」比率を使用して、タイポグラフィのこれらの属性を強化できる可能性があります。

<Text as="p" mb="5" size="4">
  The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.
</Text>

<Text as="p" mb="5" size="3">
  The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.
</Text>

<Text as="p" size="2" color="gray">
  The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.
</Text>

サイズ1～3は、UIラベルに適しています。

始めましょう数分で次のプロジェクトを開始します

<Grid align="center" columns="2" gap="5" p="3">
  <Flex direction="column">
    <Text size="3" weight="bold">
      Get started
    </Text>
    <Text color="gray" size="2">
      Start your next project in minutes
    </Text>
  </Flex>

  <Flex direction="column">
    <Text size="2" weight="bold">
      Get started
    </Text>
    <Text color="gray" size="2">
      Start your next project in minutes
    </Text>
  </Flex>

  <Flex direction="column">
    <Text size="2" weight="bold">
      Get started
    </Text>
    <Text color="gray" size="1">
      Start your next project in minutes
    </Text>
  </Flex>

  <Flex direction="column">
    <Text size="1" weight="bold">
      Get started
    </Text>
    <Text color="gray" size="1">
      Start your next project in minutes
    </Text>
  </Flex>
</Grid>

太さ

weightプロパティを使用して、テキストの太さを設定します。

すばやい茶色のキツネは、のろまな犬を飛び越えます。

<Text weight="regular" as="div">
  The quick brown fox jumps over the lazy dog.
</Text>

<Text weight="medium" as="div">
  The quick brown fox jumps over the lazy dog.
</Text>

<Text weight="bold" as="div">
  The quick brown fox jumps over the lazy dog.
</Text>

配置

alignプロパティを使用して、テキストの配置を設定します。

左揃え

中央揃え

右揃え

<Text align="left" as="div">Left-aligned</Text>
<Text align="center" as="div">Center-aligned</Text>
<Text align="right" as="div">Right-aligned</Text>

トリム

trimプロパティを使用して、テキストボックスの先頭、末尾、または両側の先頭のスペースをトリムします。

このプロパティは、今後のハーフリーディングコントロール仕様と同様に動作しますが、クロスブラウザサポートのために、一般的なネガティブマージン回避策を内部で使用します。

トリムなしトリムあり

<Flex direction="column" gap="3">
  <Text
    trim="normal"
    style={{
      background: 'var(--gray-a2)',
      borderTop: '1px dashed var(--gray-a7)',
      borderBottom: '1px dashed var(--gray-a7)',
    }}
  >
    Without trim
  </Text>
  <Text
    trim="both"
    style={{
      background: 'var(--gray-a2)',
      borderTop: '1px dashed var(--gray-a7)',
      borderBottom: '1px dashed var(--gray-a7)',
    }}
  >
    With trim
  </Text>
</Flex>

先頭をトリミングすることは、カードやその他の「箱型」コンポーネントの垂直方向の間隔を調整する際に役立ちます。そうしないと、パディングは上下が側面よりも大きく見えます。

トリムなし