lion

León

Sitio web · Fundamentos · Guías · Componentes · Blog

Lion es un conjunto de componentes web de alto rendimiento, accesibles y flexibles.

Proporcionan una capa de marca blanca sin opiniones que se puede extender a su propia capa de componentes.

• Alto rendimiento: centrado en un excelente rendimiento en todos los navegadores relevantes con un número mínimo de dependencias.

• Accesibilidad: Dirigido al cumplimiento del estándar WCAG 2.2 AA para crear componentes accesibles para todos.

• Flexibilidad: Proporciona soluciones a través de componentes web y clases de JavaScript que pueden usarse, adoptarse y ampliarse para adaptarse a todas las necesidades.

• Código moderno: Lion se distribuye como módulos es puros.

• Expone funciones/clases y componentes web: proporciona una funcionalidad en su forma más apropiada.

Nota: Nuestros ejemplos de demostración pueden parecer simples y no muy elegantes. Esto es a propósito. Están diseñados para ser básicos, de modo que pueda agregarles fácilmente sus propios estilos para que coincidan con el diseño deseado, sin tener que lidiar con estilos que ya existen.

Explora las Guías del León ▶

Cómo instalar

 npm i @lion/ui

como usar

Extender un componente web

Este es el principal caso de uso de lion . Para importar clases de componentes y ampliarlas para los componentes de su propio sistema de diseño.

 importar { css } desde 'lit'; importar { LionInput } desde '@lion/ui/input.js'; clase MyInput extiende LionInput {
  static get estilos() {return [ super.styles, css` /* tus estilos aquí */ `,];
  }}customElements.define('mi-entrada', MiEntrada);

Utilice un sistema JavaScript

Hay un par de "sistemas" en Lion que tienen una API de JavaScript. Algunos ejemplos son localize , overlays , ajax , etc.

 <tipo de script="módulo">
  importar {ajax} desde '@lion/ui/ajax.js';

  ajax.fetch('data.json').then(response => respuesta.json()).then(data => { // hacer algo con los datos});</script>

Utilice un componente web

También puedes utilizar los elementos del león directamente, aunque probablemente este no sea un caso de uso común.

 <tipo de script="módulo">
  importar '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>

Asuntos

Si encuentra algún problema con alguno de los paquetes que ofrecemos, abra un nuevo problema de error. Asegúrese de incluir una descripción del comportamiento esperado y actual; agregar una reproducción adicional siempre ayuda.

Solicitudes de funciones

Cuando tenga una idea sobre cómo podríamos mejorar, consulte nuestras discusiones para ver si hay ideas similares o solicitudes de funciones. Si no hay ninguno, inicie su solicitud de función como un nuevo tema de discusión. Agregue el título [Feature Request] My awesome feature y una descripción de lo que espera de la mejora y cuál es el caso de uso.

Contenido

Nombre	versión	descripción
@leon/ui		Conjunto de componentes
@leon/ajax		Un pequeño envoltorio alrededor de buscar
administrador singleton		Un administrador singleton proporciona una manera de garantizar que una instancia singleton cargada desde múltiples ubicaciones de archivos siga siendo un singleton. Principalmente útil si se utilizan dos versiones principales de un paquete con un singleton.
El complemento de Babel amplía los documentos		Un complemento que reescribe importaciones y plantillas según una configuración. Esto permite la reutilización de la documentación existente de los paquetes fuente mientras se sigue utilizando el código de extensiones.
análisis de providencia		Providence es el 'Ojo que todo lo ve' que genera estadísticas de uso analizando el código. Mide la efectividad y popularidad de su software. Con solo unos pocos comandos puede medir el impacto de los cambios (importantes), haciendo que su proceso de lanzamiento sea más estable y predecible.
Publicar documentos		Una herramienta que copia y procesa su documentación (en un monorepo) para que pueda publicarse/enviarse con su paquete.
Ampliar comentario		Un complemento de comentario para ampliar la reducción importando desde archivos fuente.
Preajuste de cohetes ampliar documentos de león		Al mantener su propia capa de extensión de león, lo más probable es que desee mantener una documentación similar. Copiar y reescribir los archivos de rebajas funciona, pero cada vez que algo cambia, es necesario copiarlos y reescribirlos nuevamente. Para hacer esto automáticamente puedes usar este ajuste preestablecido para cohetes.

Tecnologías

Lion Web Components pretende estar preparado para el futuro y utilizar tecnología probada y con buen soporte. La pila que hemos elegido debería reflejar esto.

• iluminado

• mpn

• Abrir componentes web

• Web moderna

• Moca

• chai

• ESLint

• mas bonita

• módulos ES

• Montones, montones de pruebas.

Razón fundamental

Sabemos por experiencia que crear componentes de interfaz de usuario accesibles y de alta calidad es difícil y requiere mucho tiempo: se necesitan muchas iteraciones, mucho tiempo de desarrollo y muchas pruebas para obtener un componente genérico que funcione en todos los contextos, admita muchos casos extremos y sea accesible en todos los lectores de pantalla relevantes.

Lion pretende hacer el trabajo pesado por ti. Esto significa que solo tiene que aplicar su propio sistema de diseño: entregando estilos, configurando componentes y agregando un conjunto mínimo de lógica personalizada encima.

Directrices de codificación

Consulte nuestras pautas de codificación para obtener información más detallada.

Como contribuir

Tenga en cuenta: este proyecto utiliza Npm Workspaces. Si desea ejecutar todas las demostraciones localmente, necesita obtener al menos npm 7+ e instalar todas las dependencias ejecutando npm install .

Los componentes web de Lion son tan buenos como sus contribuciones. Lea nuestra guía de contribución y siéntase libre de potenciar/mejorar Lion. Mantenemos cerradas las solicitudes de funciones mientras no estamos trabajando en ellas.

Contacto

No dudes en crear un problema de github para recibir comentarios o preguntas que puedas tener.