”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 在 Go/Templ 中制作一个干净、友好的 Spinner

在 Go/Templ 中制作一个干净、友好的 Spinner

发布于2024-11-07
浏览:902

无用的 HTML

你们可能认为在 HTML 中制作一个一致、干净且专业的旋转框是一项简单的任务...但是,令我们失望的是,没有标准的属性来告诉输入它应该只接受整数或小数值,所有的输入过滤都必须是JS。哎呀!

我将使用 Go、a-h/Templ、Tailwind 和我心爱的 Alpine.js 来实现此功能,让生活变得轻松。

添加骨架

我们首先为整数旋转框编写一个基本模板:

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

我们定义IntInterval如下:

type IntInterval struct {
  A, B int
}

通过间隔,我们将设置输入的最小值和最大值。当我们制作整数旋转框时,步长将始终设置为“1”。

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

添加 CSS

现在让我们开始添加一些 tw 类,以下是一些控制输入渲染的特殊属性和伪元素。
选择无 [-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:文本字段]

最后,让我们添加一些基本的填充、环、颜色等...
块w-full rounded-l-md py-2 px-2.5 text-gray-900ring-1ring-insetring-gray-300占位符:text-gray-400焦点:outline-none焦点:ring-2焦点: ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6

将其添加到我们的模板中,我们得到以下内容:

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

现在您应该得到一个非常类似于文本的输入,如果您将鼠标悬停在其上,则会进行一些基本验证。我们将在下一节中添加检查有效整数输入的功能。

实施过滤器

整数旋转框的基本思想是接受整数的输入。我最初尝试使用HTML的pattern属性来实现这个功能,如下:


pattern 属性采用正则表达式字符串并使用它来验证用户输入,但是,它并不能阻止首先输入无效输入。实际上,它是为了一些简单的客户端验证而设计的。

'oninput' 事件

每次用户按下输入框中的任意键,都会生成一个 oninput 事件。使用 Alpine 的语法 x-on:input 捕获此事件,并相应地纠正输入元素的值。让我们创建一个带有 x-data 属性集的父 div,并添加一个函数,该函数将允许我们检查输入是否完全是数字...之后我们可以相应地舍入该值。

对于那些不了解Alpine的人,这里的$el用于引用当前的DOM元素。

定制旋转器

在之前创建的父 div 中,我们添加以下 class="flex" 并向输入添加 x-ref="spinbox" 属性,以便我们的按钮可以通过神奇属性 $refs.spinbox 修改其状态:

然后我们在输入后添加一个新的子项,其中将包含我们的按钮:

在这里,我们使用 flex-col-reverse 作为保持 Tab 键顺序正确的简单方法,它应该首先 Tab 键到“-”,然后是“ ”。

然后我们使用 x-on:click 将事件处理程序添加到按钮中,完整代码(不包括 CSS)如下:

在进行任何算术之前,我们必须转换 e.value 和 e.step,因为它们是字符串。

当涉及到旋转按钮的 CSS 时,它们的样式与输入非常相似,完整的代码如下。

Making a Clean, friendly Spinner in Go/Templ

最终模板

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

享受 :)

适用于

  • Mozilla Firefox 130.0(64 位)
  • 版本 128.0.6613.120(官方版本)(64 位)
