sitelo UI

sitelo-ui est une bibliothèque de composants pour sitelo. Chaque composant est une fonction qui renvoie une chaîne de HTML : il s’imbrique donc directement dans la page que vous écrivez déjà — pas de compilateur, pas de runtime, pas d’hydratation.

Chaque exemple de cette section est rendu par le même build que la page qui l’entoure. Ce que vous voyez est ce que le code en dessous a produit, et cela suit les thèmes clair et sombre de ce site parce que sitelo-ui lit le même attribut data-theme que la documentation.

Mise en page

• centré

  ConteneurUne colonne de page centrée et de largeur limitée.
• undeuxtrois

  PileUne rangée ou une colonne flex avec un jeton d’espacement pour l’écart.
• 1234

  GrilleLoge autant de colonnes qu’il en tient, sans media queries.
• ou

  SéparateurUn filet entre deux sections, avec ou sans libellé.
• Rapport d’aspectFixe la forme d’une boîte, pour que rien ne bouge au chargement.

• Une carte

  CarteUne surface pour du contenu groupé, avec en-tête, corps et pied.

Typographie

• Titre

  Légende

  TypographieUne échelle typographique qui choisit son élément.

• Un titre

  Et un paragraphe.

  ProseStyler du HTML brut venu de Markdown ou d’un CMS.

• Lisez la documentation.

  LienUne ancre stylée, avec les attributs qu’un lien externe réclame.
• Icônes99 glyphes sur une grille, dimensionnés et colorés par le texte autour.

Champs

• EnregistrerAnnuler

  BoutonCinq variantes, cinq couleurs, trois tailles.
• UnDeux

  Groupe de boutonsDes boutons réunis en un seul contrôle.
• E-mail

  Champ de texteLibellé, contrôle, aide et erreur, reliés entre eux.
• ThèmeClairSombre

  Liste déroulanteUn select natif, stylé pour s’accorder.
• SitemapFlux RSS

  Case à cocherUn vrai input, stylé en CSS plutôt que remplacé.
• gratuitpro

  Groupe de boutons radioUn choix parmi plusieurs, en radios partageant un name.
• PublicBrouillons

  InterrupteurUne bascule pour un réglage qui s’applique tout de suite.
• CurseurUn input range natif, stylé pour s’accorder.
• OuiNon

  Bouton basculeUn bouton qui reste enfoncé.
• abc

  Groupe de basculesUn contrôle segmenté, en boutons ou en liens.

Affichage de données

• ALGHAT+1

  AvatarUne image quand il y en a une, des initiales sinon.
• Boîte12

  BadgeUn compteur ou un point épinglé dans un coin.
• réussistatique

  PuceUn tag, un statut, un filtre.
• Survolez-moi

  InfobulleUne indication au survol et au focus, dessinée entièrement en CSS.

• Page	Taille
  /	4,1 ko
  /docs	12,7 ko

  TableauDes lignes et des colonnes à partir de données, dans un conteneur défilant.
• • Routage

    Basé sur les fichiers

  ListeDes rangées avec quelque chose de chaque côté.

• 

  FigureUne image et sa légende, en une seule figure.

Retour d’information

• Déployé.

  AlerteUn message dont l’icône et le rôle ARIA suivent la couleur.

• Rien ici

  État videÀ quoi ressemble une liste avant d’avoir quoi que ce soit.
• ProgressionUne barre pour un travail connu, un spinner pour le reste.
• SqueletteUn substitut à la forme du contenu à venir.
• Enregistré.

  ToastUn message éphémère, ajouté par script.

Navigation

• Fil d’ArianeLa trace des ancêtres qui se termine à cette page.
• PaginationDes pages numérotées, fenêtrées, en vrais liens.
• UnDeux

  OngletsDes liens, une page par onglet — ou des panneaux qui s’échangent.
• sitelo

  v2

  Barre d’applicationLa marque d’un côté, la navigation et les actions de l’autre.
• Bascule de thèmeClair et sombre, sans le flash à l’arrivée.

Superpositions

• Ouvrir la modale

  ModaleUn dialogue sur l’API popover — aucun script nulle part.
• Ouvrir le tiroir

  TiroirUn panneau depuis le bord, mêmes mécaniques de popover.
• Actions ▾

  MenuUn déroulant bâti sur details : ouverture et fermeture gratuites.
• Une question

  AccordéonDes sections repliables, mode exclusif compris.
• Voir plus

  Caché jusqu’à ce qu’on le demande.

  RepliableUn seul « voir plus », sans les ornements de l’accordéon.

Sections

• Un titre

  Et une phrase.

  HeroLe haut d’une page d’accueil : titre, phrase, actions.
• DocumentationGuide · Composants

  Pied de pageDes colonnes de liens, et une ligne en dessous.

• Pages

  204

  +8

  StatistiqueUn chiffre qui mérite un regard, et ce qu’il signifie.
• 1. 1

     Installer

  2. 2

     Construire

  ÉtapesUn parcours numéroté, avec ce qui est fait marqué comme fait.

• 1. v2.7

     Sections

  ChronologieDes entrées dans l’ordre, le long d’une ligne.
• sitelo.dev

  MaquetteUne capture dans un navigateur, une fenêtre, un téléphone ou un terminal.

Styles

• ThématisationChaque couleur, rayon et police, depuis un seul appel.

Mise en place

Deux lignes : importez les composants, et mettez styles() dans le head. La page Composants de la documentation couvre l’installation, la thématisation, la convention d’appel et le runtime client facultatif, et liste tous les exports dans un seul tableau.

Le dossier examples/ui du dépôt rend l’ensemble complet sur une seule page.