Web Components

React

Vue

@media (max-width: 63.999rem) { [data-page-frame-layout] { flex-direction: column !important; } .docs-sidebar { width: 100% !important; } .mobile-sidebar-pane { position: static !important; inset: auto !important; display: flex !important; width: 100% !important; max-height: min(60svh, 32rem); border-bottom: 1px solid var(--color-border); } .main-frame { width: 100% !important; } starlight-menu-button { display: none !important; } }

Hover Card

Hover Card 基础原型

Base Hover Card 由 Root、Trigger 与 Content 组成。Root 支持受控/非受控 open、openDelay、closeDelay 与 openChange；Content 使用 asOverlay 和 asTransition，离场完成后才 detach。当前定位 API 覆盖 side 与 align，portal、碰撞检测、Arrow、forceMount 和数值 offset 暂不属于 Base 保证。

<wc-base-hover-card-root class="relative inline-flex items-start">
<wc-base-hover-card-trigger class="cursor-pointer rounded border px-3 py-1.5">
    Hover me
  </wc-base-hover-card-trigger>
  <wc-base-hover-card-content class="w-72 rounded border bg-white p-3 shadow">
    Base hover-card content. Pointer and focus intent use cancellable delays.
  </wc-base-hover-card-content>
</wc-base-hover-card-root>

View code