前端UI組件【免費(fèi)下載鏈接】rsuite A suite of React components .項(xiàng)目地址https://gitcode.com/gh_mirrors/rs/rsuite點(diǎn)擊查看免費(fèi)下載導(dǎo)讀本文以 rsuite 官方文檔中的 Stat 組件「Border」示例bordered.md為主線系統(tǒng)講解Stat數(shù)據(jù)統(tǒng)計(jì)組件的bordered屬性用法從一行代碼開啟邊框到背后的 SCSS 實(shí)現(xiàn)、樣式變量體系、與其他子組件Stat.Label、Stat.Value、Stat.HelpText的組合方式再到與StatGroup、useBreakpointValue搭配構(gòu)建響應(yīng)式儀表盤卡片的完整實(shí)戰(zhàn)方案。閱讀完成后你將能夠在自己的 React 項(xiàng)目中熟練使用 rsuite Stat 組件打造帶邊框、可響應(yīng)、語義清晰的數(shù)據(jù)看板。一、示例定位bordered 屬性在 Stat 組件中的角色在 rsuite 官方文檔中Stat 組件用于「以標(biāo)題label加對應(yīng)數(shù)值value的形式展示統(tǒng)計(jì)數(shù)據(jù)突出特定屬性的當(dāng)前值」。官方示例按照功能劃分為 Basic、Format Options、Trend、Border、Progress、Ring Progress、Icon、Info Tip、Value Unit、Stat Group 與 Responsive Stat Group 等多個(gè)場景其中Border 場景即本文對應(yīng)的 bordered.md解決的是最樸素的視覺需求為統(tǒng)計(jì)卡片增加邊框使其從頁面背景中「跳」出來形成獨(dú)立的分組視覺單元。bordered是Stat根組件的布爾型屬性在 Stat.tsx 的接口定義中注釋為 Add a border to the component官方 Props 表格中的類型為boolean默認(rèn)值為false不傳時(shí)不渲染邊框。二、核心示例一行屬性開啟邊框原文檔給出的示例代碼非常精簡核心就是給Stat加上bordered屬性import { Stat } from rsuite; const App () ( Stat bordered w{200} Stat.LabelPage Views/Stat.Label Stat.Value4,394/Stat.Value Stat.HelpTextLast 7 Days/Stat.HelpText /Stat ); ReactDOM.render(App /, document.getElementById(root));這段代碼完整繼承了 rsuite Stat 組件的三個(gè)典型子組件子組件默認(rèn)渲染標(biāo)簽作用Stat.Labeldt指標(biāo)名稱如 Page ViewsStat.Valuedd指標(biāo)當(dāng)前值如 4,394Stat.HelpTextspan補(bǔ)充說明文字如 Last 7 Days說明Stat.Label與Stat.Value默認(rèn)分別渲染為dt與dd見 StatLabel.tsx 與 StatValue.tsx二者被包裹在根組件內(nèi)部的dl classrs-stat-body中見 Stat.tsx天然構(gòu)成「描述列表」這一語義結(jié)構(gòu)利于屏幕閱讀器與搜索引擎解析。示例中的w{200}是Stat繼承自BoxBoxProps的樣式屬性用于設(shè)定卡片寬度。代碼示例的工程化說明原文檔示例為便于在文檔站實(shí)時(shí)預(yù)覽使用ReactDOM.render掛載到#root。在現(xiàn)代 React 工程中推薦使用函數(shù)組件 頂層入口掛載的標(biāo)準(zhǔn)寫法組件 API 完全一致import { StrictMode } from react; import { createRoot } from react-dom/client; import { Stat } from rsuite; import rsuite/dist/rsuite.min.css; function App() { return ( Stat bordered w{200} Stat.LabelPage Views/Stat.Label Stat.Value4,394/Stat.Value Stat.HelpTextLast 7 Days/Stat.HelpText /Stat ); } createRoot(document.getElementById(root)).render( StrictMode App / /StrictMode );注意引入 rsuite 樣式文件如rsuite/dist/rsuite.min.css否則bordered邊框樣式與組件的 flex 布局均不會生效。三、bordered 的底層實(shí)現(xiàn)從屬性到樣式類的映射bordered之所以是布爾屬性卻能有「開了就加邊框」的效果其實(shí)現(xiàn)路徑非常清晰可以從源碼逐層拆解屬性接收Stat從 props 中解構(gòu)出borderedStat.tsx樣式類合成通過withPrefix({ bordered })將布爾值轉(zhuǎn)換為類名后綴得到rs-stat-borderedStat.tsx結(jié)構(gòu)輸出組件渲染Box默認(rèn)div內(nèi)部先輸出可選的圖標(biāo)容器rs-stat-icon再輸出描述列表rs-stat-bodyStat.tsx樣式生效SCSS 中定義.rs-stat-bordered的完整邊框樣式見 styles/index.scss。.rs-stat-bordered { border: 1px solid var(--rs-border-primary); // 1px 邊框顏色取自主題變量 background-color: var(--rs-stat-body-bg); // 卡片底色 border-radius: var(--rs-stat-border-radius); // 圓角默認(rèn) --rs-radius-md padding: 16px; // 內(nèi)邊距 }從這段樣式可以總結(jié)出bordered帶來的四項(xiàng)視覺變化| 變化項(xiàng) | 值 | 變量來源 | | ------ | -- | -------- | | 邊框 |1px solid var(--rs-border-primary)| 主題邊框色 | | 背景 |var(--rs-stat-body-bg)| Stat 專屬背景變量 | | 圓角 |var(--rs-stat-border-radius)默認(rèn)映射到--rs-radius-md| 全局圓角尺度 | | 內(nèi)邊距 |16px| 固定值 |根組件同時(shí)定義了若干影響卡片整體布局的 CSS 變量styles/index.scss.rs-stat { --rs-stat-icon-size: 50px; --rs-stat-border-radius: var(--rs-radius-md); --rs-stat-spacing: calc(var(--rs-spacing) * 2.5); --rs-stat-value-font-size: var(--rs-font-size-2xl); --rs-stat-value-unit-font-size: var(--rs-font-size-xs); --rs-stat-trend-font-size: var(--rs-font-size-xs); display: flex; gap: var(--rs-stat-spacing); align-items: center; }這些變量說明Stat根組件是一個(gè)水平 flex 容器默認(rèn)在圖標(biāo)與文字體之間保留--rs-stat-spacing的間距而bordered只負(fù)責(zé)外框裝飾不改變內(nèi)部 flex 布局邏輯因此你可以放心地在同一個(gè)StatGroup中混用帶邊框與不帶邊框的卡片而不會破壞對齊。測試用例佐證倉庫中的單元測試直接驗(yàn)證了bordered的行為Stat.spec.tsxit(Should hava a border, () { const { container } render(Stat bordered /); expect(container.firstChild).to.have.class(rs-stat-bordered); });即當(dāng)傳入bordered時(shí)根元素必須帶有rs-stat-bordered類名。這為「屬性 → 類名 → 樣式」的整條鏈路提供了自動化驗(yàn)證依據(jù)。四、把 bordered 用出層次感完整子組件體系bordered的視覺強(qiáng)調(diào)效果需要配合 Stat 的完整子組件體系才能發(fā)揮到最佳。Stat通過Subcomponents靜態(tài)屬性掛載了五個(gè)子組件Stat.tsxconst Subcomponents { Label: StatLabel, Value: StatValue, Trend: StatTrend, ValueUnit: StatValueUnit, HelpText: StatHelpText };各子組件 Props 速查以官方 Props 文檔與源碼為準(zhǔn)Stat根組件默認(rèn)渲染divclassPrefixstat屬性類型 (默認(rèn)值)說明aselementType (div)根元素渲染的 HTML 標(biāo)簽borderedboolean是否顯示邊框iconReactNode組件左側(cè)顯示的圖標(biāo)classPrefixstring (stat)CSS 類名前綴childrenReactNode子內(nèi)容Stat.Label默認(rèn)dt屬性類型 (默認(rèn)值)說明infoReactNode標(biāo)簽旁的信息提示點(diǎn)擊氣泡uppercaseboolean是否將標(biāo)簽文本轉(zhuǎn)大寫uppercase的實(shí)現(xiàn)同樣走「布爾屬性 → 類名」路線為true時(shí)追加rs-stat-label-uppercase類StatLabel.tsxSCSS 中對應(yīng)text-transform: uppercasestyles/index.scss。Stat.Value默認(rèn)dd屬性類型 (默認(rèn)值)說明valuenumber數(shù)值內(nèi)容formatOptionsIntl.NumberFormatOptions數(shù)值的國際化格式化選項(xiàng)當(dāng)傳入value數(shù)值時(shí)StatValue內(nèi)部通過FormattedNumber/internals/intl/FormattedNumber按Intl.NumberFormat規(guī)則格式化后再渲染StatValue.tsx實(shí)現(xiàn)了文檔中「Format Options」場景的貨幣、單位格式化能力。Stat.Trend默認(rèn)span屬性類型 (默認(rèn)值)說明indicatorup \| down \| equal趨勢指示方向Stat.HelpText默認(rèn)span屬性類型 (默認(rèn)值)說明as/children/classPrefix同其他子組件輔助說明文字組合示例bordered Trend ValueUnit將邊框與趨勢、單位組合能構(gòu)建信息量更大的統(tǒng)計(jì)卡import { Stat, HStack } from rsuite; const App () ( Stat bordered w{260} Stat.Label uppercaseMonthly Revenue/Stat.Label HStack spacing{10} Stat.Value value{38050} formatOptions{{ style: currency, currency: USD }} / Stat.ValueUnitUSD/Stat.ValueUnit /HStack HStack spacing{10} Stat.Trend indicatorup12.5%/Stat.Trend Stat.HelpTextvs. last month/Stat.HelpText /HStack /Stat );indicator取值對應(yīng) SCSS 中的三套配色up使用綠色系--rs-green-*、down使用紅色系--rs-red-*、equal使用主色系--rs-primary-*見 styles/index.scss。五、多卡片場景bordered 與 StatGroup 的網(wǎng)格布局單個(gè)帶邊框的卡片適合獨(dú)立指標(biāo)當(dāng)儀表盤包含多張卡片時(shí)應(yīng)使用StatGroup將它們排布成網(wǎng)格。StatGroup的 Props默認(rèn)渲染divclassPrefixstat-group屬性類型 (默認(rèn)值)說明columnsnumber (4)每行卡片列數(shù)spacingnumber (6)卡片之間的間距px官方文檔中的 Stat Group 示例即采用「四張bordered卡片 動態(tài)列數(shù)/間距」的寫法group.mdimport { Stat, StatGroup, SelectPicker, HStack } from rsuite; const App () { const [columns, setColumns] React.useState(4); const [spacing, setSpacing] React.useState(20); return ( StatGroup columns{columns} spacing{spacing} Stat bordered Stat.LabelProfits/Stat.Label HStack spacing{10} Stat.Value38,050/Stat.Value Stat.Trend10%/Stat.Trend /HStack /Stat {/* 其余三張卡片結(jié)構(gòu)與上方一致分別為 Revenue / Cost / Expenses */} /StatGroup hr / HStack SelectPicker data{[1, 2, 4].map(value ({ label: ${value} Columns, value }))} value{columns} onChange{setColumns} cleanable{false} / SelectPicker labelSpacing data{[10, 20, 30, 40, 50].map(value ({ label: ${value}px, value }))} value{spacing} onChange{setSpacing} cleanable{false} / /HStack / ); };要點(diǎn)columns支持1 / 2 / 4等值控制一行顯示多少張卡片spacing控制卡片間距取值單位為 px通過SelectPicker聯(lián)動useState即可實(shí)時(shí)調(diào)整網(wǎng)格布局非常適合演示「響應(yīng)式列數(shù)」的效果。六、進(jìn)階實(shí)戰(zhàn)bordered useBreakpointValue 構(gòu)建響應(yīng)式儀表盤官方「Responsive Stat Group」示例responsive.tsx展示了如何讓帶邊框的卡片組在不同屏幕尺寸下自動調(diào)整列數(shù)——這是數(shù)據(jù)看板落地的標(biāo)準(zhǔn)姿勢use client; import React from react; import { Stat, StatGroup, HStack, useBreakpointValue } from rsuite; const App () { const columns useBreakpointValue( { xs: 1, // 超小屏 1 列 sm: 2, // 小屏 2 列 md: 4 // 中屏及以上 4 列 }, { defaultValue: 1 } ); return ( StatGroup columns{columns} spacing{20} p{10} Stat bordered Stat.LabelProfits/Stat.Label HStack spacing{10} Stat.Value38,050/Stat.Value Stat.Trend10%/Stat.Trend /HStack /Stat {/* Revenue / Cost / Expenses 三張 bordered 卡片結(jié)構(gòu)相同 */} /StatGroup ); }; export default App;該方案的核心組合是useBreakpointValue根據(jù)當(dāng)前斷點(diǎn)xs/sm/md 等返回對應(yīng)的列數(shù)值defaultValue兜底StatGroup columns接收響應(yīng)式列數(shù)值自動完成網(wǎng)格重排bordered讓每張卡片在任意列數(shù)下都保持清晰的邊框分隔避免多卡片堆疊時(shí)邊界混淆p{10}StatGroup同樣繼承Box的樣式屬性用于設(shè)置組整體內(nèi)邊距。這樣手機(jī)上 1 列縱向堆疊、平板 2 列、桌面端 4 列的大屏看板僅需十幾行代碼即可完成無需手寫媒體查詢。七、bordered 的適用邊界與最佳實(shí)踐從實(shí)現(xiàn)與文檔定位出發(fā)可以歸納出以下使用建議何時(shí)使用bordered當(dāng)統(tǒng)計(jì)卡片需要從背景中獨(dú)立出來、形成「一個(gè)指標(biāo)一個(gè)區(qū)塊」的視覺分組時(shí)使用典型場景為數(shù)據(jù)看板Dashboard、指標(biāo)總覽頁、報(bào)告頭部 KPI 區(qū)。何時(shí)不必使用卡片已置于自身帶邊框的容器如Panel、Card內(nèi)或頁面強(qiáng)調(diào)扁平、弱分割的極簡風(fēng)格時(shí)可省略bordered保持默認(rèn)無邊框外觀。視覺一致性bordered只作用于根元素外框不影響內(nèi)部flex布局與--rs-stat-spacing間距體系因此帶邊框與不帶邊框的卡片可以在同一StatGroup內(nèi)混排而保持對齊。主題適配邊框顏色取--rs-border-primary、背景取--rs-stat-body-bg、圓角取--rs-stat-border-radius全部為 CSS 變量隨 rsuite 主題亮色/暗色/自定義自動切換無需額外適配。八、相關(guān)資料索引本文主體示例bordered.mdStat 組件完整文檔en-US/index.md含全部子組件 Props 表組件源碼Stat.tsx、StatLabel.tsx、StatValue.tsx樣式實(shí)現(xiàn)styles/index.scss單元測試Stat.spec.tsx含bordered類名斷言配套示例Stat Group 動態(tài)布局 group.md、響應(yīng)式布局 responsive.tsx贊分享前端UI組件【免費(fèi)下載鏈接】rsuite A suite of React components .項(xiàng)目地址https://gitcode.com/gh_mirrors/rs/rsuite點(diǎn)擊查看免費(fèi)下載相關(guān)推薦rsuite Image 組件 bordered 屬性詳解為圖片添加邊框的完整實(shí)踐rsuite Image 組件 bordered 屬性詳解為圖片添加邊框的完整實(shí)踐 導(dǎo)讀 本文聚焦 rsuite 組件庫中 Image 圖片組件的 borde前端UI組件HVE Core OWASP Top 10與LLM Top 10技能實(shí)戰(zhàn)指南7個(gè)安全技能讓Copilot幫你守住代碼底線HVE Core OWASP Top 10與LLM Top 10技能實(shí)戰(zhàn)指南7個(gè)安全技能讓Copilot幫你守住代碼底線 HVE Core 是面向 GitHu前端UI組件rsuite Message 組件 bordered 用法詳解為信息提示框添加狀態(tài)邊框與圖標(biāo)rsuite Message 組件 bordered 用法詳解為信息提示框添加狀態(tài)邊框與圖標(biāo) 本文以 rsuiteReact 組件庫中 Message 組前端UI組件上一篇Prisma1 社交媒體應(yīng)用關(guān)系數(shù)據(jù)的高效查詢策略下一篇30-seconds-of-css性能優(yōu)化減少CSS體積與提升渲染效率的技巧創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考