Kod
Części przestrzeni roboczej z kodem: zmienione pliki, pole commita z powodami, graf commitów i refy, pull request gałęzi, status pod edytorem, wyniki wyszukiwania w plikach oraz podgląd strony z paskiem adresu i rozmiarami urządzeń. Wiersze leżą w List i TreeView z grupy data, więc klawisze strzałek, wyszukiwanie po wpisaniu i zaznaczanie pochodzą z React Aria.
Strony: 9, eksporty: 11
- GitFileRow
- CommitBox
- ReasonList
- GitGraph
- RefBadge
- PullRequestCard
- EditorStatusBar
- SearchFileRow
- SearchHitRow
- BrowserBar
- DeviceFrame
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 { GitFileRow, CommitBox, ReasonList, GitGraph, … } from '@skribly/ui/code'Strony tej grupyLink do sekcji Strony tej grupy
- GitFileRowJeden zmieniony plik z rodzajem zmiany jako literą, nazwą przed folderem i akcjami do dodania do poczekalni albo odrzucenia. Wybierz go dla zmian w katalogu roboczym i w poczekalni; wiersze umieść w List.GitFileRow
- CommitBoxGóra panelu zmian: gałąź, push i pull z licznikami, wiadomość i przycisk commita, z miejscem na narzędzia podpowiedzi i ReasonList, który wyjaśnia proponowaną wiadomość. Spróbuj zatwierdzić krótką wiadomość, aby zobaczyć błąd w linii.CommitBox, ReasonList
- GitGraphHistoria commitów z liniami gałęzi rysowanymi w SVG, refami jako plakietkami, autorami, datami i krótkimi skrótami. Wybierz go do widoku historii, w którym ludzie wybierają commit do sprawdzenia.GitGraph, RefBadge
- GitGraph statesPusta historia, historia w trakcie ładowania i błąd, który ją blokuje, pokazane zamiast wierszy.GitGraph
- PullRequestCardPull request bieżącej gałęzi albo następny krok do niego: zainstaluj narzędzie, zaloguj się, a potem utwórz. Każdy stan ma własną ikonę, kolor i słowo. Przejdź przez kroki w przykładzie.PullRequestCard
- EditorStatusBarPasek pod edytorem kodu: pozycja kursora jako przycisk „przejdź do linii”, zaznaczenie, stan niezapisany, język, kodowanie i końce linii.EditorStatusBar
- Search in filesWyniki wyszukiwania w plikach, pogrupowane według pliku z licznikiem, każde trafienie z numerem linii i zaznaczonym dopasowaniem. Umieść je w TreeView; Expand all i Collapse all sterują expandedKeys.SearchFileRow, SearchHitRow
- BrowserBar and DeviceFramePodgląd strony: wstecz, dalej, odśwież albo zatrzymaj, adres i rozmiar podglądu, nad ramką symulującą szerokość ekranu. Wybierz go do podglądu strony podczas pracy nad nią; w aplikacji ramka zawiera iframe.BrowserBar, DeviceFrame
- RefBadgeGałąź, gałąź zdalna, tag albo bieżący HEAD, osobno, na przykład w nagłówku albo na liście wydań.RefBadge