sitelo UI

sitelo-ui es una biblioteca de componentes para sitelo. Cada componente es una función que devuelve una cadena de HTML, así que se anida directamente en la página que ya estás escribiendo: sin compilador, sin runtime, sin hidratación.

Todos los ejemplos de esta sección los renderiza la misma compilación que renderiza la página que los rodea. Lo que ves es lo que produjo el código de debajo, y sigue los temas claro y oscuro de este sitio porque sitelo-ui lee el mismo atributo data-theme que la documentación.

Maquetación

• centrado

  ContenedorUna columna de página centrada y con ancho limitado.
• unodostres

  PilaUna fila o columna flex con un token de espaciado como hueco.
• 1234

  CuadrículaMete tantas columnas como quepan, sin media queries.
• o

  SeparadorUna línea entre secciones, con o sin etiqueta.
• Relación de aspectoMantén una caja con forma fija, para que nada salte al cargar.

• Una tarjeta

  TarjetaUna superficie para contenido agrupado, con cabecera, cuerpo y pie.

Tipografía

• Encabezado

  Pie

  TipografíaUna escala tipográfica que elige su propio elemento.

• Un encabezado

  Y un párrafo.

  ProsaDa estilo a HTML crudo de Markdown o de un CMS.

• Lee la documentación.

  EnlaceUn ancla con estilo, con los atributos que necesita un enlace externo.
• Iconos99 glifos sobre una retícula, dimensionados y coloreados por el texto de alrededor.

Entradas

• GuardarCancelar

  BotónCinco variantes, cinco colores, tres tamaños.
• UnoDos

  Grupo de botonesBotones unidos en un solo control.
• Correo

  Campo de textoEtiqueta, control, ayuda y error, conectados entre sí.
• TemaClaroOscuro

  SelectorUn select nativo, estilizado a juego.
• SitemapFeed RSS

  CasillaUn input de verdad, estilizado con CSS en vez de sustituido.
• gratispro

  Grupo de radiosUna opción entre varias, con radios que comparten nombre.
• PúblicoBorradores

  InterruptorUn conmutador para un ajuste que se aplica al momento.
• DeslizadorUn input de rango nativo, estilizado a juego.
• SíNo

  Botón de alternanciaUn botón que se queda pulsado.
• abc

  Grupo de alternanciaUn control segmentado, con botones o con enlaces.

Visualización de datos

• ALGHAT+1

  AvatarUna imagen cuando la hay, iniciales cuando no.
• Bandeja12

  InsigniaUn recuento o un punto prendido en una esquina.
• correctoestático

  ChipUn tag, un estado, un filtro.
• Pasa por aquí

  TooltipUna pista al pasar por encima y al recibir foco, dibujada solo con CSS.

• Página	Tamaño
  /	4,1 kB
  /docs	12,7 kB

  TablaFilas y columnas a partir de datos, en un contenedor con scroll.
• • Rutas

    Basadas en archivos

  ListaFilas con algo a cada lado.

• 

  FiguraUna imagen y su pie, como una sola figura.

Feedback

• Desplegado.

  AlertaUn mensaje cuyo icono y rol ARIA siguen a su color.

• Aquí no hay nada

  Estado vacíoEl aspecto de una lista antes de tener nada dentro.
• ProgresoUna barra para el trabajo conocido, un spinner para el resto.
• EsqueletoUn marcador con la forma del contenido que viene.
• Guardado.

  ToastUn mensaje pasajero, añadido desde script.

Navegación

• Migas de panEl rastro de ancestros que termina en esta página.
• PaginaciónPáginas numeradas, con ventana, como enlaces de verdad.
• UnaDos

  PestañasEnlaces, una página por pestaña — o paneles que cambian en el sitio.
• sitelo

  v2

  Barra de aplicaciónLa marca a un lado, la navegación y las acciones al otro.
• Cambio de temaClaro y oscuro, sin destello al entrar.

Superposiciones

• Abrir modal

  ModalUn diálogo sobre la API de popover, sin script por ningún lado.
• Abrir panel

  Panel lateralUn panel desde el borde, con la misma mecánica de popover.
• Acciones ▾

  MenúUn desplegable sobre details: abrir y cerrar salen gratis.
• Una pregunta

  AcordeónSecciones plegables, incluido el modo exclusivo.
• Ver más

  Escondido hasta que lo pidas.

  PlegableUn único «ver más», sin la decoración del acordeón.

Secciones

• Un titular

  Y una frase.

  HeroLo alto de una página de aterrizaje: titular, frase, acciones.
• DocumentaciónGuía · Componentes

  Pie de páginaColumnas de enlaces, y una línea debajo.

• Páginas

  204

  +8

  EstadísticaUn número que merece una mirada, y lo que significa.
• 1. 1

     Instalar

  2. 2

     Compilar

  PasosUn recorrido numerado, con lo hecho marcado como hecho.

• 1. v2.7

     Secciones

  CronologíaEntradas en orden, a lo largo de una línea.
• sitelo.dev

  MockupUna captura en un navegador, una ventana, un teléfono o una terminal.

Estilos

• TemasCada color, radio y tipografía, desde una sola llamada.

Puesta en marcha

Dos líneas: importa los componentes y pon styles() en el head. La página de componentes de la documentación cubre la instalación, los temas, la convención de llamada y el runtime opcional de cliente, y lista todas las exportaciones en una sola tabla.

El directorio examples/ui del repositorio renderiza el conjunto entero en una sola página.