コンポーネント一覧

Card

カード全体を押せるようにするなら onPress を渡す。中にボタンを置くと押し分けが曖昧になる。

売上

¥1,240,000

前月比 +12%

import { Card, CardBody, CardFooter, CardHeader } from '@novi-ui/raster'

<Card>
  <CardHeader>売上</CardHeader>
  <CardBody>¥1,240,000</CardBody>
  <CardFooter>前月比 +12%</CardFooter>
</Card>

Props

Card の props 一覧
名前	型	説明
variant	'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'plain'
radius	'none' \| 'sm' \| 'md' \| 'lg' \| 'full'
onPress	() => void	押せるカードにする。指定すると role とキーボード操作が付く
isDisabled	boolean
children	ReactNode
classNames	ClassNames<typeof cardSlots>

Slot

構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。

root必須
header
body必須
footer
image

アクセシビリティ

`onPress` を渡したときだけ button になり、Enter / Space で発火してフォーカスリングが付く。渡さなければ非対話の器のままで、タブ順に入らない
キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motion が有効なときはアニメーションを行いません。

デモ

Props

Slot

アクセシビリティ