پنجرهٔ شناور

import { Popover } from "@kashi-ui/react";

برخلاف Tooltip، داخل Popover می‌توان دکمه و فیلد گذاشت؛ برخلاف Dialog، بقیهٔ صفحه را مسدود نمی‌کند.

نمونه

<Popover title="فیلتر سفارش‌ها" trigger={<Button iconStart={<FilterIcon />}>فیلتر</Button>}>
<Checkbox label="پرداخت‌شده" />
…
</Popover>

<Popover placement="bottom-end" aria-label="دربارهٔ کارمزد"
trigger={<Button variant="tertiary">کارمزد چطور محاسبه می‌شود؟</Button>}>
کارمزد هر تراکنش ۱٪ مبلغ است.
</Popover>

دسترس‌پذیری

دکمه aria-haspopup="dialog" و aria-expanded می‌گیرد. با باز شدن، فوکوس به اولین عنصر داخل می‌رود؛ Esc می‌بندد و فوکوس را به دکمه برمی‌گرداند. کلیک بیرون یا رفتن فوکوس به بیرون هم پنجره را می‌بندد.