sitelo UI

sitelo-ui ist eine Komponentenbibliothek für sitelo. Jede Komponente ist eine Funktion, die einen HTML-String zurückgibt, und fügt sich damit direkt in die Seite ein, die du ohnehin schreibst — ohne Compiler, ohne Runtime, ohne Hydration.

Jedes Beispiel in diesem Abschnitt rendert derselbe Build, der auch die Seite ringsum rendert. Was du siehst, ist genau das, was der Code darunter erzeugt hat, und es folgt dem hellen und dunklen Theme dieser Website, weil sitelo-ui dasselbe data-theme-Attribut liest wie die Doku.

Layout

• zentriert

  ContainerEine zentrierte Seitenspalte mit begrenzter Breite.
• einszweidrei

  StackEine Flex-Reihe oder -Spalte mit einem Abstands-Token als Lücke.
• 1234

  GridPasst so viele Spalten ein, wie hineinpassen — ohne Media Queries.
• oder

  TrennerEine Linie zwischen Abschnitten, mit oder ohne Beschriftung.
• SeitenverhältnisHält eine Box in fester Form, damit beim Laden nichts springt.

• Eine Karte

  KarteEine Fläche für gruppierten Inhalt, mit Kopf, Körper und Fuß.

Typografie

• Überschrift

  Bildunterschrift

  TypografieEine Typoskala, die ihr Element selbst wählt.

• Eine Überschrift

  Und ein Absatz.

  ProsaRohes HTML aus Markdown oder einem CMS gestalten.

• Lies die Doku.

  LinkEin gestalteter Anker, mit den Attributen, die ein externer Link braucht.
• Icons99 Zeichen auf einem Raster, bemessen und gefärbt vom Text ringsum.

Eingaben

• SpeichernAbbrechen

  ButtonFünf Varianten, fünf Farben, drei Größen.
• EinsZwei

  Button-GruppeButtons zu einem Steuerelement verbunden.
• E-Mail

  TextfeldLabel, Steuerelement, Hilfetext und Fehler, miteinander verdrahtet.
• ThemeHellDunkel

  SelectEin natives Select, passend gestaltet.
• SitemapRSS-Feed

  CheckboxEin echtes Input, per CSS gestaltet statt ersetzt.
• gratispro

  Radio-GruppeEine Wahl aus mehreren, als Radios mit gemeinsamem name.
• ÖffentlichEntwürfe

  SchalterEin An/Aus-Schalter für eine Einstellung, die sofort greift.
• SliderEin natives Range-Input, passend gestaltet.
• AnAus

  Toggle-ButtonEin Button, der gedrückt bleibt.
• abc

  Toggle-GruppeEin segmentiertes Steuerelement, als Buttons oder als Links.

Datenanzeige

• ALGHAT+1

  AvatarEin Bild, wenn es eines gibt, sonst die Initialen.
• Posteingang12

  BadgeEine Zahl oder ein Punkt, an eine Ecke geheftet.
• bestandenstatisch

  ChipEin Tag, ein Status, ein Filter.
• Fahr drüber

  TooltipEin Hinweis beim Überfahren und beim Fokus, ganz in CSS gezeichnet.

• Seite	Größe
  /	4,1 kB
  /docs	12,7 kB

  TabelleZeilen und Spalten aus Daten, in einem Scroll-Container.
• • Routing

    Dateibasiert

  ListeZeilen mit etwas an beiden Enden.

• 

  AbbildungEin Bild und seine Unterschrift, als eine Abbildung.

Rückmeldung

• Deployt.

  HinweisEine Meldung, deren Icon und ARIA-Rolle der Farbe folgen.

• Hier ist nichts

  LeerzustandWie eine Liste aussieht, bevor etwas darin steht.
• FortschrittEin Balken für bekannte Arbeit, ein Spinner für den Rest.
• SkeletonEin Platzhalter in der Form des kommenden Inhalts.
• Gespeichert.

  ToastEine flüchtige Meldung, per Skript angehängt.

Navigation

• BreadcrumbsDie Spur der Vorfahren, die bei dieser Seite endet.
• PaginierungNummerierte Seiten, als Fenster, als echte Links.
• EinsZwei

  TabsLinks, eine Seite je Tab — oder Panels, die an Ort und Stelle wechseln.
• sitelo

  v2

  App-BarDie Marke auf der einen Seite, Navigation und Aktionen auf der anderen.
• Theme-UmschalterHell und dunkel, ohne Aufblitzen beim Eintreffen.

Overlays

• Modal öffnen

  ModalEin Dialog auf der Popover-API — nirgends ein Skript.
• Drawer öffnen

  DrawerEin Panel von der Kante, gleiche Popover-Mechanik.
• Aktionen ▾

  MenüEin Dropdown auf details, Öffnen und Schließen gratis.
• Eine Frage

  AkkordeonAusklappbare Abschnitte, exklusiver Modus inklusive.
• Mehr zeigen

  Versteckt, bis danach gefragt wird.

  AusklappbarEin einzelnes „mehr zeigen“, ohne Akkordeon-Beiwerk.

Abschnitte

• Eine Schlagzeile

  Und ein Satz.

  HeroDer Kopf einer Landing-Page: Schlagzeile, Satz, Aktionen.
• DokuAnleitung · Komponenten

  FooterSpalten mit Links, und eine Zeile darunter.

• Seiten

  204

  +8

  KennzahlEine Zahl, die einen Blick wert ist, und was sie bedeutet.
• 1. 1

     Installieren

  2. 2

     Bauen

  SchritteEin nummerierter Ablauf, in dem Erledigtes als erledigt gilt.

• 1. v2.7

     Abschnitte

  TimelineEinträge der Reihe nach, an einer Linie entlang.
• sitelo.dev

  MockupEin Screenshot in Browser, Fenster, Telefon oder Terminal.

Styling

• ThemingJede Farbe, jeder Radius, jede Schrift — aus einem Aufruf.

Einrichtung

Zwei Zeilen: die Komponenten importieren und styles() in den Head setzen. Die Komponentenseite in der Doku behandelt Installation, Theming, die Aufrufkonvention und das optionale Client-Runtime und listet jeden Export in einer Tabelle.

Das Verzeichnis examples/ui im Repository rendert den ganzen Satz auf einer einzigen Seite.