Svelte es un marco front-end emergente con pocas bibliotecas de componentes. Hoy presentaré una biblioteca de componentes móviles Svelte.
Acerca del FANFC
STDF es una biblioteca de componentes de interfaz de usuario móvil , que se utiliza principalmente para desarrollar aplicaciones web móviles. A diferencia de muchas bibliotecas de componentes de Vue que introduje antes , STDF se desarrolla en base al marco js reciente Svelte . Svelte es un marco de JavaScript similar a Vue/React. Es decir, este conjunto de bibliotecas de componentes está especialmente diseñado para Svelte. .
La sintaxis concisa de Svelte es principalmente para permitir que el código JS nativo tenga capacidades de respuesta, y la aplicación web empaquetada es muy pequeña, lo que es especialmente adecuado para desarrollar aplicaciones móviles. Tailwind es un elegante marco CSS. Los amigos interesados pueden ir a Aprender sobre el aprendizaje. La biblioteca de componentes STDF está construida sobre la base de Svelte y Tailwind, que aprovecha sus ventajas y es de alta calidad. Este artículo se la presentará.
¿Por qué se llama STDF?
STDF es una biblioteca de componentes desarrollada por los chinos. Aunque el nombre es simple, el autor también da algunos significados interesantes:
Explicación general: S significa Simple (simple), T significa Delgado (ligero), D significa Diseño (diseño), F significa Rápido (rápido), STDF significa una biblioteca de componentes que es fácil de usar, liviana, de diseño -amigable y rápido de desarrollar.
Explicación poco convencional: S y T representan Svelte y Tailwind, respectivamente, porque STDF se basa en Svelte y Tailwind. DF puede considerarse como el poeta Du Fu, no tan romántico y elegante como Li Bai. Él presta atención a la practicidad y la facilidad de uso, que también es el concepto de diseño de STDF. Espero que todos los desarrolladores que usen STDF puedan escribir código poético.
— Aclaración del autor sobre los nombres del STDF
características técnicas
- Simple: la codificación es concisa y rápida utilizando la sintaxis Svelte. La lógica del código fuente del componente es clara, fácil de entender y detallada en chino e inglés. También es fácil ver el código fuente y modificar la lógica.
- Ligero: el código fuente es de tamaño pequeño y no tiene dependencias de terceros. El código compilado basado en Svelte y Tailwind también tiene ventajas obvias en tamaño, lo que es especialmente importante en el lado móvil.
- Diseño elegante: diseño e interacción optimizados para dispositivos móviles, fácil de usar, eficiente y flexible. Admite sistema de color personalizado, estilo de esquina redondeada, modo claro y oscuro, etc. a través de una configuración simple
- Rápido: sin tiempo de ejecución, sin DOM virtual, sin código CSS engorroso, administración de estado simple y liviana. El proceso de codificación, el procesamiento de compilación y la operación en línea son más rápidos
lista de componentes
-
Botón Botón
-
Ventana flotante inferior BottomSheet
-
IconoIcono
-
Máscara Máscara
-
capa emergente emergente
-
Divisor
-
Cuadrículas Cuadrículas
-
Marcador de posición
-
Pantalla de esqueleto
-
Barra de índice IndexBar
-
Barra de navegaciónNavBar
-
Paginación
-
Pasos
-
Barra de pestañas Barra de pestañas
-
Pestañas Pestañas
-
Hoja de acciones del panel de acciones
-
Selector asíncrono AsyncPicker
-
CalendarioCalendario
-
casilla de verificación
-
Cuadro de entrada Entrada
-
Selector Selector
-
Radio
-
CalificaciónRate
-
Control deslizante Control deslizante
-
interruptorinterruptor
-
Selector de tiempo TimePicker
-
avatar avatar
-
Insignia del logotipo
-
Celda Celda
-
Barra de avisos Barra de avisos
-
Barra de progreso Progreso
-
Bucle de progreso Bucle de progreso
-
Limpiador de carrusel
-
Diálogo Diálogo
-
Cargando
-
Modal
-
Tostada ligera
Asesoramiento y experiencia práctica en desarrollo
Svelte es un marco front-end nuevo en los últimos años, pero la ecología actual no es particularmente rica STDF es una de las bibliotecas de componentes de interfaz de usuario de muy alta calidad, que son muy elegantes en términos de apariencia, código y uso de componentes.
También he recomendado muchas bibliotecas de componentes Vue en el lado de la PC antes, pero el lado móvil es relativamente pequeño. El autor de STDF también explicó la razón. Esto se debe a que el lado móvil generalmente está orientado a usuarios del lado C y tiene altos requisitos para rendimiento del producto, facilidad de uso y facilidad de uso. Por lo tanto, se necesita mucha energía para hacer un buen trabajo en productos móviles.
En resumen, si busca el máximo rendimiento, puede elegir Svelte. Si necesita un marco general y ecológicamente completo, Vue sigue siendo una buena opción.
Esta biblioteca de componentes de STDF condensa mucha experiencia del autor, lo que nos permite usarla directamente, ahorrando mucho tiempo de desarrollo y permitiéndonos enfocarnos en el negocio. Más pequeña y más rápida, la biblioteca de componentes STDF es particularmente adecuada para desarrollar algunos escenarios comerciales relativamente simples en el lado móvil, especialmente si cree que usar Vue o React es problemático y voluminoso, y escribir JS nativo lleva mucho tiempo. utilizando este conjunto de bibliotecas de componentes Svelte.
En el caso de proyectos Svelte y Tailwind ya configurados, podemos instalarlos directamente:
Luego úsalo en Svelet:
Para un uso más detallado, puede consultar la documentación en el sitio web oficial de STDF. La documentación y los ejemplos de código están escritos en detalle y son fáciles de entender.
Instrucciones gratuitas de código abierto
STDF es una biblioteca de componentes de interfaz de usuario web móvil desarrollada en base a Svelte y Tailwind CSS. El código fuente está alojado en Github según el acuerdo de código abierto del MIT . Svelte y Tailwind CSS también son proyectos de código abierto del MIT, por lo que podemos usarlos para proyectos comerciales. para libre, o desarrollo secundario.
Finalmente, me gustaría enfatizar que he compartido muchas bibliotecas de componentes Vue antes, pero esta es una biblioteca de componentes Svelte que no se puede usar en Vue.js.
Enlace original: https://www.thosefree.com/svelte-stdf