概要

はじめに

スタイリング

レイアウト

リリース

テーマ

（テーマ以下のナビゲーション項目は、"概要"、"カラー"、"ダークモード"、"タイポグラフィ"、"スペーシング"、"ブレークポイント"、"角丸"、"影"、"カーソル" とそれぞれ翻訳）

レイアウト

（レイアウト以下のナビゲーション項目は、"ボックス"、"フレックス"、"グリッド"、"コンテナ"、"セクション" とそれぞれ翻訳）

タイポグラフィ

（タイポグラフィ以下のナビゲーション項目は、"テキスト"、"見出し"、"ブロッククオート"、"コード"、"強調"、"キーボード入力"、"リンク"、"引用"、"強い強調" とそれぞれ翻訳）

コンポーネント

（コンポーネント以下のナビゲーション項目は、"アラートダイアログ"、"アスペクト比"、"アバター"、"バッジ"、"ボタン"、"コールアウト"、"カード"、"チェックボックス"、"チェックボックスグループ"、"チェックボックスタイプのカード"、 "コンテキストメニュー"、"データリスト"、"ダイアログ"、"ドロップダウンメニュー"、"ホバーカード"、"アイコンボタン"、"インセット"、"ポップオーバー"、"進捗"、"ラジオボタン"、"ラジオボタングループ"、"ラジオボタスタイプのカード"、"スクロール領域"、"セグメントコントロール"、"選択"、"セパレータ"、"スケルトン"、"スライダー"、"スピナー"、"スイッチ"、"テーブル"、"タブ"、"タブナビゲーション"、"テキストエリア"、"テキストフィールド"、"ツールチップ" とそれぞれ翻訳）

ユーティリティ

（ユーティリティ以下のナビゲーション項目は、"アクセシブルアイコン"、"ポータル"、"リセット"、"スロット"、"テーマ"、"視覚的に隠す" とそれぞれ翻訳）

ブロッククオート

他のソースからのブロックレベルの引用。

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

完璧なタイポグラフィは、間違いなくすべてのアートの中で最も捉えどころのないものです。石の彫刻だけが、その頑固さにおいてそれに匹敵します。

<Blockquote>
  Perfect typography is certainly the most elusive of all arts. Sculpture in
  stone alone comes near it in obstinacy.
</Blockquote>

APIリファレンス

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

プロパティ	型	デフォルト
`asChild`	`boolean`	デフォルト値なし
`size`	`Responsive<enum>`	デフォルト値なし
`weight`	`Responsive<"light" \| "regular" \| "medium" \| "bold">`	デフォルト値なし
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし
`truncate`	`boolean`	デフォルト値なし
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	デフォルト値なし

例

サイズ

sizeプロパティを使用して、サイズを制御します。

完璧なタイポグラフィは、間違いなくすべてのアートの中で最も捉えどころのないものです。石の彫刻だけが、その頑固さにおいてそれに匹敵します。

<Flex direction="column" gap="5">
  <Box maxWidth="300px">
    <Blockquote size="1">
      Perfect typography is certainly the most elusive of all arts. Sculpture in
      stone alone comes near it in obstinacy.
    </Blockquote>
  </Box>
  <Box maxWidth="350px">
    <Blockquote size="2">
      Perfect typography is certainly the most elusive of all arts. Sculpture in
      stone alone comes near it in obstinacy.
    </Blockquote>
  </Box>
  <Box maxWidth="400px">
    <Blockquote size="3">
      Perfect typography is certainly the most elusive of all arts. Sculpture in
      stone alone comes near it in obstinacy.
    </Blockquote>
  </Box>
  <Box maxWidth="450px">
    <Blockquote size="4">
      Perfect typography is certainly the most elusive of all arts. Sculpture in
      stone alone comes near it in obstinacy.
    </Blockquote>
  </Box>
  <Box maxWidth="500px">
    <Blockquote size="5">
      Perfect typography is certainly the most elusive of all arts. Sculpture in
      stone alone comes near it in obstinacy.
    </Blockquote>
  </Box>
  <Box maxWidth="550px">
    <Blockquote size="6">
      Perfect typography is certainly the most elusive of all arts. Sculpture in
      stone alone comes near it in obstinacy.
    </Blockquote>
  </Box>
  <Box maxWidth="600px">
    <Blockquote size="7">
      Perfect typography is certainly the most elusive of all arts. Sculpture in
      stone alone comes near it in obstinacy.
    </Blockquote>
  </Box>
  <Box maxWidth="650px">
    <Blockquote size="8">
      Perfect typography is certainly the most elusive of all arts. Sculpture in
      stone alone comes near it in obstinacy.
    </Blockquote>
  </Box>
  <Box maxWidth="1000px">
    <Blockquote size="9">
      Perfect typography is certainly the most elusive of all arts. Sculpture in
      stone alone comes near it in obstinacy.
    </Blockquote>
  </Box>
</Flex>

ウェイト

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

完璧なタイポグラフィは、間違いなくすべてのアートの中で最も捉えどころのないものです。石の彫刻だけが、その頑固さにおいてそれに匹敵します。

<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote weight="regular">
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>

  <Blockquote weight="medium">
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>

  <Blockquote weight="bold">
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>
</Flex>

色

colorプロパティを使用して、特定の色を割り当てます。

完璧なタイポグラフィは、間違いなくすべてのアートの中で最も捉えどころのないものです。石の彫刻だけが、その頑固さにおいてそれに匹敵します。

<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote color="indigo">
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>
  <Blockquote color="cyan">
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>
  <Blockquote color="orange">
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>
  <Blockquote color="crimson">
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>
</Flex>

ハイコントラスト

highContrastプロパティを使用して、背景との色のコントラストを上げます。

完璧なタイポグラフィは、間違いなくすべてのアートの中で最も捉えどころのないものです。石の彫刻だけが、その頑固さにおいてそれに匹敵します。

<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote color="gray">
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>
  <Blockquote color="gray" highContrast>
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>
</Flex>

切り詰め

truncateプロパティを使用して、コンテナからテキストがはみ出す場合に、省略記号でテキストを切り詰めます。

完璧なタイポグラフィは、間違いなくすべてのアートの中で最も捉えどころのないものです。石の彫刻だけが、その頑固さにおいてそれに匹敵します。

<Flex maxWidth="500px">
  <Blockquote truncate>
    Perfect typography is certainly the most elusive of all arts. Sculpture in
    stone alone comes near it in obstinacy.
  </Blockquote>
</Flex>

前へ見出し

次へコード

GitHubでこのページを編集する。