資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 React JS 中建立動畫載入骨架
在本文中，我們將瞭解如何在 React JS 中建立動畫載入骨架。我們可以在電子商務網站和旅遊網站上看到動畫載入骨架，它們用於指示頁面載入後我們將看到的內容型別。它在開發者社群中很受歡迎。因此，讓我們開始吧。
首先建立一個 React 專案 -
npx create-react-app tutorialpurpose
進入專案目錄 -
cd tutorialpurpose
示例 1
安裝 react-loading-skeleton 包 -
npm i --save react-loading-skeleton
我們將使用此包在我們的 React 或 Node 專案中實現預製的骨架載入，無需任何 CSS 或 JavaScript。
在 App.js 中新增以下程式碼行 -
import Skeleton, { SkeletonTheme } from "react-loadingskeleton";
export default function App() {
return (
<SkeletonTheme>
<p style={{ width: 500, marginLeft: 100 }}>
<Skeleton count={30} />
</p>
</SkeletonTheme>
);
}解釋
此程式碼將建立一個普通的骨架載入，顏色為普通的白色。
它首先建立一個包裝器，即 <SkeletonTheme>，用於確定主題。
在 <SkeletonTheme> 內部，我們可以新增任何其他 DOM 元素，然後 <Skeleton> 將用於顯示載入效果。
Count 告訴我們骨架將顯示多少行。
輸出
現在，讓我們檢查輸出 -
示例 2
現在讓我們建立一個彩色的骨架。在 App.js 中新增以下程式碼行 -
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
export default function App() {
return (
<SkeletonTheme color="#202020" highlightColor="#444">
<p style={{ width: 500, marginLeft: 100 }}>
<Skeleton count={30} />
</p>
</SkeletonTheme>
);
}此程式碼將建立一個彩色的骨架載入器。在這裡，我們只是在 color 引數中使用了顏色。它與之前相同，唯一的區別是顏色。
現在骨架的顏色將不同。
輸出
現在，讓我們檢查輸出 -
更新於: 2021年9月29日
324 次瀏覽
廣告