版本声明 本文转载于:https://dev.to/said_metiche_4820567a55b0/making-an-intspinbox-in-gotempl-3o5l?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • HTML格式标签
    HTML格式标签
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    编程 发布于2025-07-02
  • 大批
    大批
    [2 数组是对象,因此它们在JS中也具有方法。 切片(开始):在新数组中提取部分数组,而无需突变原始数组。 令ARR = ['a','b','c','d','e']; // USECASE:提取直到索引作...
    编程 发布于2025-07-02
  • `console.log`显示修改后对象值异常的原因
    `console.log`显示修改后对象值异常的原因
    foo = [{id:1},{id:2},{id:3},{id:4},{id:id:5},],]; console.log('foo1',foo,foo.length); foo.splice(2,1); console.log('foo2', foo, foo....
    编程 发布于2025-07-02
  • PHP与C++函数重载处理的区别
    PHP与C++函数重载处理的区别
    作为经验丰富的C开发人员脱离谜题,您可能会遇到功能超载的概念。这个概念虽然在C中普遍,但在PHP中构成了独特的挑战。让我们深入研究PHP功能过载的复杂性,并探索其提供的可能性。在PHP中理解php的方法在PHP中,函数超载的概念(如C等语言)不存在。函数签名仅由其名称定义,而与他们的参数列表无关。...
    编程 发布于2025-07-02
  • 解决Spring Security 4.1及以上版本CORS问题指南
    解决Spring Security 4.1及以上版本CORS问题指南
    弹簧安全性cors filter:故障排除常见问题 在将Spring Security集成到现有项目中时,您可能会遇到与CORS相关的错误,如果像“访问Control-allo-allow-Origin”之类的标头,则无法设置在响应中。为了解决此问题,您可以实现自定义过滤器,例如代码段中的MyFi...
    编程 发布于2025-07-02
  • Python中嵌套函数与闭包的区别是什么
    Python中嵌套函数与闭包的区别是什么
    嵌套函数与python 在python中的嵌套函数不被考虑闭合,因为它们不符合以下要求:不访问局部范围scliables to incling scliables在封装范围外执行范围的局部范围。 make_printer(msg): DEF打印机(): 打印(味精) ...
    编程 发布于2025-07-02
  • PHP阵列键值异常:了解07和08的好奇情况
    PHP阵列键值异常:了解07和08的好奇情况
    PHP数组键值问题,使用07&08 在给定数月的数组中,键值07和08呈现令人困惑的行为时,就会出现一个不寻常的问题。运行print_r($月)返回意外结果:键“ 07”丢失,而键“ 08”分配给了9月的值。此问题源于PHP对领先零的解释。当一个数字带有0(例如07或08)的前缀时,PHP将其...
    编程 发布于2025-07-02
  • 如何使用Depimal.parse()中的指数表示法中的数字?
    如何使用Depimal.parse()中的指数表示法中的数字?
    在尝试使用Decimal.parse(“ 1.2345e-02”中的指数符号表示法表示的字符串时,您可能会遇到错误。这是因为默认解析方法无法识别指数符号。 成功解析这样的字符串,您需要明确指定它代表浮点数。您可以使用numbersTyles.Float样式进行此操作,如下所示:[&& && && ...
    编程 发布于2025-07-02
  • 在Pandas中如何将年份和季度列合并为一个周期列?
    在Pandas中如何将年份和季度列合并为一个周期列?
    pandas data frame thing commans date lay neal and pree pree'和pree pree pree”,季度 2000 q2 这个目标是通过组合“年度”和“季度”列来创建一个新列,以获取以下结果: [python中的concate...
    编程 发布于2025-07-02
  • 为什么HTML无法打印页码及解决方案
    为什么HTML无法打印页码及解决方案
    无法在html页面上打印页码? @page规则在@Media内部和外部都无济于事。 HTML:Customization:@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: bo...
    编程 发布于2025-07-02
  • C++成员函数指针正确传递方法
    C++成员函数指针正确传递方法
    如何将成员函数置于c 的函数时,接受成员函数指针的函数时,必须同时提供对象的指针,并提供指针和指针到函数。需要具有一定签名的功能指针。要通过成员函数,您需要同时提供对象指针(此)和成员函数指针。这可以通过修改Menubutton :: SetButton()(如下所示:[&& && && &&华)...
    编程 发布于2025-07-02
  • 我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    将我的加密库从mcrypt升级到openssl 问题:是否可以将我的加密库从McRypt升级到OpenSSL?如果是这样,如何?答案:是的,可以将您的Encryption库从McRypt升级到OpenSSL。可以使用openssl。附加说明: [openssl_decrypt()函数要求iv参...
    编程 发布于2025-07-02
  • 如何使用替换指令在GO MOD中解析模块路径差异?
    如何使用替换指令在GO MOD中解析模块路径差异?
    在使用GO MOD时,在GO MOD 中克服模块路径差异时,可能会遇到冲突,其中3个Party Package将另一个PAXPANCE带有导入式套件之间的另一个软件包,并在导入式套件之间导入另一个软件包。如回声消息所证明的那样: go.etcd.io/bbolt [&&&&&&&&&&&&&&&&...
    编程 发布于2025-07-02
  • 如何使用Python的请求和假用户代理绕过网站块?
    如何使用Python的请求和假用户代理绕过网站块?
    如何使用Python的请求模拟浏览器行为,以及伪造的用户代理提供了一个用户 - 代理标头一个有效方法是提供有效的用户式header,以提供有效的用户 - 设置,该标题可以通过browser和Acterner Systems the equestersystermery和操作系统。通过模仿像Chro...
    编程 发布于2025-07-02
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源利用本地化将时区分配给日期,使用了适当的时区名称和偏移量。但是,直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone(...
    编程 发布于2025-07-02

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3