Powłoka
Rama wokół każdego ekranu Skribly: układ webowy z ciemnym panelem bocznym i górnym paskiem, układ desktopowy z paskiem tytułu, paskiem aktywności, paskiem stanu i dokiem oraz podzielone panele. Mierzy własną szerokość, więc układa się tak samo w wąskim oknie, przy powiększeniu 400% i w podglądzie, a jej arkusze trzymają fokus na małych ekranach.
Strony: 15, eksporty: 24
- AppShell
- AppLayout
- Titlebar
- Dock
- Sidebar
- SidebarUser
- SidebarNav
- NavItem
- NavKey
- NavGroup
- Topbar
- TopbarIcon
- PageHeader
- MainContent
- ActivityBar
- ActivityItem
- StatusBar
- StatusBarItem
- StatusPill
- Pane
- PaneHeader
- SplitView
- Splitter
- DockGrip
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 { AppShell, AppLayout, Titlebar, Dock, … } from '@skribly/ui/shell'Strony tej grupyLink do sekcji Strony tej grupy
- AppShellJedna powłoka aplikacji Skribly, złożona z części opisanych niżej: przełącznik aplikacji w lewym górnym rogu, panel boczny z sekcjami For you i Recent, wyszukiwanie, które otwiera CommandPalette, Create, miejsce na powiadomienia dla Inbox, ustawienia i konto. Wybierz ją dla każdego ekranu Hub i Trackera po zalogowaniu. Każde słowo jest propem, a linki renderuje linkComponent, więc aplikacja przekazuje link swojego routera, na przykład ten z Next.js, a biblioteka nie importuje żadnego routera.AppShell
- Web app layoutRama strony aplikacji webowych: linki pomijające, panel boczny, górny pasek i główna kolumna. Wybierz ją dla każdego ekranu po zalogowaniu; useAppLayout daje własnej kontrolce ten sam stan co przycisk menu.AppLayout
- Desktop app layoutRama aplikacji desktopowej: pasek tytułu, pasek aktywności, pasek stanu i dok na panel boczny, taki jak czat agenta. Wybierz Dock dla panelu, który stoi obok dowolnego widoku i można zmieniać jego rozmiar albo go zamykać.Titlebar, Dock
- SidebarCiemna kolumna nawigacji aplikacji webowych, z marką na górze i zalogowaną osobą u dołu. Zostaje ciemna w każdym motywie, tak jak Tracker.Sidebar, SidebarUser
- SidebarNavLista linków w Sidebar. Podaj jej bieżącą trasę, a oznaczy pasujący link i otworzy grupę wokół niego.SidebarNav
- NavItemJeden link panelu bocznego z ikoną i opcjonalnym NavKey albo licznikiem na końcu. NavKey pokazuje krótki kod, taki jak klucz projektu.NavItem, NavKey
- NavGroupZestaw NavItem z tytułem, który można zwinąć. Użyj go, gdy panel boczny ma więcej niż około ośmiu linków; ustaw isCollapsible na false dla zwykłego nagłówka.NavGroup
- TopbarPasek nad główną kolumną z wyszukiwaniem i akcjami z ikonami. TopbarIcon to przycisk z ikoną i dymkiem podpowiedzi; nadaj mu isSelected dla przełącznika, takiego jak tryb ciemny, albo owiń go w MenuTrigger.Topbar, TopbarIcon
- PageHeaderWiersz nagłówka ekranu: nadtytuł, tytuł, opis i akcje. Użyj jednego na ekran, na górze MainContent.PageHeader
- MainContentPrzewijana główna kolumna, cel linku pomijającego. Wybierz szerokość wide dla tablic i tabel, full dla edytorów.MainContent
- ActivityBarKolumna ikon widoków na krawędzi początku aplikacji desktopowej. ActivityItem pokazuje widok z dymkiem podpowiedzi, skrótem i plakietką; ustawienia i pomoc przypnij na dole przez footer.ActivityBar, ActivityItem
- StatusBarCienki pasek na dole aplikacji desktopowej. StatusBarItem pokazuje jeden fakt, jako tekst, przycisk albo link; StatusPill to zaokrąglone ustawienie, takie jak motyw.StatusBar, StatusBarItem, StatusPill
- PanePrzewijany panel układu podzielonego z przyklejonym nagłówkiem. Użyj wariantu side dla listy obok pracy, a sunken dla panelu pod nią.Pane, PaneHeader
- SplitViewPanele rozdzielone dzielnikami, które można przesuwać wskaźnikiem i klawiaturą. Panele obok siebie układają się w stos poniżej 40 rem, aby żaden nie był zbyt wąski do czytania.SplitView, Splitter
- DockGripUchwyt zmiany rozmiaru na krawędzi panelu, takiego jak terminal pod edytorem. Dock dodaje własny; użyj DockGrip bezpośrednio dla własnego panelu.DockGrip