Akcje
Wszystko, co użytkownik naciska, aby coś zrobić: przyciski i ich stany, linki wyglądające jak przyciski, kopiowanie, zamykanie, akcje grupowane i przełączane, podpowiedzi klawiszy i uchwyty do zmiany kolejności list. Budowane z celem WCAG 2.2 AA: widoczny fokus, cele co najmniej 24 px, klawiatura dla każdej akcji i stany wypowiedziane słowami, a nie samym kolorem.
Strony: 12, eksporty: 12
- Button
- ToggleButton
- LinkButton
- IconButton
- CloseButton
- CopyButton
- ButtonGroup
- Kbd
- KeyCombo
- DragHandle
- NudgeButtons
- GatedAction
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 { Button, ToggleButton, LinkButton, IconButton, … } from '@skribly/ui/actions'Strony tej grupyLink do sekcji Strony tej grupy
- ButtonDomyślny sposób uruchamiania akcji. Użyj primary dla jedynej głównej akcji widoku, outline albo ghost dla pozostałych, danger dla usuwania, a danger-solid tylko do potwierdzenia czegoś, czego nie da się cofnąć.Button
- ToggleButtonPrzycisk, który zostaje włączony albo wyłączony, dla opcji widoku, takich jak zawijanie linii albo pokazywanie tylko twoich pozycji. Dla ustawień, które się zapisują, użyj Switch.ToggleButton
- LinkButtonNawigacja, która potrzebuje wagi przycisku, na przykład „Read the guide” na pustej stronie. Jeśli zmienia dane, a nie stronę, użyj Button.LinkButton
- IconButtonKwadratowy przycisk tylko z ikoną, do pasków narzędzi i gęstych wierszy, gdzie ikona jest dobrze znana. Gdy jest miejsce, wybierz Button z etykietą.IconButton
- CloseButtonZamyka albo odrzuca to, w czym się znajduje: komunikat, panel albo okno dialogowe. Wewnątrz Dialog z React Aria slot="close" zamyka go bez obsługi zdarzenia.CloseButton
- CopyButtonKopiuje polecenie, klucz albo link do schowka i to potwierdza. Użyj go obok tekstu, który ludzie prawdopodobnie wkleją gdzie indziej.CopyButton
- ButtonGroupTrzyma powiązane przyciski razem. Spaced dla zestawów osobnych akcji, attached dla wyglądu segmentowego, toolbar dla paska narzędzi, a stackOnNarrow dla stopek formularzy, które na telefonie mają zająć całą szerokość.ButtonGroup
- KbdPokazuje jeden klawisz w tekście albo w podpowiedzi. Dla kombinacji użyj KeyCombo.Kbd
- KeyComboSkrót klawiszowy: klawisze naciskane razem, sekwencja albo kilka skrótów robiących to samo. Użyj go w menu, dymkach podpowiedzi i na stronach pomocy.KeyCombo
- DragHandleUchwyt, który przeciąga pozycję w sortowalnym GridList, Table albo Tree z React Aria. Zawsze łącz przeciąganie z drugim sposobem zmiany kolejności, takim jak NudgeButtons, dla osób, które nie mogą przeciągać.DragHandle
- NudgeButtonsJeden krok w górę i jeden w dół: sposób zmiany kolejności listy klawiaturą i pojedynczym wskaźnikiem, obok przeciągania albo zamiast niego (WCAG 2.5.7). Listy poziome używają lewej i prawej.NudgeButtons
- GatedActionAkcja, która nie jest jeszcze dostępna, z powodem i tym, co ją odblokowuje. Użyj jej zamiast po cichu wyłączonego przycisku, gdy użytkownik może coś z tym zrobić.GatedAction