Membuat Spinner yang Bersih dan mesra di Go/Templ

HTML yang tidak membantu

Anda mungkin berfikir bahawa membuat kotak spin yang konsisten, bersih dan profesional akan menjadi satu tugas yang mudah dalam HTML... Namun, kami berputus asa, tidak ada atribut standard untuk memberitahu input bahawa ia hanya perlu menerima nilai integer atau perpuluhan , semua penapisan input mestilah JS. Aduh!

Saya akan melaksanakan fungsi ini dengan Go, a-h/Templ, Tailwind dan Alpine.js kesayangan saya untuk memudahkan hidup.

Menambah Rangka

Kami mulakan dengan menulis templat asas untuk kotak spin integer kami:

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

Kami mentakrifkan Interval seperti berikut:

type IntInterval struct {
  A, B int
}

Dengan selang waktu, kami akan menetapkan min dan maks input. Semasa kami membuat kotak spin integer, langkah itu akan sentiasa ditetapkan kepada '1'.

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  <input type="number" placeholder="Enter Int…" step="1" if interval nil min="{" strconv.itoa max="{" ...>
}

Menambah CSS

Sekarang mari kita mula menambah beberapa kelas dua, berikut adalah beberapa sifat khas dan elemen pseudo yang mengawal pemaparan input.
pilih-tiada [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]

Kelas tambahan berikut digunakan untuk mengalih keluar butang pemutar lalai:
[&::-butang-putaran-dalam-webkit]:[-penampilan-webkit:tiada] [&::-butang-putaran-luar-webkit]:[-penampilan-webkit:tiada] [-penampilan-moz: medan teks]

Akhir sekali, mari tambahkan beberapa padding asas, cincin, warna, dll...
blok w-bulat penuh-l-md py-2 px-2.5 text-grey-900 ring-1 ring-inset ring-grey-300 placeholder:text-grey-400 focus:outline-none focus:ring-2 focus: ring-primary-400 bg-grey-50 sm:text-sm sm:leading-6

Menambahkannya pada templat kami, kami mendapat yang berikut:

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  <input type="number" placeholder="Enter Int…" step="1" if interval nil min="{" strconv.itoa max="{" class="block w-full rounded-l-md py-2 px-2.5 text-gray-900 ring-1
 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none
 focus:ring-2 focus:ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6
 select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none]
 [-webkit-user-select:none] [&::-webkit-inner-spin-button]:[-webkit-appearance:none] 
[&::-webkit-outer-spin-button]:[-webkit-appearance:none] [-moz-appearance:textfield]">
}

Kini anda sepatutnya mendapat input seperti teks, dengan beberapa pengesahan asas jika anda mengarahkan tetikus anda ke atasnya. Kami akan menambah fungsi untuk menyemak input integer yang sah dalam bahagian seterusnya.

Melaksanakan Penapis

Idea asas kotak spin integer ialah input yang hanya menerima integer. Saya pada mulanya cuba melaksanakan fungsi ini dengan menggunakan atribut corak HTML seperti berikut:

<input type="number" pattern="[0-9]+" ...>

Atribut corak mengambil rentetan regex dan menggunakannya untuk mengesahkan input pengguna, walau bagaimanapun, ia tidak menghalang input yang tidak sah daripada dimasukkan di tempat pertama. Sebenarnya, ia dibuat untuk pengesahan pihak pelanggan yang mudah.

Acara 'oninput'

Setiap kali pengguna menekan sebarang kekunci di dalam kotak input, peristiwa oninput dijana. tangkap peristiwa ini dengan sintaks Alpine x-on:input dan betulkan nilai sewajarnya untuk elemen input. Mari kita buat div induk dengan set atribut data-x dan tambahkan fungsi yang membolehkan kita menyemak sama ada input sama sekali Nombor... Selepas itu kita boleh membundarkan nilai dengan sewajarnya.

<div x-data="{isNumber(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) }}">
  <input ... x-on:input="$el.value = isNumber($el.value) ? Math.round($el.value) : null">
