Presentamos Shoelace, una biblioteca UX basada en componentes independiente del marco | trucos CSS

Esta es una publicación sobre Cordon de zapatobiblioteca de componentes de corey laviscapero con un giro Define todos sus componentes estándar de UX: pestañas, modales, acordeones, autocompletar y mucho mucho mas. Se ven hermosos desde el primer momento, son asequibles y totalmente personalizables. Pero en lugar de crear estos componentes en React, Solid, Svelte, etc., los crea con Web Components; esto significa que puedes usarlos con cualquier tipo cuadro.

Algunas cosas preliminares

Los componentes web son excelentes, pero hay algunos pequeños problemas que debe tener en cuenta en este momento.

Reaccionar

Dije que funcionan en cualquier marco de JavaScript, pero como he escrito antes, el soporte de React para componentes web es actualmente deficiente. Para lidiar con esto, Shoelace en realidad paquetes creados solo para Reaccionar.

Otra opción que personalmente me gusta es crear un componente React delgado que tome el nombre de una etiqueta de componente web y todos sus atributos y propiedades, y luego haga el trabajo sucio de manejar las deficiencias de React. Hablé de esta opción en un post anterior. Me gusta esta solución porque está diseñada para ser eliminada. El problema de interoperabilidad del componente web se solucionó actualmente en la rama experimental de React, por lo que una vez enviado, cualquier interoperabilidad del componente web delgado que use se puede buscar y eliminar, dejándolo con componentes de uso directo de la web, sin envoltorios de React.

Representación del lado del servidor (SSR)

El soporte para SSR también es débil al momento de escribir. En teoría, hay algo llamado Sombra declarativa DOM (DSD), que permitiría SSR. Pero el soporte del navegador es mínimo y, en cualquier caso, DSD realmente lo requiere. soporte del servidor funcionar correctamente, lo que significa El siguienteremix o lo que sea que esté usando en el servidor, debe ser capaz de realizar algún procesamiento especial.

Sin embargo, hay otras formas de obtener componentes web. solo trabajo con una aplicación web que tiene SSR con algo como Siguiente. La versión corta es que los scripts que registran sus componentes web deben ejecutarse en un script de bloqueo antes de que se analice su marcado. Pero eso es tema para otro post.

Por supuesto, si está creando algún tipo de SPA del lado del cliente, esto no es un problema. Eso es con lo que trabajaremos en este post.

Empecemos

Como quiero que esta publicación se centre en el enlace del zapato y su naturaleza de componente web, usaré Svelte para todo. Usaré esto también Proyecto Stackblitz para demostración Construiremos esta demostración juntos, paso a paso, pero siéntase libre de abrir este REPL en cualquier momento para ver el resultado final.

Te mostraré cómo usar Shoelace y, lo que es más importante, cómo personalizarlo. Hablaremos sobre Shadow DOM y qué estilos bloquean del mundo exterior (y cuáles no). también hablar de ::part CSS Selector, que puede ser completamente nuevo para usted, e incluso veremos cómo Shoelace nos permite reemplazar y personalizar sus diversas animaciones.

Si encuentra que le gusta Shoelace después de leer esta publicación y quiere probarlo en un proyecto de React, mi consejo es usar un envoltorio como mencioné en la introducción. Esto le permitirá usar cualquiera de los componentes de Shoelace y puede eliminarse por completo una vez que React envíe las correcciones del componente web que ya tienen (busque esto en la versión 19).

Presentamos un enlace de zapatos

Sholace es bastante detallado. Instrucciones de instalaciónEn el caso más simple, puede optar por no participar <script> y <style> etiquetas en su documento HTML y eso es todo Sin embargo, para cualquier aplicación de producción, probablemente desee importar selectivamente solo lo que desea, y también hay instrucciones para eso.

Con Shoelace instalado, vamos a crear un componente Svelte para representar algún contenido y luego sigamos los pasos para personalizarlo por completo. Para elegir algo relativamente no trivial, utilicé las pestañas y los componentes de diálogo (comúnmente llamados modales). Aquí hay algunas marcas tomado en gran parte de los papeles:

<sl-tab-group>
  <sl-tab slot="nav" panel="general">General</sl-tab>
  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>

  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>

<sl-dialog no-header label="Dialog">
  Hello World!
  <button slot="footer" variant="primary">Close</button>
</sl-dialog>

<br />
<button>Open Dialog</button>

Esto genera algunas pestañas bonitas y estilizadas. El resaltado de la pestaña activa incluso se anima muy bien y se desliza de una pestaña activa a la siguiente.

