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

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

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

无用的 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]删除
最新教程 更多>
  • Java字符串非空且非null的有效检查方法
    Java字符串非空且非null的有效检查方法
    检查字符串是否不是null而不是空的 if(str!= null && str.isementy())二手: if(str!= null && str.length()== 0) option 3:trim()。isement(Isement() trim whitespace whitesp...
    编程 发布于2025-07-01
  • 如何将来自三个MySQL表的数据组合到新表中?
    如何将来自三个MySQL表的数据组合到新表中?
    mysql:从三个表和列的新表创建新表 答案:为了实现这一目标,您可以利用一个3-way Join。 选择p。*,d.content作为年龄 来自人为p的人 加入d.person_id = p.id上的d的详细信息 加入T.Id = d.detail_id的分类法 其中t.taxonomy =...
    编程 发布于2025-07-01
  • 如何高效地在一个事务中插入数据到多个MySQL表?
    如何高效地在一个事务中插入数据到多个MySQL表?
    mySQL插入到多个表中,该数据可能会产生意外的结果。虽然似乎有多个查询可以解决问题,但将从用户表的自动信息ID与配置文件表的手动用户ID相关联提出了挑战。使用Transactions和last_insert_id() 插入用户(用户名,密码)值('test','test...
    编程 发布于2025-07-01
  • 反射动态实现Go接口用于RPC方法探索
    反射动态实现Go接口用于RPC方法探索
    在GO 使用反射来实现定义RPC式方法的界面。例如,考虑一个接口,例如:键入myService接口{ 登录(用户名,密码字符串)(sessionId int,错误错误) helloworld(sessionid int)(hi String,错误错误) } 替代方案而不是依靠反射...
    编程 发布于2025-07-01
  • 如何有效地转换PHP中的时区?
    如何有效地转换PHP中的时区?
    在PHP 利用dateTime对象和functions DateTime对象及其相应的功能别名为时区转换提供方便的方法。例如: //定义用户的时区 date_default_timezone_set('欧洲/伦敦'); //创建DateTime对象 $ dateTime = ne...
    编程 发布于2025-07-01
  • 如何限制动态大小的父元素中元素的滚动范围?
    如何限制动态大小的父元素中元素的滚动范围?
    在交互式接口中实现垂直滚动元素的CSS高度限制问题:考虑一个布局,其中我们具有与用户垂直滚动一起移动的可滚动地图div,同时与固定的固定sidebar保持一致。但是,地图的滚动无限期扩展,超过了视口的高度,阻止用户访问页面页脚。 映射{} 因此。我们不使用jQuery的“ .aimimate(...
    编程 发布于2025-07-01
  • 为什么我会收到MySQL错误#1089:错误的前缀密钥?
    为什么我会收到MySQL错误#1089:错误的前缀密钥?
    mySQL错误#1089:错误的前缀键错误descript [#1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度,以便更快地搜索这些前缀。理解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-07-01
  • 如何简化PHP中的JSON解析以获取多维阵列?
    如何简化PHP中的JSON解析以获取多维阵列?
    php 试图在PHP中解析JSON数据的JSON可能具有挑战性,尤其是在处理多维数组时。 To simplify the process, it's recommended to parse the JSON as an array rather than an object.To do...
    编程 发布于2025-07-01
  • Python读取CSV文件UnicodeDecodeError终极解决方法
    Python读取CSV文件UnicodeDecodeError终极解决方法
    在试图使用已内置的CSV模块读取Python中时,CSV文件中的Unicode Decode Decode Decode Decode decode Error读取,您可能会遇到错误的错误:无法解码字节 在位置2-3中:截断\ uxxxxxxxx逃脱当CSV文件包含特殊字符或Unicode的路径逃...
    编程 发布于2025-07-01
  • 如何使用“ JSON”软件包解析JSON阵列?
    如何使用“ JSON”软件包解析JSON阵列?
    parsing JSON与JSON软件包 QUALDALS:考虑以下go代码:字符串 } func main(){ datajson:=`[“ 1”,“ 2”,“ 3”]`` arr:= jsontype {} 摘要:= = json.unmarshal([] byte(...
    编程 发布于2025-07-01
  • 如何在GO编译器中自定义编译优化?
    如何在GO编译器中自定义编译优化?
    在GO编译器中自定义编译优化 GO中的默认编译过程遵循特定的优化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    编程 发布于2025-07-01
  • FastAPI自定义404页面创建指南
    FastAPI自定义404页面创建指南
    response = await call_next(request) if response.status_code == 404: return RedirectResponse("https://fastapi.tiangolo.com") else: ...
    编程 发布于2025-07-01
  • Python高效去除文本中HTML标签方法
    Python高效去除文本中HTML标签方法
    在Python中剥离HTML标签,以获取原始的文本表示 仅通过Python的MlStripper 来简化剥离过程,Python Standard库提供了一个专门的功能,MLSTREPERE,MLSTREPERIPLE,MLSTREPERE,MLSTREPERIPE,MLSTREPERCE,MLST...
    编程 发布于2025-07-01
  • 如何在Java的全屏独家模式下处理用户输入?
    如何在Java的全屏独家模式下处理用户输入?
    Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...
    编程 发布于2025-07-01
  • 如何干净地删除匿名JavaScript事件处理程序?
    如何干净地删除匿名JavaScript事件处理程序?
    删除匿名事件侦听器将匿名事件侦听器添加到元素中会提供灵活性和简单性,但是当需要删除它们时,可以构成挑战,而无需替换元素本身就可以替换一个问题。 element? element.addeventlistener(event,function(){/在这里工作/},false); 要解决此问题,请考...
    编程 发布于2025-07-01

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

Copyright© 2022 湘ICP备2022001581号-3