Murasaki
コンポーネント

Hover Card

リンクをホバーまたはフォーカスすると、関連情報をプレビューします。

使い方

import { HoverCard, HoverCardContent, HoverCardTrigger } from '@murasakijs/ui'

<HoverCard>
  <HoverCardTrigger href="/ja/docs">Murasaki Docs</HoverCardTrigger>
  <HoverCardContent>ガイド、API リファレンス、サンプルを掲載しています。</HoverCardContent>
</HoverCard>

カードは補助情報のためのものです。作業に必須の情報や操作をカード内だけに置かないでください。HoverCardTriggerasChild でルーターのリンクを利用できます。HoverCardContentside, align, sideOffset などの React Aria と互換性のある配置 props を受け取ります。

エクスポート

HoverCard, HoverCardTrigger, HoverCardContent

GitHub でこのページを改善

On this page