No perderé su tiempo revisando cada centímetro de las API, que ya están bien documentadas en el sitio web de Sholace. En su lugar, veamos la mejor manera de interactuar y personalizar completamente estos componentes web.

Interacción API: métodos y eventos

Llamar a métodos y suscribirse a eventos en un componente web puede ser un poco diferente de lo que está acostumbrado con su marco normal de elección, pero no es demasiado complicado. vamos a ver cómo.

Secciones

El componente de pestañas (<sl-tab-group>) posee show métodoque muestra manualmente una sección específica. Para llamar a esto, necesitamos acceder al elemento DOM raíz de nuestras pestañas. En Svelte, eso significa usar bind:this.En React esto sería un refY así sucesivamente Ya que estamos usando Svelte, declaremos una variable para la nuestra tabs ejemplo:

<script>
  let tabs;
</script>

... y átelo:

<sl-tab-group bind:this="{tabs}"></sl-tab-group>

Ahora podemos agregar un botón de llamada:

<button on:click={() => tabs.show("custom")}>Show custom</button>

Es la misma idea para eventos. sl-tab-show un evento que se dispara cuando se muestra una nueva pestaña. Nosotros podemos usar addEventListener de los nuestros tabs variable, o podemos usar Svelte on:event-name atajo.

<sl-tab-group bind:this={tabs} on:sl-tab-show={e => console.log(e)}>

Esto funciona y registra los objetos de eventos a medida que muestra diferentes pestañas.

Por lo general, representamos pestañas y dejamos que el usuario haga clic entre ellas, por lo que este trabajo generalmente ni siquiera es necesario, pero está ahí si lo necesita. Ahora hagamos que el componente de diálogo sea interactivo.

Diálogo

El componente de diálogo (<sl-dialog>) quitar open prop que controla si el cuadro de diálogo está... abierto Declarémoslo en nuestro componente Svelte:

<script>
  let tabs;
  let open = false;
</script>

Además, hay sl-hide evento cuando el cuadro de diálogo está oculto open apoyo y unión con hide event para que podamos restablecerlo cuando el usuario haga clic fuera del contenido del cuadro de diálogo para cerrarlo. Y agreguemos un controlador de clics a ese botón de cerrar para configurar el nuestro open soporte de falseque también cerrará el cuadro de diálogo.

<sl-dialog no-header {open} label="Dialog" on:sl-hide={() => open = false}>
  Hello World!
  <button slot="footer" variant="primary" on:click={() => open = false}>Close</button>
</sl-dialog>

Finalmente, vinculemos nuestro botón de diálogo abierto:

<button on:click={() => (open = true)}>Open Dialog</button>

Y eso es todo. Interactuar con una API de biblioteca de componentes es más o menos sencillo. Si eso es todo lo que hace esta publicación, sería bastante aburrido.

Pero Shoelace, creado con componentes web, significa que algunas cosas, especialmente los estilos, funcionarán de forma un poco diferente a lo que estamos acostumbrados.

¡Personaliza todos los estilos!

Al momento de escribir este artículo, Shoelace todavía está en versión beta, y el creador está considerando cambiar algunos de los estilos predeterminados, posiblemente incluso eliminando algunos de los predeterminados por completo para que ya no anulen los estilos de su aplicación host. Los conceptos que vamos a cubrir son relevantes en ambos casos, pero no se sorprenda si algunas de las especificaciones de Shoelace que menciono son diferentes cuando vaya a usarlo.

Por agradables que sean los estilos predeterminados de Shoelace, es posible que tengamos nuestros propios diseños en nuestra aplicación web y querremos que nuestros componentes UX coincidan. Veamos cómo haríamos esto en el mundo de los componentes web.

En realidad, no vamos a intentar mejorar todo. El creador de Shoelace es mucho mejor diseñador de lo que yo seré jamás. En su lugar, solo veremos cómo cambio cosas para que puedas adaptarlas a tus propias aplicaciones web.

Un breve recorrido por el Shadow DOM

Eche un vistazo a uno de estos encabezados de pestañas en sus DevTools; Debe tener un aspecto como este:

Nuestro elemento de pestaña creó un div recipiente con un .tab y .tab--active clase y un tabindexmientras mostramos el texto que ingresamos para esta sección. Pero fíjate que está dentro de un raíz de sombraEsto permite a los autores de componentes web agregar su propio marcado al componente web y al mismo tiempo proporcionar un lugar para el contenido. nosotros aviso <slot> ¿elemento? Esto básicamente significa "pegar cualquier contenido que el usuario haya renderizado Entre las etiquetas del componente web aquí."

De modo que <sl-tab> El componente crea una raíz oculta, le agrega algo de contenido para representar el encabezado de pestaña bien diseñado junto con un contenedor (<slot>) que representa nuestro contenido en el interior.

