HoverCard experimental
Ark UI HoverCard 기반 wrapper입니다. 지연 hover/focus 미리보기의 trigger, positioner, content, arrow anatomy를 제공합니다.
Preview
<script lang="ts">
import * as HoverCard from '@odbd/svelte/hover-card'
const details = [
{ label: '상태', value: '검토 중' },
{ label: '담당', value: '디자인 시스템 팀' },
{ label: '기준', value: 'WCAG 2.2 AA' },
]
</script>
<div class="hover-card-demo">
<HoverCard.Root openDelay={150} closeDelay={120}>
<HoverCard.Trigger>품질 점검 요약</HoverCard.Trigger>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
<div class="hover-card-demo__heading">릴리스 전 확인</div>
<p class="hover-card-demo__copy">
토큰 변경, wrapper parity, 접근성 검토를 배포 전에 함께 확인하세요.
</p>
<dl class="hover-card-demo__list">
{#each details as detail}
<div class="hover-card-demo__row">
<dt>{detail.label}</dt>
<dd>{detail.value}</dd>
</div>
{/each}
</dl>
</HoverCard.Content>
</HoverCard.Positioner>
</HoverCard.Root>
</div>
<style>
.hover-card-demo {
max-width: 30rem;
}
.hover-card-demo__heading {
color: var(--odbd-color-foreground);
font-size: var(--odbd-font-size-md);
font-weight: 700;
}
.hover-card-demo__copy {
margin: 0;
color: var(--odbd-color-muted-foreground);
font-size: var(--odbd-font-size-sm);
}
.hover-card-demo__list {
display: grid;
gap: var(--odbd-space-1);
margin: 0;
}
.hover-card-demo__row {
display: flex;
justify-content: space-between;
gap: var(--odbd-space-4);
font-size: var(--odbd-font-size-sm);
}
.hover-card-demo__row dt {
color: var(--odbd-color-muted-foreground);
}
.hover-card-demo__row dd {
margin: 0;
color: var(--odbd-color-foreground);
font-weight: 600;
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as HoverCard from '@odbd/svelte/hover-card' import { HoverCard } from '@odbd/react/hover-card'