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