概要

はじめに

スタイリング

レイアウト

リリース

テーマ

（テーマに関するナビゲーションリンク：概要、カラー、ダークモード、タイポグラフィ、スペーシング、ブレークポイント、半径、シャドウ、カーソル）

レイアウト

（レイアウトに関するナビゲーションリンク：ボックス、フレックス、グリッド、コンテナ、セクション）

タイポグラフィ

（タイポグラフィに関するナビゲーションリンク：テキスト、見出し、ブロック引用、コード、強調、キーボード入力、リンク、引用、強い強調）

コンポーネント

（コンポーネントに関するナビゲーションリンク：アラートダイアログ、アスペクト比、アバター、バッジ、ボタン、コールアウト、カード、チェックボックス、チェックボックスグループ、チェックボックスカード、コンテキストメニュー、データリスト、ダイアログ、ドロップダウンメニュー、ホバーカード、アイコンボタン、インセット、ポップオーバー、進捗、ラジオボタン、ラジオボタングループ、ラジオボタンカード、スクロールエリア、セグメントコントロール、セレクト、セパレータ、スケルトン、スライダー、スピナー、スイッチ、テーブル、タブ、タブナビゲーション、テキストエリア、テキストフィールド、ツールチップ）

ユーティリティ

（ユーティリティに関するナビゲーションリンク：アクセシブルアイコン、ポータル、リセット、スロット、テーマ、視覚的に隠す）

スケルトン

コンテンツを、読み込み状態を示す同じ形状のプレースホルダーに置き換えます。

ソースコードを表示問題を報告プレイグラウンドで表示

<Skeleton>Loading</Skeleton>

API リファレンス

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

プロパティ	型	デフォルト値
`loading`	`boolean`	`true`
`width`	`Responsive<string>`	デフォルト値なし
`minWidth`	`Responsive<string>`	デフォルト値なし
`maxWidth`	`Responsive<string>`	デフォルト値なし
`height`	`Responsive<string>`	デフォルト値なし
`minHeight`	`Responsive<string>`	デフォルト値なし
`maxHeight`	`Responsive<string>`	デフォルト値なし

例

サイズ

`width`と`height`プロパティを使用して、スケルトンのサイズを手動で制御します。

<Skeleton width="48px" height="48px" />

子要素あり

loadingプロパティを使用して、スケルトンまたはその子要素を表示するかどうかを制御します。スケルトンは、子要素が非表示の場合、その寸法を保持し、インタラクティブな要素を無効にします。

<Flex gap="4">
  <Skeleton loading={true}>
    <Switch defaultChecked />
  </Skeleton>

  <Skeleton loading={false}>
    <Switch defaultChecked />
  </Skeleton>
</Flex>

テキストあり

スケルトンをテキストと共に使用する場合、通常は親要素ではなく、テキストノード自体をラップします。これにより、テキストが同じサイズのプレースホルダーに置き換えられます。

<Container size="1">
  <Flex direction="column" gap="2">
    <Text>
      <Skeleton>Lorem ipsum dolor sit amet.</Skeleton>
    </Text>

    <Skeleton>
      <Text>Lorem ipsum dolor sit amet</Text>
    </Skeleton>
  </Flex>
</Container>

この違いは、長い段落をラップする場合に特に顕著になります。

<Container size="1">
  <Flex direction="column" gap="3">
    <Text>
      <Skeleton>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        felis tellus, efficitur id convallis a, viverra eget libero. Nam magna
        erat, fringilla sed commodo sed, aliquet nec magna.
      </Skeleton>
    </Text>

    <Skeleton>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        felis tellus, efficitur id convallis a, viverra eget libero. Nam magna
        erat, fringilla sed commodo sed, aliquet nec magna.
      </Text>
    </Skeleton>
  </Flex>
</Container>

前へセパレーター

次へスライダー

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