Acerca de nuestra librería de componentes
Palaze ofrece una colección de componentes nativos que mejoran la funcionalidad y el diseño de tu sitio web. Nuestros componentes son fáciles de implementar, livianos y proporcionan una carga rápida que los convierte en una opción a tener en cuenta a la hora de elegir una librería.
Origen y solución de problemas
Esta librería surgió de un proyecto de un alumno de universidad. Quería utilizar la novedosa tecnología de "Web Components" para desarrollar los componentes necesarios de una página de presentación y una página de documentación. Para ello se recurrió a una herramienta de diseño, concretamente Figma, y se definió un Design System junto con unas plantillas de las páginas web y los componentes desglosados a raíz de estos diseños.
A partir de la necesidad, se crearon los Web Components necesarios para poder disponer de la web asemejandose a los diseños y se juntaron todos los componentes en una librería de código abierto para así hacer posible que otros desarrolladores usen los componentes y puedan modificarlos en el caso de necesitarlo, adaptandolos así a sus respectivos casos concretos de proyecto.
Soporte en navegadores
La librería palaze ha sido probada en distintos navegadores y podemos confirmar que todas las características y funcionalidades de los componentes creados funcionan correctamente en buscadores como, Google Chrome, Firefox, Safari, Opera, Brave, Microsoft Edge...
Puedes consultar este
Contribuyentes
Actualmente, el único controbuyente en el desarroyo de este proyecto es Pablo Díaz-Jorge con usuario
en github
También se ha hecho cargo del Design System diseñado en Figma al que puedes acceder mediante
este
¿Cómo empezar?
Hay varias formas de empezar a utilizar la librería de componentes palaze, pero actualmente disponemos de dos formas.
- Instalación Local.
- Instalación vía CDN.
Instalación local
Para poder disponer de la librería en local haremos uso del siguiente comando por consola:
En el caso de querer versiones anteriores del paquete de producción, deberás especificar tu versión como mostraremos a continuación:
Una vez instalado el paquete, deberás añadir unas líneas de código en tu página para poder hacer uso de los componentes. A continuación se muestra como hacerlo:
Será trabajo del desarrollador que haga uso de la librería de ajustar las configuraciones para su proyecto en concreto.
En el caso del ejemplo, se almacena dentro del fichero "node_modules/palaze/". En esta ubicación encontraremos la instalación del paquete.
Instalación vía CDN
Este tipo de instalación es el más sencillo, ya que para poder disponer de la librería no necesitamos hacer uso de ningún comando ni instalar nada, todo será online vía referencia al paquete.
A continuación se muestra un ejemplo de cómo instalar o implementar la librería vía CDN:
Para ver una demo online del uso de la librería podrás acceder a un CodePen vía el siguiente
Uso de los componentes
Los componentes palaze se utilizan como se utilizan elementos HTML. Para hacer uso de ellos debes conocer sus atributos, slots y funcionalidades. Para conocerlos mejor deberás acceder a la documentación de cada componente, donde se explica detalladamente lo mencionado anteriormente.
A continuación verás un ejemplo de como usar uno de nuestros componentes:
En el caso de ser nuevo en el mundo de los Web Components, en esta sección podrás ir familiarizandote con ellos.
Atributos y propiedades
Todos los componentes de la librería palaze disponen de propiedades a las que se puede acceder usando atributos. A continuación enseñaremos un ejemplo de un atributo del botón, usaremos color, el cual se asignará a la propiedad de color para determinar el color final del botón.
Es recomendable acceder a la sección de documentación de los componentes donde se enseñan y explican ejemplos de cada una de las propiedades de los componentes. También se puede visualizar más rápidamente yendo al final de cada sección de documentación del componente en cuestión, ya que habrá una tabla con todas las propiedades de este.
Slots
Algunos componentes utilizan slots para organizar o aceptar el contenido dentro de ellos. Si haciendo uso de este tipo de componentes no determinas el tipo de slot en el que irá el contenido, no se renderizará.
A continuación se muestra un ejemplo del componente Card:
Cabe recalcar que la ubicación donde se nombra al slot no tiene que seguir ningún orden, puedes definir atributos antes y después del slot y no afectará en su funcionamiento.
Es recomendable revisar la documentación de los componentes en la que se explica todas las posibilidades y características de estos detenidamente.
Curiosidades
No hacer uso del cierre automático de etiquetas "/>"
La tecnología Custom Elements no admite el cierre automático de etiquetas. El comportamiento se asemeja al de una etiqueta "<script>". Siempre se debe incluir el cierre completo:
Diferencias en componentes nativos
Aunque pueda haber similitudes de comportamiento entre componentes nativos html y web components de nuestra librería, no siempre se dará el caso que tengan mismas funcionalidades y no están diseñados con la intención de replicar a estos componentes nativos html.
Recomendamos que antes de utilizar cualquier componente se acceda a la documentación y se revise las carácterísticas del componente a utilizar.