前端UI組件設(shè)計系統(tǒng)【免費下載鏈接】ant-designAn enterprise-class UI design language and React UI library項目地址https://gitcode.com/gh_mirrors/ant/ant-design點擊查看免費下載導(dǎo)讀在 Ant Designantd中Skeleton不僅是一個整頁占位組件還提供了一組元素級骨架子組件——Skeleton.Button、Skeleton.Avatar、Skeleton.Input、Skeleton.Image和Skeleton.Node用于在列表、表單、卡片等局部場景中精確模擬真實組件的加載占位。本文以官方示例 element.tsx 及其說明 element.md 為骨架結(jié)合倉庫源碼逐層拆解這五種元素骨架的用法、參數(shù)含義與底層實現(xiàn)幫助你按需組合出與真實界面 1:1 對齊的骨架屏。一、示例概覽五種元素骨架一屏演示官方 demoelement.tsx的核心渲染代碼非常簡潔一個Space內(nèi)同時放置了按鈕、頭像、輸入框三種骨架隨后依次展示塊級按鈕、塊級輸入框、圖像骨架和自定義節(jié)點骨架Space Skeleton.Button active{active} size{size} shape{buttonShape} block{block} / Skeleton.Avatar active{active} size{size} shape{avatarShape} / Skeleton.Input active{active} size{size} / /Space br / br / Skeleton.Button active{active} size{size} shape{buttonShape} block{block} / br / br / Skeleton.Input active{active} size{size} block{block} / br / br / Space Skeleton.Image active{active} / Skeleton.Node active{active} DotChartOutlined style{{ fontSize: 40, color: #bfbfbf }} / /Skeleton.Node /Space配合下方的控制面板可以實時切換三個維度控制項作用對象可選項Active開關(guān)全部骨架開啟/關(guān)閉呼吸動畫Button and Input Block開關(guān)Button、Input是否撐滿父容器寬度Size單選Button、Avatar、Inputdefault/large/smallButton Shape單選Buttondefault/square/round/circleAvatar Shape單選Avatarsquare/circle這里DotChartOutlined圖標來自ant-design/icons包說明Skeleton.Node的占位內(nèi)容可以是任意 React 節(jié)點這為自定義節(jié)點骨架提供了極大自由度。二、五種元素骨架的完整 API 與用法從 index.zh-CN.md 的 API 表格可以整理出各子組件的完整參數(shù)。1. Skeleton.Button骨架按鈕Skeleton.Button active sizelarge shaperound block /屬性說明類型默認值active是否展示動畫效果booleanfalseblock將按鈕寬度調(diào)整為其父寬度booleanfalse4.17.0 版本起支持shape指定按鈕形狀circle|round|square|default-size設(shè)置按鈕大小large|small|default-2. Skeleton.Avatar骨架頭像Skeleton.Avatar active sizelarge shapesquare /屬性說明類型默認值active是否展示動畫效果僅在單獨使用頭像骨架時生效booleanfalseshape指定頭像形狀circle|square-size設(shè)置頭像占位圖大小number |large|small|default-注意Skeleton.Avatar的size支持傳入數(shù)字如size{20}此時骨架會按該像素尺寸渲染為正方形占位。3. Skeleton.Input骨架輸入框Skeleton.Input active sizesmall block /屬性說明類型默認值active是否展示動畫效果booleanfalsesize設(shè)置輸入框大小large|small|default-block屬性同樣作用于 Input示例中第 49 行即演示了塊級輸入框的占位效果。4. Skeleton.Image骨架圖像Skeleton.Image active /Skeleton.Image沒有size與shape參數(shù)它渲染一個固定比例的圖片占位區(qū)域內(nèi)部通過一段內(nèi)置的 SVG path 繪制出山峰 太陽的經(jīng)典圖片占位圖形見 Image.tsx 中約 40 行的path常量SVG 以titleImage placeholder/title聲明可訪問性標題。5. Skeleton.Node自定義節(jié)點骨架Skeleton.Node active DotChartOutlined style{{ fontSize: 40, color: #bfbfbf }} / /Skeleton.NodeSkeleton.Node接受任意children適合為圖表、圖標、自定義業(yè)務(wù)圖形提供占位容器。從源碼 Node.tsx 可見未傳children時默認回退為DotChartOutlined圖標const content children ?? DotChartOutlined /也就是說僅寫Skeleton.Node active /也能渲染出一個帶默認圖標的占位節(jié)點。6. 與父級 Skeleton 的聯(lián)動以上元素子組件均掛在Skeleton命名空間下見 Skeleton.tsx 末尾的Skeleton.Button SkeletonButton等五條掛載語句可以獨立使用也可以作為整體Skeleton的補充。父級Skeleton自身還提供屬性說明類型默認值active是否展示動畫效果booleanfalseavatar是否顯示頭像占位圖boolean | SkeletonAvatarPropsfalseloading為 true 時顯示占位圖反之直接展示子組件boolean-paragraph是否顯示段落占位圖boolean | SkeletonParagraphPropstrueround為 true 時段落和標題顯示圓角booleanfalsetitle是否顯示標題占位圖boolean | SkeletonTitlePropstrue三、源碼剖析Element 是五種骨架的公共底座剝開外層包裝五種元素骨架最終都收斂到同一個基礎(chǔ)組件Element。查看 Element.tsx 可以看到其內(nèi)部邏輯尺寸處理size large追加-lg類名、size small追加-sm類名當size是數(shù)字時直接以內(nèi)聯(lián)樣式設(shè)置width、height和lineHeight形狀處理circle/square/round分別追加對應(yīng)形狀類名渲染輸出最終渲染為一個span占位元素配合樣式文件 style/index.ts 中的灰底圓角背景形成視覺占位。各子組件只是用不同的prefixCls前綴復(fù)用該底座子組件傳給 Element 的 prefixCls額外邏輯Skeleton.Button${prefixCls}-button支持block見 Button.tsxSkeleton.Avatar${prefixCls}-avatar默認shape circle、size default見 Avatar.tsxSkeleton.Input${prefixCls}-input支持block見 Input.tsxSkeleton.Node${prefixCls}-image渲染 children 或默認圖標見 Node.tsx這種子組件包裹 公共 Element 渲染的分層設(shè)計讓五種骨架的樣式與尺寸行為高度一致也方便主題統(tǒng)一定制。所有子組件還會通過ConfigContext的getPrefixCls讀取全局前綴配合ConfigProvider可整體修改并通過useStyle注入 CSS-in-JS 樣式與 hashId。四、實戰(zhàn)用元素骨架搭建表單 操作區(qū)局部加載態(tài)將官方示例的交互思路落地到真實場景當表單詳情接口返回前用元素骨架精確占位數(shù)據(jù)到達后通過loading切換為真實內(nèi)容。import React, { useState } from react; import { Button, Skeleton, Space } from antd; import { ReloadOutlined } from ant-design/icons; const DetailForm: React.FC () { const [loading, setLoading] useState(true); const reload () { setLoading(true); // 模擬異步請求 setTimeout(() setLoading(false), 1500); }; return ( Space directionvertical size{16} style{{ width: 320 }} {loading ? ( {/* 模擬「頭像 姓名行」的表單頭部 */} Space Skeleton.Avatar active sizelarge / Skeleton.Input active sizelarge / /Space {/* 模擬兩個輸入框字段 */} Skeleton.Input active block / Skeleton.Input active block / {/* 模擬操作按鈕區(qū) */} Skeleton.Button active shaperound / / ) : ( Button typeprimary icon{ReloadOutlined /} onClick{reload} 已加載完成點擊刷新 /Button )} /Space ); }; export default DetailForm;要點總結(jié)對齊真實布局用Space的directionvertical與block屬性讓骨架與真實組件的排布、寬度保持一致避免加載完成后的跳動感動畫引導(dǎo)網(wǎng)絡(luò)場景建議開啟active呼吸動畫能有效降低等待焦慮組合使用元素骨架既可單獨使用也可與整體Skeleton含 title/paragraph/avatar混搭覆蓋從整頁骨架到局部元素骨架的全部加載場景自定義擴展任何需要占位的業(yè)務(wù)圖形都可以包進Skeleton.Node例如圖表圖標、徽標、縮略圖等。五、測試驗證五種元素的快照與行為保障倉庫為元素骨架提供了完整的測試覆蓋見 components/skeleton/tests/index.test.tsx測試通過genSkeletonButton、genSkeletonAvatar、genSkeletonInput、genSkeletonImage、genSkeletonNode五個輔助函數(shù)分別渲染五種元素并對avatar的sizesmall/default/large/數(shù)字20與shapecircle/square、round圓角、loading{false}時直接渲染 children 等行為逐一斷言快照。這些測試印證了上文分析的尺寸數(shù)字內(nèi)聯(lián)樣式、形狀類名切換等實現(xiàn)細節(jié)也是你在業(yè)務(wù)中安全使用這些 API 的信心來源。結(jié)語從 element.md 的簡短說明出發(fā)可以看到 Ant Design 骨架屏的能力遠不止灰色方塊Skeleton.Button、Skeleton.Avatar、Skeleton.Input、Skeleton.Image與Skeleton.Node覆蓋了常見表單與內(nèi)容區(qū)的占位需求size含數(shù)字尺寸、shape、block、active的組合讓占位圖可以精確貼合真實組件。深入 Element.tsx 等源碼后你會發(fā)現(xiàn)統(tǒng)一的公共底座 各子組件差異化封裝正是其易用與可擴展并存的底層保障。下次編寫加載態(tài)時不妨直接使用這些元素級骨架為你的用戶提供更平滑的等待體驗。贊分享前端UI組件設(shè)計系統(tǒng)【免費下載鏈接】ant-designAn enterprise-class UI design language and React UI library項目地址https://gitcode.com/gh_mirrors/ant/ant-design點擊查看免費下載相關(guān)推薦Ant Design Skeleton 骨架屏組件完全指南占位加載、復(fù)合元素與源碼實現(xiàn)剖析Ant Design Skeleton 骨架屏組件完全指南占位加載、復(fù)合元素與源碼實現(xiàn)剖析 Skeleton 是 Ant Design 在“內(nèi)容尚未就緒”階段前端UI組件設(shè)計系統(tǒng)Ant Design Skeleton 骨架屏組件全面實戰(zhàn)指南占位組合、子組件、語義化樣式與主題定制Ant Design Skeleton 骨架屏組件全面實戰(zhàn)指南占位組合、子組件、語義化樣式與主題定制 Skeleton骨架屏是 Ant Design 反饋前端UI組件設(shè)計系統(tǒng)Ant Design Skeleton 骨架屏系列共享 API 全解active 動畫與 classNames / styles 語義化定制Ant Design Skeleton 骨架屏系列共享 API 全解active 動畫與 classNames / styles 語義化定制 本指南聚焦 An前端UI組件設(shè)計系統(tǒng)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考