sitelo UI

sitelo-ui to biblioteka komponentów dla sitelo. Każdy komponent jest funkcją zwracającą ciąg HTML, więc zagnieżdża się wprost w stronie, którą już piszesz — bez kompilatora, bez runtime’u, bez hydratacji.

Każdy przykład w tej sekcji renderuje ten sam build, który renderuje otaczającą go stronę. To, co widzisz, jest tym, co wyprodukował kod pod spodem, i idzie za jasnym i ciemnym motywem tej witryny, bo sitelo-ui czyta ten sam atrybut data-theme co dokumentacja.

Układ

wyśrodkowane
KontenerWyśrodkowana kolumna strony z ograniczoną szerokością.
jedendwatrzy
StosRząd albo kolumna flex z tokenem odstępu na gap.
1234
SiatkaMieści tyle kolumn, ile się da, bez zapytań medialnych.
albo
SeparatorLinia między sekcjami, z etykietą albo bez.
ProporcjeUtrzymaj ramkę w stałym kształcie, żeby nic nie przeskoczyło przy ładowaniu.
Karta
KartaPowierzchnia dla zgrupowanej treści, z nagłówkiem, treścią i stopką.

Typografia

Nagłówek
Podpis
TypografiaSkala typograficzna, która sama dobiera element.
Nagłówek
I akapit.
ProzaOstyluj surowy HTML z Markdowna albo z CMS-a.
Przeczytaj dokumentację.
OdnośnikOstylowana kotwica z atrybutami, których potrzebuje odnośnik zewnętrzny.
Ikony99 glifów na jednej siatce, wymiarowane i kolorowane przez otaczający tekst.

Pola formularza

PrzyciskPięć wariantów, pięć kolorów, trzy rozmiary.
Grupa przyciskówPrzyciski złączone w jedną kontrolkę.
E-mail
Pole tekstoweEtykieta, kontrolka, tekst pomocy i błąd, połączone razem.
Motyw
Lista wyboruNatywny select, ostylowany pod resztę.
Mapa witrynyKanał RSS
Pole wyboruPrawdziwy input, ostylowany CSS-em, a nie podmieniony.
freepro
Grupa opcjiJeden wybór z kilku, jako opcje radio dzielące nazwę.
PublicznaSzkice
PrzełącznikWłącznik dla ustawienia, które działa natychmiast.
SuwakNatywne pole zakresu, ostylowane pod resztę.
Przycisk przełączanyPrzycisk, który zostaje wciśnięty.
Grupa przełącznikówKontrolka segmentowa, jako przyciski albo odnośniki.

Prezentacja danych

ALGHAT+1
AwatarObraz, gdy jest, inicjały, gdy go nie ma.
12
OdznakaLicznik albo kropka przypięta do rogu.
zaliczonystatyczne
ŻetonTag, status, filtr.
PodpowiedźWskazówka przy najechaniu i fokusie, w całości w CSS-ie.
Strona Rozmiar
/ 4,1 kB
/docs 12,7 kB
TabelaWiersze i kolumny z danych, w przewijanym kontenerze.
- Routing
  Oparty na plikach
ListaWiersze z czymś po obu stronach.
Podpis
IlustracjaObraz i jego podpis jako jedna ilustracja.

Strona	Rozmiar
/	4,1 kB
/docs	12,7 kB

Komunikaty

Wdrożono.
AlertKomunikat, którego ikona i rola ARIA idą za kolorem.
Nic tu nie ma
Pusty stanJak wygląda lista, zanim cokolwiek się w niej znajdzie.
PostępPasek dla pracy znanej, wskaźnik dla reszty.
SzkieletZastępnik w kształcie nadchodzącej treści.
Zapisano.
PowiadomieniePrzelotny komunikat, dodawany ze skryptu.

Nawigacja

1. Dokumentacja
2. UI
OkruszkiŚlad przodków kończący się na tej stronie.
1. ‹
2. 1
3. 2
4. 3
5. …
6. 5
7. ›
PaginacjaNumerowane strony w okienku, jako prawdziwe odnośniki.
Jeden Dwa
ZakładkiOdnośniki, jedna strona na zakładkę — albo panele podmieniane w miejscu.
sitelo
v2
Pasek aplikacjiMarka po jednej stronie, nawigacja i akcje po drugiej.
Przełącznik motywuJasny i ciemny, bez błysku przy wejściu.

Warstwy

Okno modalneOkno dialogowe na API popover — nigdzie żadnego skryptu.
SzufladaPanel od krawędzi, ta sama mechanika popovera.
Akcje ▾
MenuLista rozwijana na details, otwieranie i zamykanie za darmo.
Pytanie
AkordeonZwijane sekcje, łącznie z trybem wyłączności.
Pokaż więcej
Ukryte, dopóki nie poprosisz.
Zwijany panelJedno „pokaż więcej”, bez oprawy akordeonu.

Sekcje

Nagłówek
I zdanie.
HeroGóra strony docelowej: nagłówek, zdanie, akcje.
DokumentacjaPrzewodnik · Komponenty
StopkaKolumny odnośników i wiersz pod nimi.
Strony
204
+8
StatystykaLiczba warta spojrzenia i to, co znaczy.
1. Instalacja
2. Build
KrokiNumerowany przebieg, ze zrobionym oznaczonym jako zrobione.
1. v2.7
  Sekcje
Oś czasuWpisy po kolei, wzdłuż linii.
sitelo.dev
MakietaZrzut ekranu w przeglądarce, oknie, telefonie albo terminalu.

Stylowanie

MotywyKażdy kolor, promień i krój, jednym wywołaniem.

Jak zacząć

Dwie linijki: zaimportuj komponenty i wstaw styles() do head. Strona Komponenty w dokumentacji obejmuje instalację, motywy, konwencję wywołania i opcjonalny runtime kliencki, a także wypisuje każdy eksport w jednej tabeli.

Katalog examples/ui w repozytorium renderuje cały zestaw na jednej stronie.

Dodatki

Nie wszystko należy do jednego arkusza stylów. To, co fakturowe i ozdobne — na początek ziarno filmowe — żyje pod sitelo UI extras, drugim punktem wejścia, gdzie każdy komponent przynosi własny arkusz, więc strona podlinkowuje tylko to, czego używa.