</div>

Bagi mereka yang tidak mengenali Alpine, $el di sini digunakan untuk merujuk kepada elemen DOM semasa.

Pemintal Tersuai

Dalam div induk yang dibuat sebelum ini, kami menambah kelas="flex" berikut dan menambah atribut x-ref="spinbox" pada input supaya butang kami boleh mengubah suai keadaannya melalui sifat ajaib $refs.spinbox:

<div ... class="flex">
  <input ... x-ref="spinbox">
</div>

Kami kemudian menambah anak baharu selepas input, yang akan mengandungi butang kami:

<div ...>
  <input ... x-ref="spinbox">
  <div class="flex flex-col-reverse">
    <!-- Decrement input's value -->
    <button type="button" class="flex-1 ...">-</button>
    <!-- Increment input's value -->
    <button type="button" class="flex-1 ...">+</button>
  </div>
</div>

Di sini, kami menggunakan flex-col-reverse sebagai cara mudah untuk memastikan susunan tab betul, ia mesti tab dahulu ke '-', kemudian '+'.

Kami kemudian menambah pengendali acara pada butang menggunakan x-on:click, kod penuh (tidak termasuk CSS) adalah seperti berikut:

<div ... x-data="{
        inc() { var e = $refs.spinbox; e.value = Math.min(Number(e.value) + Number(e.step), e.max); },
        dec() { var e = $refs.spinbox; e.value = Math.max(Number(e.value) - Number(e.step), e.min); },
        isNumber(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) }
      }">
  <input ... x-ref="spinbox" x-on:input="$el.value = isNumber($el.value) ? Math.round($el.value) : null">
  <div ...>
    <!-- Decrement input's value -->
    <button type="button" ... x-on:click="dec">-</button>
    <!-- Increment input's value -->
    <button type="button" ... x-on:click="inc">+</button>
  </div>
</div>

Kita perlu menukar e.value dan e.step sebelum melakukan sebarang aritmetik kerana itu adalah rentetan.

Mengenai CSS untuk butang pemutar, ia digayakan sangat serupa dengan input, kod penuh ada di bawah .

Templat terakhir

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  <!-- Disable inner & outer spinner buttons, use buttons to render increment and decrement input value... -->
  <div class="flex-1">
    @InputLabel(name, label + " " + interval.toString(), tooltip)

    <input type="number" placeholder="Enter Int…" step="1" if interval nil min="{" strconv.itoa max="{" name="{" value="{" class="block w-full rounded-l-md py-2 px-2.5 text-gray-900 ring-1
 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none
 focus:ring-2 focus:ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6
 select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none]
 [-webkit-user-select:none] [&::-webkit-inner-spin-button]:[-webkit-appearance:none] 
[&::-webkit-outer-spin-button]:[-webkit-appearance:none] [-moz-appearance:textfield]" x-on:input="$el.value = !isNumber($el.value) ? null : Math.round($el.value)" x-ref="spinbox" autocomplete="off">

        <div class="flex flex-col-reverse font-medium">
          <!-- Decrement input's value -->
          <button type="button" class="flex-1 px-1 leading-none
 transition-colors ease-linear duration-100 rounded-br-md text-center
 text-sm bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-900
 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-inset
 focus:ring-2 focus:ring-primary-400 select-none [-moz-user-select:none]
 [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]" x-on:click="dec">-</button>
          <!-- Increment input's value -->
          <button type="button" class="flex-1 px-1 leading-none
 transition-colors ease-linear duration-100 rounded-tr-md text-center
 text-sm bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-900
 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-inset
 focus:ring-2 focus:ring-primary-400 select-none [-moz-user-select:none]
 [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]" x-on:click="inc">+</button>
        </div>
    </div>
  
}

Nikmati :)

berfungsi pada

• Mozilla Firefox 130.0 (64-bit)
• Versi 128.0.6613.120 (Binaan Rasmi) (64-bit)

Atas ialah kandungan terperinci Membuat Spinner yang Bersih dan mesra di Go/Templ. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!