weightless
1.0.0
Este proyecto ha llegado al final de su desarrollo. Siéntase libre de navegar por el código.
Componentes web de alta calidad con una huella pequeña
¡Muchas gracias por mostrar interés en este proyecto! Si quieres ayudarnos a alimentar a nuestro octocat, definitivamente deberías convertirte en un Stargazer. Estos componentes web están creados para ser utilizados. Son livianos, tienen una API simple y son fáciles de extender y componer. Vaya aquí para ver una demostración https://weightless.dev/elements.
Vaya aquí para probar la demostración.
$ npm i weightless
Si desea comenzar de manera súper rápidamente, puede usar la CLI.
$ npm init web-config new my-project --lit
Si prefiere usar el paquete umd , puede importar https://unpkg.com/weightless/umd/weightless.min.js . Tenga en cuenta que esto importa todos los elementos, por lo que se recomienda que solo lo use para fines de prueba.
< script src =" https://unpkg.com/weightless/umd/weightless.min.js " > </ script > | Nombre | Etiqueta | Descripción | Documentación | Manifestación |
|---|---|---|---|---|
| Fondo | wl-backdrop | Capa oscura para usar detrás de elementos superpuestos. | Documentación | Manifestación |
| Bandera | wl-banner | Muestre un mensaje no interruptivo y acciones opcionales relacionadas. | Documentación | Manifestación |
| Botón | wl-button | Permita que los usuarios tomen medidas y tomen decisiones, con un solo toque. | Documentación | Manifestación |
| Tarjeta | wl-card | Contenido y acción relacionados con el grupo. | Documentación | Manifestación |
| Caja | wl-checkbox | Activar o desactivar una opción. | Documentación | Manifestación |
| Diálogo | wl-dialog | Mensajes altamente interruptivos. | Documentación | Manifestación |
| Divisor | wl-divider | Línea delgada que agrupa el contenido en listas y diseños. | Documentación | Manifestación |
| Expansión | wl-expansion | Proporcione una vista de detalles expandibles. | Documentación | Manifestación |
| Icono | wl-icon | Símbolos para acciones y elementos comunes. | Documentación | Manifestación |
| Etiqueta | wl-label | Haga que los elementos de formulario sean más accesibles. | Documentación | Manifestación |
| Artículo de la lista | wl-list-item | Muestre un elemento en una lista. | Documentación | Manifestación |
| Navegación | wl-nav | Proporcione acceso a destinos en su aplicación. | Documentación | Manifestación |
| Popover | wl-popover | Elementos contextuales anclados | Documentación | Manifestación |
| Tarjeta Popover | wl-popover-card | Dale a Popovers un toque contextual. | Documentación | Manifestación |
| Barra de progreso | wl-progress-bar | Llena una barra del 0% al 100%. | Documentación | Manifestación |
| Spinner de progreso | wl-progress-spinner | Llena un círculo de 0% a 100%. | Documentación | Manifestación |
| Radio | wl-radio | Seleccione una opción de un conjunto. | Documentación | Manifestación |
| Onda | wl-ripple | Indicar acciones táctiles. | Documentación | Manifestación |
| Seleccionar | wl-select | Seleccione uno o más valores de un conjunto de opciones. | Documentación | Manifestación |
| Control deslizante | wl-slider | Haga selecciones desde un rango de valores. | Documentación | Manifestación |
| Bocadillo | wl-snackbar | Proporcione mensajes breves en la parte inferior de la pantalla. | Documentación | Manifestación |
| Cambiar | wl-switch | Activar o desactivar una opción. | Documentación | Manifestación |
| Pestaña | wl-tab | Organizar la navegación entre grupos de contenido. | Documentación | Manifestación |
| Grupo de pestañas | wl-tab-group | Organizar la navegación entre grupos de contenido. | Documentación | Manifestación |
| Texto | wl-text | Texto grupal en párrafos. | Documentación | Manifestación |
| Textea | wl-textarea | Campos de texto multilínea. | Documentación | Manifestación |
| Campo de texto | wl-textfield | Campos de texto singlineos. | Documentación | Manifestación |
| Título | wl-title | Indique el comienzo de una nueva sección. | Documentación | Manifestación |
| Comedia de herramientas | wl-tooltip | Texto relacionado con el contexto informativo. | Documentación | Manifestación |
Hay muchas cosas emocionantes en la hoja de ruta. Hasta V1.0.0, puede esperar que la API sea bastante estable, pero la refactorización aún podría ocurrir y romper la compatibilidad hacia atrás. Puede usar la biblioteca, crear solicitudes de extracción o agregar problemas.
¡Eres más que bienvenido para contribuir a este repositorio! A continuación se presentan algunas instrucciones sobre cómo configurar el proyecto para el desarrollo.
git clone https://github.com/andreasbm/weightless.git .npm i para instalar todas las dependencias.npm run s . El navegador debe abrirse automáticamente a la URL correcta. Si no, puede abrir su navegador y ir a http://localhost:1350 .npm run test .npm run lint .npm run docs .Los elementos están escritos en TypeScript y las hojas de estilo están escritas en SASS. Todos los componentes web usan elementos lit.
Si desea saber más sobre cómo puede ayudar, definitivamente debe consultar el archivo Caboning.md. Todos los contribuyentes se agregarán a la sección de contribuyentes a continuación.
| Andreas Mehlsen | ¿Tú? |
Licenciado bajo MIT.
