HoverCard

ჯავშნისა და სტუმრის ინფორმაციის პანელი Base UI-ზე, კლავიატურის მხარდაჭერით.

მაგალითი

@llc-conciergia/ui/hover-card

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@llc-conciergia/ui/hover-card";

<HoverCard><HoverCardTrigger href="#guest" className="text-info underline">ნინო მაისურაძე</HoverCardTrigger><HoverCardContent>სტუმარი — ნომერი 204. ჩამოსვლა: 29 ოქტომბერი. გასვლა: 2 ნოემბერი.</HoverCardContent></HoverCard>

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@llc-conciergia/ui/hover-card";

Conciergia CLI

npx @llc-conciergia/cli add hover-card

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/hover-card.json

შენიშვნები

დამატებითი ინფორმაცია არ უნდა იყოს აუცილებელი მოქმედების შესასრულებლად. delay და closeDelay მიეთითება HoverCardTrigger-ზე.

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
HoverCard: open / defaultOpen	boolean	—	კონტროლირებადი ან საწყისი გახსნილი მდგომარეობა.
HoverCard: onOpenChange	(open, details) => void	—	მდგომარეობის ცვლილების მოთხოვნა; გამოიყენეთ კლიენტურ კომპონენტში.
HoverCardTrigger	Base UI Trigger props	—	გამხსნელი ელემენტი; render, ref და მშობლიური ატრიბუტები.
HoverCardContent: container	HTMLElement \| RefObject	—	პორტალის კონტეინერი; ნაგულისხმევად document.body.
HoverCardContent: className / children / ref	Base UI Popup props	—	პანელის გაფორმება, შიგთავსი და ფოკუსის მართვა.
HoverCardTrigger: delay / closeDelay	number	—	გახსნისა და დახურვის დაყოვნება მილიწამებში: 600 / 300.
HoverCardContent: side / align / sideOffset	Base UI Positioner props	—	ნაგულისხმევად bottom / center / 8.