カード
カードは、単一の主題の文脈におけるテキスト、写真、およびアクションのコンテナです。
インストール
npx nextui-cli@latest add card
上記のコマンドは、個別のインストール専用です。もし @nextui-org/react がグローバルにすでにインストールされている場合は、このステップをスキップできます。
インポート
NextUIは、4つのカード関連コンポーネントをエクスポートします。
- Card: カードを表示するためのメインコンポーネントです。
- CardHeader: 通常、カードのタイトルに使用されます。
- CardBody: カードのコンテンツ。
- CardFooter: 通常、アクションに使用されます。
使い方
区切り線付き
詳細については、Dividerコンポーネントを参照してください。
画像付き
ぼかしフッター
カードのフッターをぼかすには、カードにisFooterBlurredプロパティを渡すことができます。
構成
カード内で他のNextUIコンポーネントを使用して、より複雑なカードを構成できます。
ぼかしカード
カードをぼかすには、カードにisBlurredプロパティを渡すことができます。
プライマリーアクション
カードにisPressableプロパティを渡すと、ボタンとしてレンダリングされます。
注意: 使用されるコールバック関数は、
onClickではなくonPressです。詳細については、usePressコンポーネントを参照してください。
カバー画像
ImageコンポーネントをCardBodyコンポーネントの外に出すことで、カードのカバーとして使用できます。
データ属性
Cardのbase要素には、以下の属性があります。
- data-hover：カードがホバーされている場合。useHoverに基づく。
- data-focus：カードがフォーカスされている場合。useFocusRingに基づく。
- data-focus-visible：キーボードでカードがフォーカスされている場合。useFocusRingに基づく。
- data-disabled：カードが無効になっている場合。
isDisabledプロパティに基づく。 - data-pressed：カードが押されている場合。usePressに基づく。
API
カードのプロパティ
| 属性 | タイプ | 説明 | デフォルト |
|---|---|---|---|
| children | ReactNode | ReactNode[] | 通常は、カードのパーツであるCardHeader、CardBody、およびCardFooterです。 | - |
| shadow | none | sm | md | lg | カードの影。 | md |
| 半径 | none | sm | md | lg | カードのボーダー半径。 | lg |
| fullWidth | boolean | カードが親要素の幅全体を使用するかどうか。 | false |
| isHoverable | boolean | カードがホバー時に背景を変更するかどうか。 | false |
| isPressable | boolean | カードが押下可能かどうか。 | false |
| isBlurred | boolean | カードの背景をぼかすかどうか。 | false |
| isFooterBlurred | boolean | カードのフッターの背景をぼかすかどうか。 | false |
| isDisabled | boolean | カードを無効にするかどうか。押下イベントは無視されます。 | false |
| disableAnimation | boolean | アニメーションを無効にするかどうか。 | false |
| disableRipple | boolean | リップル効果を無効にするかどうか。isPressableがtrueの場合のみ。 | false |
| allowTextSelectionOnPress | boolean | 押下時にテキスト選択を許可するかどうか。isPressableがtrueの場合のみ。 | false |
| classNames | Record<"base"｜ "header"｜ "body"｜ "footer", string> | カードのスロットにカスタムクラス名をセットできます。 | - |
カードイベント
| 属性 | タイプ | 説明 |
|---|---|---|
| onPress | (e: PressEvent) => void | 押下をターゲット上で離したときに呼び出されるハンドラー。 |
| onPressStart | (e: PressEvent) => void | 押下操作が開始されたときに呼び出されるハンドラー。 |
| onPressEnd | (e: PressEvent) => void | 押下操作が終了したときに呼び出されるハンドラー（ターゲット上またはポインターがターゲットから離れた場合）。 |
| onPressChange | (isPressed: boolean) => void | 押下状態が変化したときに呼び出されるハンドラー。 |
| onPressUp | (e: PressEvent) => void | 押下がターゲット上で離されたときに呼び出されるハンドラー（ターゲット上で開始されたかどうかに関係なく）。 |
