精选
停靠栏macOS Magnify Dock
A floating icon dock whose items swell under the pointer, the neighbours lifting less than the one you are on.
#dock#magnify#hover
6 个框架高级
Loading…
A floating segmented control that selects a single view from an icon-and-label set.
<!--
A segmented control is single-select, so it is role="radiogroup" with
role="radio" buttons and exactly one aria-checked="true". The tinted pill is
styled off the checked segment, so the selection a sighted user sees and the
one a screen reader hears are the same fact. Each segment clears the 40px
target with h-10.
-->
<div class="fixed bottom-6 left-1/2 inline-flex -translate-x-1/2 gap-1 rounded-2xl border border-black/10 bg-white/85 p-1 shadow-[0_12px_32px_-12px_rgba(0,0,0,0.4)] backdrop-blur-md dark:border-white/10 dark:bg-gray-900/85" role="radiogroup" aria-label="View">
<button type="button" role="radio" aria-checked="false" class="inline-flex h-10 items-center gap-2 rounded-xl px-3 text-sm font-medium text-gray-700 transition hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" /></svg>
List
</button>
<button type="button" role="radio" aria-checked="true" class="inline-flex h-10 items-center gap-2 rounded-xl bg-blue-600 px-3 text-sm font-medium text-white shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:focus-visible:ring-blue-400">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 5h5v14H4zM10 5h5v9h-5zM16 5h4v6h-4z" /></svg>
Board
</button>
<button type="button" role="radio" aria-checked="false" class="inline-flex h-10 items-center gap-2 rounded-xl px-3 text-sm font-medium text-gray-700 transition hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2ZM3 10h18M8 3v4M16 3v4" /></svg>
Calendar
</button>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
segments | readonly Segment[] | DEFAULT_SEGMENTS | 要渲染的项目数组。 |
defaultValue | string | - | 指标的当前值，需预先格式化。 |
onChange | (id: string) => void | - | 用户选择菜单项时触发，参数为所选项。 |
ariaLabel | string | 'View' | 按钮的无障碍名称。仅有图标的按钮必须设置。 |
className | string | - | 合并到根元素上的额外类名。 |
It is a `radiogroup` of `radio` buttons with exactly one `aria-checked`, so the tinted pill a sighted user sees and the state a screen reader hears are one fact. Each segment clears the 40px target with `h-10`; pass `defaultValue` to preselect and `onChange` to react to the choice.