Estilos encapsulados

Uno de los problemas clásicos y más frustrantes en el desarrollo web siempre ha sido la cascada de estilos en lugares donde no los queremos. Puede que le preocupe que todas las reglas de estilo en nuestra aplicación que definen algo como div.tab interferiría con estas secciones. Resulta que eso no es un problema; raíces sombreadas encapsulan estilos. Los estilos fuera de la raíz de la sombra no afectan lo que está dentro de la raíz de la sombra (con algunas excepciones de las que hablaremos), y viceversa.

Las excepciones son los estilos heredados. Por supuesto, no es necesario aplicar un font-family estilo para cada elemento de su aplicación web. Puede especificar el suyo propio en su lugar font-family una vez, en :root o html y heredarla en todas partes debajo de ella. Esta herencia también atravesará la raíz de la sombra.

Las propiedades CSS personalizadas (a menudo denominadas "variables css") son una excepción relacionada. Shadow root puede leer absolutamente una propiedad CSS que se define fuera de shadow root; esto será relevante en un momento.

los ::part selector

¿Qué hay de los estilos que no haga ¿Qué pasa si queremos personalizar algo como cursorque no hereda nada dentro de la raíz sombra. ¿No somos afortunados? Resulta pretender que no lo somos. Mire nuevamente la imagen del elemento de pestaña arriba y su raíz de sombra. Aviso part atributo de divEsto le permite dirigir y diseñar este elemento fuera de la raíz de la sombra usando ::part selectorVeremos un pequeño ejemplo.

Estilos básicos de cordones

Veamos cada uno de estos enfoques en acción. mucho de los estilos Sholace, incluidas las fuentes, obtienen valores predeterminados de las propiedades CSS personalizadas. Para alinear estas fuentes con los estilos de su aplicación, reemplace los accesorios personalizados en cuestión. Mira los documentos para obtener información sobre qué variables CSS usa Shoelace, o simplemente puede verificar los estilos en cualquier elemento dado en DevTools.

Heredar estilos a través de shadow root

Abrelo app.css presentar en src directorio de Proyecto Stack BlitzEN :root pestaña en la parte inferior, debería ver un letter-spacing: normal; declaración Desde letter-spacing propiedad es heredable, intente establecer un nuevo valor como 2pxAl guardar, todo el contenido, incluidos los encabezados de sección definidos en la raíz oculta, se ajustará en consecuencia.

Sobrescritura de variables CSS de Shoelace

los <sl-tab-group> componente lee un --indicator-color Propiedad personalizada de CSS para resaltar la pestaña activa. Podemos reemplazar esto con algo de CSS básico:

sl-tab-group {
  --indicator-color: green;
}

Y así, ¡ahora tenemos un indicador verde!

Piezas para consulta

En la versión de Shoelace que estoy usando actualmente (2.0.0-beta.83), cada pestaña no deshabilitada tiene pointer cursor. Cambiémoslo al cursor predeterminado para la pestaña activa (seleccionada). eso ya lo hemos visto <sl-tab> elemento agrega un part="base" atributo de contenedor para el encabezado de la pestaña. Además, la pestaña actualmente seleccionada obtiene active Usemos estos hechos para apuntar a la pestaña activa y cambiar el cursor:

sl-tab[active]::part(base) {
  cursor: default;
}

¡Y eso es!

Personaliza animaciones

Como guinda del pastel metafórico, veamos cómo Shoelace nos permite personalizar las animaciones. Shoelace utiliza la API de animaciones web y expone setDefaultAnimation API para controlar cómo los diferentes elementos animan sus diferentes interacciones. Consulte los documentos para obtener más detalles, pero como ejemplo, así es como puede cambiar la animación de diálogo predeterminada de Sholace para que no se expanda hacia afuera y se contraiga hacia adentro para animar hacia arriba y hacia abajo mientras se esconde.

import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";

setDefaultAnimation("dialog.show", {
  keyframes: [
    { opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
    { opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
  ],
  options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
  keyframes: [
    { opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
    { opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
  ],
  options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});

Este código está en App.svelte Coméntalo para ver la animación predeterminada original.

resumiendo

Shoelace es una biblioteca de componentes increíblemente ambiciosa construida con Ceb Components. Debido a que los componentes web son independientes del marco, se pueden usar en cualquier proyecto, con cualquier marco. Con nuevos marcos que comienzan a aparecer con características de rendimiento sorprendentes y facilidad de uso, poder usar widgets UX de calidad que no están vinculados a ningún marco nunca ha sido tan emocionante.