スケルトン
スケルトンは、ローディング状態とコンポーネントの予想される形状を示すためのプレースホルダーです。
インストール
npx nextui-cli@latest add skeleton
上記のコマンドは、個別のインストール専用です。もし @nextui-org/react がグローバルにインストール済みであれば、このステップはスキップできます。
インポート
使用法
スタンドアロン
スケルトンはデフォルトでchildrenコンポーネントの形状をとりますが、スタンドアロンコンポーネントとしても使用できます。
読み込み完了状態
isLoadedプロパティを使用して、スケルトンアニメーションを停止し、子コンポーネントを表示できます。
スロット
- base: スケルトンのベーススロットで、アニメーションを作成するための
beforeとafterの擬似要素が含まれています。 - content: スケルトン形状を表示するためにラップされたコンポーネント。
isLoadedプロパティがtrueの場合のみ表示されます。
データ属性
Skeletonには、base要素に以下の属性があります。
- data-loaded: スケルトンの読み込み状態を示します。
isLoadedプロパティに基づきます。
API
スケルトンプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| children | ReactNode | スケルトンの内容。 | - |
| isLoaded | boolean | スケルトンが読み込まれているかどうか。 | false |
| disableAnimation | boolean | アニメーションを無効にするかどうか。 | false |
| classNames | Record<"base"｜"content", string> | スケルトンスロットのカスタムクラス名を設定できます。 | - |
