"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Cómo hacer un Spinner limpio y amigable en Go/Templ

Cómo hacer un Spinner limpio y amigable en Go/Templ

Publicado el 2024-11-07
Navegar:452

El HTML inútil

Ustedes podrían pensar que hacer un spinbox consistente, limpio y profesional sería una tarea simple en HTML... Sin embargo, para nuestra desesperación, no existe un atributo estándar que le indique a una entrada que solo debe aceptar valores enteros o decimales. , todo el filtrado de entrada debe ser JS. ¡Fuera!

Voy a implementar esta funcionalidad con Go, a-h/Templ, Tailwind y mi querido Alpine.js para hacer la vida más fácil.

Agregar el esqueleto

Comenzamos escribiendo una plantilla básica para nuestro cuadro de números enteros:

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  ...
}

Definimos IntInterval de la siguiente manera:

type IntInterval struct {
  A, B int
}

Con el intervalo, estableceremos el mínimo y el máximo de la entrada. Como estamos creando un cuadro de números enteros, el paso siempre se establecerá en '1'.

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

Agregar CSS

Ahora comencemos a agregar algunas clases, a continuación se muestran algunas propiedades especiales y pseudoelementos que controlan la representación de la entrada.
seleccionar ninguno [-moz-user-select: ninguno] [-ms-user-select: ninguno] [-o-user-select: ninguno] [-webkit-user-select: ninguno]

Las siguientes clases adicionales se utilizan para eliminar los botones giratorios predeterminados:
[&::-botón-giro-interno-webkit]:[-apariencia-webkit:ninguno] [&::-botón-giro-exterior-webkit]:[-apariencia-webkit:ninguno] [-apariencia-moz: campo de texto]

Finalmente, agreguemos algo de relleno básico, anillo, colores, etc...
bloque w-completamente redondeado-l-md py-2 px-2.5 texto-gris-900 anillo-1 anillo insertado anillo-gris-300 marcador de posición: texto-gris-400 enfoque: contorno-ninguno enfoque: anillo-2 enfoque: anillo-primario-400 bg-gris-50 sm:text-sm sm:leading-6

Al agregarlo a nuestra plantilla, obtenemos lo siguiente:

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

Ahora deberías obtener una entrada muy parecida a un texto, con alguna validación básica si pasas el mouse sobre ella. Agregaremos la funcionalidad para verificar entradas de números enteros válidas en la siguiente sección.

Implementando el filtro

La idea básica de un cuadro de números enteros es una entrada que solo acepta números enteros. Inicialmente intenté implementar esta función usando el atributo de patrón de HTML de la siguiente manera:

El atributo de patrón toma una cadena de expresiones regulares y la usa para validar la entrada del usuario; sin embargo, no evita que se ingresen entradas no válidas en primer lugar. En realidad, se creó para una simple validación del lado del cliente.

El evento 'oninput'

Cada vez que el usuario presiona cualquier tecla dentro del cuadro de entrada, se genera un evento de entrada. capture este evento con la sintaxis x-on:input de Alpine y rectifique el valor en consecuencia para el elemento de entrada. Creemos un div principal con un conjunto de atributos de datos x y agreguemos una función que nos permitirá verificar si la entrada es un Número... Después de lo cual podemos redondear el valor en consecuencia.

Para aquellos que no conocen Alpine, $el aquí se usa para referirse al elemento DOM actual.

Hilanderos personalizados

En el div principal creado anteriormente, agregamos el siguiente class="flex" y agregamos un atributo x-ref="spinbox" a la entrada para que nuestros botones puedan modificar su estado a través de la propiedad mágica $refs.spinbox:

Luego agregamos un nuevo elemento secundario después de la entrada, que contendrá nuestros botones:

Aquí usamos flex-col-reverse como una manera fácil de mantener el orden de tabulación correcto; primero debe ir a '-' y luego a ' '.

Luego agregamos los controladores de eventos a los botones usando x-on:click, el código completo (excluyendo CSS) es el siguiente:

Tenemos que convertir e.value y e.step antes de hacer cualquier aritmética, ya que son cadenas.

Cuando se trata de CSS para los botones giratorios, tienen un estilo muy similar al de la entrada, el código completo se encuentra a continuación.

Making a Clean, friendly Spinner in Go/Templ

La plantilla definitiva

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
  
@InputLabel(name, label " " interval.toString(), tooltip)
}

Disfrutar :)

Funciona en

  • Mozilla Firefox 130.0 (64 bits)
  • Versión 128.0.6613.120 (compilación oficial) (64 bits)
Declaración de liberación Este artículo se reproduce en: https://dev.to/said_metiche_4820567a55b0/making-an-intspinbox-in-gotempl-3o5l?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3