UI庫/組件【免費(fèi)下載鏈接】bhBootstrap Helpers for Ruby項(xiàng)目地址https://gitcode.com/gh_mirrors/bh/bh點(diǎn)擊查看免費(fèi)下載bhBootstrap Helpers是面向 Rails 的 Bootstrap 6 表單助手 gem它替你寫好全部 HTML視圖里只剩一行 Ruby。本文帶你一次看懂它的三個(gè)特色字段phone_field的實(shí)時(shí)格式化以及price_field、percentage_field這類把單位寫進(jìn)邊框的輸入組 一分鐘接入 bh 表單助手先說結(jié)論裝好 gem、在布局里掛上樣式表和腳本、給控制器指定構(gòu)建器三個(gè)字段立刻可用。# 控制器里指定默認(rèn)表單構(gòu)建器 class ApplicationController ActionController::Base default_form_builder Bh::FormBuilder end布局中通過Bh::Engine::PREFIX引入/bh/css/bh.css和/bh/js/bh.js即可樣式與腳本都由引擎自己分發(fā)詳見 lib/engine.rb。phone_field 電話字段邊輸入邊格式化phone_field處理北美電話NANP用戶敲入5555555555頁面里立刻變成555-555-5555。% form.phone_field :phone, class: text-center %它的工作原理是「服務(wù)器只交數(shù)字形狀交給瀏覽器」服務(wù)器渲染出的輸入框只帶 10 位裸數(shù)字和data-controllerphone所有格式規(guī)則集中在 app/javascript/bh/phone_controller.js 這一個(gè) Stimulus 控制器里想換成(555) 555-5555只需改 JS不碰 Ruby。控制器寫死了合法形狀pattern[2-9]\d{2}-[2-9]\d{2}-\d{4}區(qū)號(hào)和交換碼不能以 0/1 開頭見 phone_controller.js#L10-L11并順手補(bǔ)上inputmodenumeric移動(dòng)端直接彈出數(shù)字鍵盤。只進(jìn)數(shù)字keydown會(huì)直接拒絕非數(shù)字鍵滿 10 位后第 11 位按鍵被當(dāng)場攔下保證旁觀的校驗(yàn)器永遠(yuǎn)先看到合法形態(tài)。粘貼、自動(dòng)填充也重排整串進(jìn)入的值會(huì)被重新整形并再發(fā)一次input事件。帶 1 的國家碼也能收11 位且以 1 開頭時(shí)自動(dòng)剝掉前導(dǎo) 1只留 10 位號(hào)碼。校驗(yàn)失敗重繪頁面后照樣帶分隔符connect時(shí)會(huì)對已有值再格式化一遍表單不會(huì)因?yàn)榉?wù)端退回裸數(shù)字而露餡。placeholder 里的555-555-5555取自語言文件 config/locales/bh.en.yml#L12——號(hào)碼怎么寫是讀者語言的事不硬編碼進(jìn) gem。字段默認(rèn)攜帶autocompletetel與aria-label視圖顯式傳入的class、autocomplete、data都會(huì)原樣保留見 lib/bh/form_builder.rb#L62-L66。price_field 金額輸入組貨幣符號(hào)寫進(jìn)邊框price_field渲染的是 Bootstrap 的 adorned附飾控件貨幣符號(hào)是一個(gè)span和數(shù)字輸入框共處同一個(gè)邊框內(nèi)——邊框和內(nèi)邊距屬于外層包裹內(nèi)部輸入框戴form-ghost類自己不描邊不占位。% form.price_field :fee % # 渲染出div classform-control form-adorn d-flex # span classform-adorn-text$/span # input classform-ghost typenumber min0 step0.01 ... # /div默認(rèn)規(guī)則很克制min: 0、step: 0.01美分級(jí)調(diào)用方知道列的精度時(shí)可以傳step:覆蓋。貨幣符號(hào)讀 I18n 的number.currency.format.unit缺省$把語言文件的 unit 設(shè)成￥字段就跟著變 ￥邏輯見 lib/bh/form_builder/adornments.rb#L16-L35。percentage_field 百分比輸入組百分號(hào)跟隨數(shù)字percentage_field與金額字段共用同一套附飾結(jié)構(gòu)只有一處不同%是后綴而不是前綴。外層多一個(gè)form-adorn-end類CSS 里讓數(shù)字輸入框排在符號(hào)前面所以視覺上永遠(yuǎn)是「數(shù)字 %」符合人讀百分?jǐn)?shù)的習(xí)慣。% form.percentage_field :rate % # 渲染出div classform-control form-adorn d-flex form-adorn-end # span classform-adorn-text%/span # input classform-ghost typenumber ... # /div它沒有預(yù)設(shè)min/step默認(rèn)就是普通數(shù)字輸入框調(diào)用方按需補(bǔ)充。完整渲染斷言可以參考 test/test_bh_forms.rb#L32-L39。字段單位位置默認(rèn)約束典型場景phone_field無單位10 位、NANP 形狀、數(shù)字鍵盤聯(lián)系電話price_field前綴$/I18n 單位min0、step0.01金額、費(fèi)率percentage_field后綴%無預(yù)設(shè)折扣、占比、稅率三個(gè)字段一頁跑起來本地演示步驟gem 自帶一個(gè)「每個(gè)組件只畫一次」的演示應(yīng)用三個(gè)字段全部在同一個(gè)表單里fee、rate、phone見 test/dummy/app/views/pages/show.html.erb#L22-L29?？寺}庫后即可啟動(dòng)git clone https://gitcode.com/gh_mirrors/bh/bh cd bh bin/setup rails s打開localhost:3000就能看到全部組件同屏渲染?flash1還能追加 toast 提示。小結(jié)什么時(shí)候用哪個(gè)字段收電話號(hào)碼 →phone_field格式化、鍵盤、校驗(yàn)提示一站配齊改形狀只動(dòng) JS收金額 →price_field貨幣符號(hào)來自 I18n換語言文件就換幣種收百分比 →percentage_field%恒在數(shù)字之后。三者都由 lib/bh/form_builder.rb 統(tǒng)一「著裝」視圖只聲明字段種類外觀、無障礙標(biāo)簽、瀏覽器提示全部由構(gòu)建器負(fù)責(zé)這正是 bh「一行 Ruby零 markup」的核心理念 ?贊分享UI庫/組件【免費(fèi)下載鏈接】bhBootstrap Helpers for Ruby項(xiàng)目地址https://gitcode.com/gh_mirrors/bh/bh點(diǎn)擊查看免費(fèi)下載相關(guān)推薦AlphaFold 3輸入文件詳解JSON格式與字段說明AlphaFold 3輸入文件詳解JSON格式與字段說明 在使用AlphaFold 3進(jìn)行蛋白質(zhì)結(jié)構(gòu)預(yù)測時(shí)輸入文件的正確配置是獲得準(zhǔn)確結(jié)果的關(guān)鍵步驟。本文將人工智能深度學(xué)習(xí)生物信息學(xué)科研MCreator 村民交易指南第二個(gè)可選價(jià)格Price 2字段詳解與源碼解析MCreator 村民交易指南第二個(gè)可選價(jià)格Price 2字段詳解與源碼解析 導(dǎo)讀 在 MCreator 中制作自定義村民交易Villager Trad低代碼代碼生成桌面應(yīng)用游戲開發(fā)Deep-Live-Cam 換臉模型配置完整指南inswapper 與 GFPGAN 下載放置Deep Live Cam 換臉模型配置完整指南inswapper 與 GFPGAN 下載放置 Deep Live Cam 憑一張照片即可做實(shí)時(shí)換臉的視頻深度UI庫/組件上一篇5秒克隆中文聲線IndexTTS-2.5零樣本克隆實(shí)測與效果對比下一篇老卡不慌Tesla V100 32GB 跑通 H3 的完整部署實(shí)錄創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考