Aunque los componentes web se introdujeron en 2011, no son la primera o segunda opción del desarrollador promedio para escribir diseños de interfaz de usuario, a pesar de lo que ofrece la tecnología.
Esto se debe en parte al aumento de los marcos de JavaScript, los entusiastas del desarrollo basado en componentes y otros factores esotéricos a lo largo de los años.
Ahora llega Shoelace, una biblioteca de interfaz de usuario basada en tecnología de componentes web que brinda la misma experiencia que cualquier marco de JavaScript, pero con mejores ventajas.
En este artículo, presentaremos Shoelace, ¿ cómo desinstalar completamente Internet Explorer en Windows 10? Pasos gráficos detallados de desinstalación para ver su funcionamiento interno y demostrar cómo usar sus componentes con React para construir una interfaz simple.
requisitos previos
Para seguir este tutorial, necesita lo siguiente:
-
Conocimiento práctico de React.
-
La última versión de Node.js está instalada en su computadora
¿Qué es el cordón de zapato?
Shoelace es un componente de código abierto e independiente del marco para crear aplicaciones web accesibles.
A diferencia de las bibliotecas de interfaz de usuario tradicionales que exportan componentes de interfaz de usuario y elementos específicos de un marco en particular, Shoelace proporciona una colección de componentes de interfaz de usuario altamente personalizables creados sobre una tecnología independiente del marco conocida como componentes web.
¿Qué son los componentes web?
Los componentes web son una combinación de tecnologías web estándar. ¿Cómo codificar vídeo MPEG con Canopus Procoder? El intercambio de tutoriales gráficos le permite crear elementos o componentes personalizados reutilizables que encapsulan la funcionalidad y el estilo del resto de su código.
La especificación de componentes web consta de tres tecnologías:
-
Elementos personalizados: son elementos HTML con nombres de etiquetas y comportamientos personalizados, especificados por un conjunto de API de JavaScript, que se pueden usar en cualquier parte de la aplicación.
-
Shadow Dom: este es un conjunto de API de JavaScript que adjuntan un árbol DOM con alcance a los elementos. Aísla la funcionalidad y el estilo de elementos personalizados para evitar conflictos con otras partes del documento.
-
Plantillas HTML: estos son elementos HTML ( y ) que le permiten crear plantillas de marcado que no se representarán hasta que se llame a <template>``<slot>.
Estas técnicas se utilizan juntas para crear componentes web con funcionalidad encapsulada.
Consulte la documentación para obtener más información sobre la especificación de componentes web.
Beneficios de usar cordones
Los marcos de front-end como Angular, React y Vue.js se basan en el concepto de utilizar el desarrollo basado en componentes para crear interfaces de usuario organizadas de componentes, encapsulando contenido, funcionalidad y estilo en un único archivo JavaScript.
Si bien esto alivia las complejas limitaciones que existen en el desarrollo web, tiene algunas desventajas:
-
Los componentes son específicos del marco, lo que significa que solo se pueden utilizar en el marco para el que fueron diseñados.
-
Los desarrolladores deben aprender a utilizar el marco de diseño de componentes.
-
La vida útil de los componentes está limitada por la vida útil del marco.
-
Los desarrolladores tienen que reconstruir los componentes básicos cuando cambian a otro marco
Los componentes web están diseñados para resolver estos problemas.
Shoelace se basa en la tecnología de componentes web. Notas divertidas Exporta componentes estándar HTML y DOM compatibles con todos los navegadores modernos y funciona en diferentes marcos.
Hay muchos beneficios al usar Shoelace; aquí hay algunos:
-
Componentes totalmente personalizables para que coincidan con los diseños existentes.
-
Capacidad para crear múltiples aplicaciones utilizando diferentes marcos que comparten los mismos componentes de la interfaz de usuario.
-
Capacidad para cambiar marcos sin reconstruir los componentes subyacentes
-
Soporte continuo del navegador
Empezando con los cordones
Instalar Shoelace es tan fácil como agregar etiquetas a la documentación del proyecto. Notas interesantes Mapa del sitio Sin embargo, no todos los marcos proporcionan soporte integrado para componentes web. <guión></guión>
Por ejemplo, el árbol de renderizado de React no propaga correctamente los eventos emitidos por los componentes web. Para resolver este problema, Shoelace creó contenedores que nos permiten usar componentes web en React.
Hay tres formas oficiales de integrar Shoelace en un proyecto:
-
CDN: esta es la forma más fácil de integrar Shoelace en su proyecto; requiere agregar un script CDN y un enlace de estilo al documento.
-
Instalación local: este método le permite instalar Shoelace localmente usando el administrador de paquetes Node.js.
-
Elija: instalar Shoelace a través de CDN o localmente generará el tamaño completo de la biblioteca en su proyecto, lo que reducirá el tiempo de carga de su aplicación. En cambio, Shoelace te permite elegir e instalar sólo los componentes que realmente necesitas.
Instalar
En este artículo, usaremos React para demostrar el uso de Shoelace. Dado que Shoelace usa un contenedor de React, solo podemos instalar la biblioteca localmente usando npm.
Para los propósitos de esta demostración, supongo que ya tiene un proyecto React configurado. Ahora, continúa e instala Shoelace con el siguiente comando:
npm install @shoelace-style/shoelace
Una vez que Shoelace esté instalado, puede comenzar a usar sus componentes importándolos en componentes, como este:
importar { SlInput } desde "@shoelace-style/shoelace/dist/react";
función Aplicación() {
return (
<div className="App ">
<SlInput value={"David"} label="Nombre" />
</div>
);
}
exportar
aplicación predeterminada;
Como puede ver, el componente Shoelace se importa como un componente de React, no como un elemento personalizado real. Esto es exclusivo de React; los componentes del código anterior se importarán como elementos personalizados a otros marcos como Vue, Svelte o Angular. <Botón-sl>``<botón-sl>
El código anterior representará un elemento de entrada básico en el navegador, pero sin el estilo predeterminado:
selección de tema
El componente Shoelace está diseñado para ser altamente compatible con los diferentes sistemas temáticos que pueda tener su proyecto. Puede elegir entre temas claros u oscuros, o crear temas personalizados listos para usar.
Los temas agregados al proyecto determinarán el estilo predeterminado de los componentes. Por ejemplo, supongamos que se agrega un tema a un proyecto vinculando una hoja de estilo al archivo del proyecto: light``App.js
importar "./App.css";
import { SlInput } from "@shoelace-style/shoelace/dist/react";
//
hoja de estilo de tema ligero
import "@shoelace-style/shoelace/dist/themes/light.css";
function
App() {
return (
<div className="App">
<SlInput value={"David"} label="Nombre" />
</div>
);
}
exportar
aplicación predeterminada;
El componente de entrada se representará con el estilo predeterminado (determinado por el tema en este caso) de la siguiente manera: claro
Si agrega un tema, el componente se representará con el estilo predeterminado correspondiente a ese tema: oscuro
A diferencia de los temas, para utilizar un tema debes activar una hoja de estilo después de importarla a tu proyecto. Puedes hacer esto agregando el padre dentro del archivo de esta manera: light darksl-theme-dark classNamediv ``App.js
//hoja de estilo de tema oscuro
import "@shoelace-style/shoelace/dist/themes/dark.css";
function
App() {
return
(
<div className="App sl-theme-dark">
<SlInput value={ "hola"} />
</div>
);
}
exportar
aplicación predeterminada;
A estas alturas, deberías tener un conocimiento básico de cómo funciona Shoelace y cómo integrarlo en un proyecto de React.
A continuación, creemos un compuesto para comprender mejor el funcionamiento interno del componente Shoelace.
Usando componentes web en React
Shoelace proporciona componentes únicos que no encontrará en muchas otras bibliotecas de marcos. Las cosas gustan y realmente impulsan la idea de lo que es posible con una biblioteca. panel dividido del compositor de imágenes
Para nuestro proyecto de ejemplo, crearemos un componente de tarjeta con un botón y un icono de engranaje que activa eventos cuando se hace clic.
Si desea seguir el proyecto de ejemplo, cree una carpeta dentro de esa carpeta y agregue un archivo: componentes srccard.jsx
A continuación, importe el componente al archivo y agréguelo a la siguiente sección: App.jsdevolución de tarjeta
//App.jsx
importa {useState} de "react";
importar "./App.css";
importar ejemplo desde "./components/example";
function
App() {
return (
<div className="App">
<Ejemplo />
</div>
);
}
exportar
aplicación predeterminada;
Ahora, necesita importar todos los componentes utilizados a lo largo del tutorial en un archivo: card.jsx
//example.js
import {
SlButton,
SlCard,
SlDrawer,
SlIconButton,
SlDialog,
SlSwitch,
} de "@shoelace-style/shoelace/dist/react";
Una vez hecho esto, ¡es hora de empezar a componer las cartas!
En el cuerpo del componente, declare el componente y anide el siguiente código dentro de él: <Slcard>
<SlCard style={
{ maxWidth: "300px" }} >
<img
src="https://images.unsplash.com/photo-1667120651808-34305af680d3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8 &auto=formato&fit=recorte&w=1736&q =80"
alt="Una ardilla sentada sobre un bosque."
slot="image"
/>
<strong>Ardilla</strong>
<br />
<p>Las ardillas son miembros de la familia Sciuridae, una familia que incluye…</p>
<br />
<small>6 semanas de edad< /small>
<div slot="pie de página"
style={
{
display: "flex",
alignItems: "center",
Más información
<SlIconButton
nombre="equipo"
>>SlIconButton>
</div>
</SlCard>
Aquí agregamos una imagen, un título y una descripción a la tarjeta usando los elementos , y. También agregamos un pie de página con componentes de icono y botón de cordón anidados: img strongsmall ``div
Antes de importar y utilizar recursos como iconos, asegúrese de establecer la ruta base del recurso Shoelace en el archivo: App.jsx
//App.jsx
import { setBasePath } de "@shoelace-style/shoelace/dist/utilities/base-path";
setBasePath (
"https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/"
);
y los atributos de la etiqueta son atributos de Shoelace que algunos componentes web utilizan para aceptar contenido dentro de ellos. En nuestro proyecto, lo usamos para definir la imagen y la sección de pie de página del portafolio de tarjetas. imgdivisión de ranura
Esta propiedad le dice al componente dónde colocar el elemento al que se llama. tener un pie de página, por ejemplo si coloca el código en la parte superior del componente de la tarjeta, justo antes de la etiqueta: slot divslot``img
<SlCard style={
{ maxWidth: "300px" }}>
<div slot="footer"
style={
{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<SlButton variante="primary" pill>
Más información
</SlButton>
<SlIconButton
name="gear"
>>SlIconButton>
</div>
<img
src="https://images.unsplash.com/photo-1667120651808-34305af680d3? ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1736&q=80"
alt="Una ardilla sentada sobre un bosque."
slot="image"
/>
<strong>Ardilla</strong>
<br />
<p>Las ardillas son miembros de la familia Sciuridae, una familia que incluye…</p>
<br />
<small>6 semanas de edad</small>
</SlCard>;
El pie de página seguirá apareciendo en la parte inferior de la tarjeta en el navegador. Lo mismo ocurre con las etiquetas. div``img
Visite la página de documentación de componentes para ver otras ranuras de componentes y cómo utilizarlas. tarjeta
A continuación, veamos cómo personalizar la composición de la tarjeta usando CSS.
Diseño de componentes web de cordones de zapatos
Como habrás notado, los componentes de Shoelace no están particularmente bien diseñados desde el primer momento, pero tienen suficientes estilos para comenzar.
Para alinear el diseño del componente Shoelace con el de su aplicación, primero debe comprender cómo Shoelace utiliza el DOM oculto.
Como se mencionó anteriormente, Shadow DOM encapsula el estilo y el comportamiento de elementos personalizados. Por lo tanto, los estilos externos al DOM oculto no afectarán el contenido interno, por lo que no puede simplemente usar selectores CSS para apuntar al interior de un elemento personalizado.
Utilice las herramientas de desarrollo de su navegador para ver los botones en el pie de página de la tarjeta. Debería verse así: Más información
Antes de comenzar a diseñar nuestros componentes, debemos comprender qué está sucediendo aquí. Este componente crea un elemento con tres elementos anidados que representan cada parte del componente web: , y . <SlButton> buttonabarca prefixel sufijo de la etiqueta``
El segundo elemento envuelve un elemento responsable de representar cualquier contenido pasado entre el marcado de componentes web. abarca``<ranura>
Nota: este es el DOM oculto de nuestro botón. Encapsula el contenido dentro del elemento personalizado. botón ``raíz sombra
El elemento subyacente es lo que necesitamos diseñar. Sin embargo, dado que esto no se puede hacer desde afuera usando solo selectores CSS normales, usaremos uno de los métodos proporcionados por Shoelaces para diseñar el elemento personalizado. botón
Hay tres formas de personalizar el elemento personalizado Shoelace; puede usar componentes, tokens de diseño o atributos personalizados.
La documentación oficial proporciona instrucciones detalladas sobre cómo utilizar estos métodos para la personalización. Para mayor comodidad, demostraremos cómo personalizar componentes utilizando el primer método (partes de componentes).
El componente Shoelace expone una propiedad que le permite apuntar a elementos personalizados desde fuera de la raíz de la sombra utilizando pseudoselectores CSS. parte``::parte()
Si observa detenidamente los elementos personalizados en devtool, notará un atributo en el elemento base: partbotón <SlButton>
<button part="base" class="botón--botón principal--botón mediano--botón estándar--botón de pastilla--tiene-etiqueta" type="botón" role="botón" aria-disabled="false " tabindex="0" > ... </botón>;
Puede apuntar a atributos en elementos simplemente dándole al componente a y agregando un selector en el archivo CSS: part(base) <SlButton>className``::part()
.button::part(base){
color: negro;
color de fondo: verde;
}
Alternativamente, puede usar un componente como selector, pero debe usarse con un elemento personalizado real, no con un componente de React exportado por el contenedor. Entonces usemos en su lugar: sl-button``SlButton
botón sl::parte(base){
color: negro;
color de fondo: verde;
}
Este código CSS cambiará el texto y el color de fondo del botón de blanco a negro y de azul a verde respectivamente:
Hay algunas cosas importantes a tener en cuenta aquí. Dado que cada componente tiene una pieza base, cada botón de la página tendrá este estilo seleccionado. Para solucionar esta peculiaridad, podemos utilizar el método del componente nuevamente. Le daremos uno al botón y lo usaremos en lugar del nombre del componente. botón``nombre de clase
No tenemos muchos otros estilos en nuestras tarjetas. En este caso, el estilo predeterminado es bastante bueno, así que lo dejaremos como está.
A continuación, veamos cómo agregar detectores de eventos a los íconos de botones y engranajes. Más información
manejo de eventos
El componente Shoelace emite eventos y métodos, cuyo uso puede ser ligeramente diferente al que está acostumbrado en React. Por ejemplo, un componente tiene un método que, cuando se llama, activa manualmente el estado emergente del componente. Sin embargo, debe usar el Hook de React para acceder al elemento personalizado subyacente para usar este método: dialog showdialog``useRef
importar Reaccionar desde "reaccionar";
importar { SlDialog } desde "@shoelace-style/shoelace/dist/react";
exportar función predeterminada Ejemplo() {
const ref = React.useRef();
return (
<div>
<SlDialog label="dialog" ref={ref}></SlDialog>
</div>
);
}
El componente también emite un evento que se activa cuando se muestra el cuadro de diálogo. En React, puedes escuchar el mismo evento usando: sl-show``onSlShow
importar Reaccionar desde "reaccionar";
importar { SlDialog } desde "@shoelace-style/shoelace/dist/react";
exportar función predeterminada Ejemplo() {
const aFunc = () =>{
console.log("Esta función se ejecutará cuando se muestre el componente de diálogo");
}
return (
<div>
<SlDialog label="dialog" onSlShow={aFunc}></SlDialog>
</div>
);
}
Alternativamente, puedes usar los controladores de eventos de React, por ejemplo, en componentes como: onClick SlButton<SlIconButton>
importar Reaccionar desde "reaccionar";
importar { SlDialog } desde "@shoelace-style/shoelace/dist/react";
exportar función predeterminada Ejemplo() {
const [alternar, setToggle] = React.useState(false)
return (
<div>
<SlDialog label="dialog" onClick={() => setToggle(true)}></SlDialog>
< /div>
);
}
A continuación, agregaremos controladores de eventos y componentes que se abren cuando se hace clic en los componentes del botón y del ícono de ajustes en la tarjeta. onClick drawerdialog``Más información
Este componente mostrará más información sobre el contenido de la tarjeta. Este componente generará un componente que deshabilita o habilita el botón cuando cambia su estado. interruptor de cajón``Más dialoginformación
Lo primero que debemos hacer es crear tres estados diferentes para cada evento en el archivo: ejemplo.jsx
const [abierto, setOpen] = React.useState(false); const [diálogo, setDialog] = React.useState(false); const [alternar, setToggle] = React.useState(true);
A continuación, agregue controladores de eventos al botón de pie de página y al ícono de ajustes con funciones de devolución de llamada para alternar y valores de variables de estado: onClick OpenDialog
<SlButton
onClick={() => setOpen(true)}
variante="primary"
pill
>
Más información
</SlButton>
<SlIconButton
name="gear"
onClick={() => setDialog(true)}
></SlIconButton >
Ahora, cuando se hace clic en el botón, su controlador de eventos establece el valor del estado y en . Abierto Dialogverdadero
A continuación, agregue los componentes debajo de la composición de la tarjeta, el contenido y los accesorios son los siguientes: cajón``diálogo
<SlDrawer
label="Ardilla"
colocación="inicio"
open={open}
onSlAfterHide={() => setOpen(false)}
>
<img
src="https://images.unsplash.com/photo-1667120651808-34305af680d3 ?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1736&q=80"
alt="Una ardilla sentada sobre un bosque."
style={
{ width: "100%" }}
/>
<p>
Las ardillas son miembros de la familia Sciuridae, una familia que incluye
roedores de tamaño pequeño o mediano. La familia de las ardillas incluye árboles
</p>
las ardillas arbóreas, las ardillas terrestres y las ardillas voladoras. Las ardillas son
Originarios de América, Eurasia y África, y fueron introducidos
por humanos en Australia.
<SlButton
slot="pie de página"
variante="primary"
onClick={() => setOpen(false)}
>
Cerrar
</SlButton>
</SlDrawer>
<SlDialog
label="Dialog"
open={dialog}
onSlAfterHide={( ) => setDialog(false)}
>
<div
style={
{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
onSlChange={() => setToggle(alternar ? false : true)}
>>SlSwitch>
</div>
<SlButton
slot="pie de página"
variante="primary"
onClick={() => setDialog(false)}
>
Cerrar
</SlButton>
</SlDialog>
Los accesorios en ambos componentes le permiten pasar variables de estado que controlan sus estados abiertos y cerrados. Estamos usando esto en lugar del método and. abrir showesconder
Al pasar los accesorios de estado y, le decimos a los componentes que se muestren cuando el valor de su estado respectivo sea verdadero: Abrir Dialogabrir
Dentro del pie de página de ambos componentes hay un componente que tiene el estado establecido en, cerrándolos así. botón onClickfalso
A diferencia de otros componentes, los componentes anidados dentro de componentes no utilizan controladores para sus eventos. En su lugar, utilizamos controladores de eventos para configurar el estado de alternancia. SlEncenderHacer dialogclic``enSlCambiar
<SlSwitch
onSlChange={() => setToggle(alternar? falso : verdadero)}
></SlSwitch>
Aquí verificamos si el valor del estado es un estado antes de establecerle un nuevo valor. alternar``verdadero
Actualmente, el Estado no activa nada. Queremos que deshabilite o habilite el botón según su valor actual. Entonces, lo que hacemos es agregar un accesorio al botón y pasarle la variable de estado como parámetro: alternar More Infodesactivado``alternar
<SlButton
onClick={() => setOpen(true)}
variante="primary"
deshabilitado={toggle}
pill
className="button"
>
Más información
</SlButton>
¡Eso es todo! Logramos crear una baraja de cartas interactiva con el mínimo esfuerzo. Podemos transferir fácilmente nuestra composición a otros frameworks, como Svelte, Angular o Vue, gracias a la tecnología Shoelace y Web Components casi no se requieren ajustes.
en conclusión
En este artículo, presentamos Shoelace y componentes web. También analizamos cómo Shoelace aprovecha la tecnología de componentes web para crear una biblioteca de interfaz de usuario independiente del marco.
Este artículo también muestra los componentes , , y de Shoelace, y demuestra cómo se pueden usar juntos para formar una interfaz simple. botón cardentrada dialogcajón``interruptor