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