Nakładki
Warstwy nad stroną: okna dialogowe, potwierdzenia, okna podręczne, menu i podpowiedzi. Każda przejmuje albo zwraca fokus, zamyka się klawiszem Escape, zachowuje widoczną ramkę w trybie wymuszonych kolorów i mieści się na ekranie 320 px, gdzie Modal staje się dolnym arkuszem.
Strony: 9, eksporty: 10
- Modal
- ConfirmDialog
- Popover
- DropdownMenu
- MenuItem
- MenuCheckItem
- MenuLabel
- Tooltip
- InfoTip
- FocusTrap
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { Modal, ConfirmDialog, Popover, DropdownMenu, … } from '@skribly/ui/overlays'Strony tej grupyLink do sekcji Strony tej grupy
- ModalOkno dialogowe, które blokuje stronę, dopóki nie zostanie zamknięte. Wybierz je dla krótkiego zadania, takiego jak formularz lub wybór, które trzeba skończyć, zanim pójdziesz dalej; treść się przewija, a akcje zostają w widoku.Modal
- ConfirmDialogPyta przed akcją, którą trudno cofnąć. Czeka na akcję asynchroniczną, pokazuje stan oczekiwania i zostawia okno otwarte z błędem, jeśli akcja się nie powiedzie.ConfirmDialog
- PopoverMały panel przypięty do przycisku, dla dodatkowych kontrolek albo szczegółów, które nie potrzebują całego ekranu. Wybierz go zamiast Modal, gdy strona ma zostać w widoku.Popover
- DropdownMenuLista akcji za przyciskiem. Wiersze MenuItem przyjmują ikonę, opis, skrót i ton niebezpieczeństwa; wybierz menu dla poleceń, a nie dla wyboru wartości formularza.DropdownMenu, MenuItem
- MenuCheckItemWiersz menu, który można zaznaczyć, do ustawień widoku, takich jak widoczne kolumny. Potrzebuje selectionMode na menu albo na jego grupie MenuLabel.MenuCheckItem
- MenuLabelGrupa wierszy menu z etykietą i linią oddzielającą przed nią. Grupa może mieć własny wybór, na przykład jeden tryb motywu obok zwykłych akcji.MenuLabel
- TooltipKrótka podpowiedź po najechaniu albo przy fokusie z klawiatury. Użyj jej dla dodatkowych słów o kontrolce, która już ma nazwę; dla wszystkiego, czego potrzebuje użytkownik dotyku, użyj InfoTip.Tooltip
- InfoTipMały okrągły przycisk obok terminu, który otwiera krótkie objaśnienie. Wybierz go zamiast Tooltip, gdy tekst ma znaczenie, bo działa dotykiem, klawiaturą i przy każdym powiększeniu.InfoTip
- FocusTrapTrzyma Tab wewnątrz własnego panelu, dopóki jest otwarty, a potem oddaje fokus. Modal, Popover i DropdownMenu już to robią; wybierz FocusTrap dla własnej szuflady albo kroku przewodnika.FocusTrap