悬浮按钮
Basic Floating Action Button
A round, fixed icon button for the one action a screen is really about - with a ring that survives any backdrop.
#fab#floating#icon
6 个框架初级
Loading…
A FAB wrapped in an SVG progress ring driven by a single 0-100 prop, with the ring as pure decoration.
<!--
The ring is a pure decoration (aria-hidden); the button keeps a plain
aria-label. The dashoffset is what makes the arc - here shown at ~65%
(offset 55 of circumference 157). The transition on stroke-dashoffset is
dropped for reduced-motion users.
-->
<div class="fixed bottom-6 right-6 z-40 h-14 w-14">
<svg class="absolute inset-0 h-14 w-14 -rotate-90" viewBox="0 0 56 56" aria-hidden="true" focusable="false">
<circle cx="28" cy="28" r="25" fill="none" stroke-width="4" class="stroke-blue-100 dark:stroke-gray-800" />
<circle cx="28" cy="28" r="25" fill="none" stroke-width="4" stroke-linecap="round" stroke-dasharray="157" stroke-dashoffset="55" class="stroke-blue-600 transition-[stroke-dashoffset] duration-500 motion-reduce:transition-none dark:stroke-blue-400" />
</svg>
<button type="button" aria-label="Cancel upload" class="absolute inset-1 inline-flex items-center justify-center rounded-full bg-blue-600 text-white shadow-[0_12px_28px_-8px_rgba(15,23,42,0.45)] hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6 6 18" /></svg>
</button>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
progress | number | 0 | Progress |
label | string | 'Cancel upload' | 加载时朗读的无障碍标签。 |
onClick | () => void | - | 用户激活控件时触发。 |
The ring is `aria-hidden`; the button keeps a plain `aria-label`, so the arc never becomes the only way to read progress. The arc is a `stroke-dashoffset` computed from the clamped `progress`, and its transition is dropped for reduced-motion users.