資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 ReactJS 中建立進度條？
我們可以使用進度條來跟蹤特定任務完成的百分比。也許您在許多網站上傳檔案時都見過進度條，它是進度條的最佳用例之一，用於顯示檔案上傳的百分比。
進度條的另一個最佳用例是顯示下載完成百分比。我們可以使用不同的 CSS 樣式為進度條設定動畫並改善使用者體驗。
在本教程中，我們將學習使用庫和從頭開始在 ReactJS 中建立進度條。
使用 ranmonak 庫的 react-progress-bar 元件
ranmonak NPM 包的 react-progress-bar 元件允許我們在 React 應用程式中新增進度條。使用者需要在終端執行以下命令，以將 ranmonak 庫安裝到當前的 React 應用程式中。
npm i @ramonak/react-progress-bar
語法
使用者可以按照以下語法使用 react-progress-bar 建立進度條。
import ProgressBar from "@ramonak/react-progress-bar";
<ProgressBar completed={50} bgColor="grey" animateOnRender={true} />
在上面的語法中，我們從 ramonak/react-progress-bar 匯入了 ProgressBar 元件。
示例
在下面的示例中，我們使用了 ProgressBar 元件來建立進度條。此外，我們還傳遞了 props 來自定義進度條。我們使用了 bgColor props 來更改進度條的背景顏色。我們可以將進度條的百分比作為 completed props 的值傳遞。
animateOnRender prop 允許我們為進度條設定動畫。isLabelVisible 允許我們在進度條上顯示和隱藏標籤。
import React from "react";
import ProgressBar from "@ramonak/react-progress-bar";
export default function App() {
const mainDiv = {
width: "600px",
};
return (
<div style = {mainDiv}>
<h3>
{" "}
Creating the progress bar using the <i> react-progress-bar component of the ranmonak library </i> in ReactJs
</h3>
<ProgressBar completed = {50} bgColor = "grey" animateOnRender = {true} />
<br></br>
<ProgressBar completed = {30} bgColor = "green" isLabelVisible = {false} />
<br></br>
<ProgressBar completed = {90} bgColor = "red" animateOnRender = {true} isLabelVisible = {false} />
<br></br>
<ProgressBar completed = {90.1} bgColor = "black" />
<br></br>
<ProgressBar completed = {90.3} animateOnRender = {true} />
</div>
);
}
輸出
使用 react-bootstrap 的 ProgressBar 元件
react-bootstrap 庫包含 ProgressBar 元件，我們可以將其匯入應用程式並使用 props 自定義進度條。
使用者可以使用以下命令在應用程式中安裝 react-bootstrap 和 bootstrap 庫。
npm install react-bootstrap bootstrap
語法
使用者可以按照以下語法使用 reactbootstrap 庫中的 ProgressBar 元件。
<ProgressBar now={70} label={`70% completed`} animated />
在上面的語法中，我們傳遞了“now” props 以在進度條中顯示百分比。
示例
在下面的示例中，我們從 react-bootstrap 匯入了 ProgressBar 元件，從 Bootstrap 庫匯入了 CSS。之後，我們透過向 ProgressBar 元件傳遞各種 props 建立了多個進度條。
“animated” props 允許我們為進度條設定動畫。我們可以將完成的百分比作為“now”屬性的值傳遞。此外，我們還使用了 label props 將標籤傳遞給進度條。
import React from "react";
import { ProgressBar } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
const mainDiv = {
width: "400px",
textAlign: "center",
};
return (
<div>
<h4>
{" "}
Creating the progress bar using the{" "}<i> ProgressBar component of react-bootstrap NPM package </i> in ReactJs
</h4>
<br></br>
<div style = {mainDiv}>
<ProgressBar now = {50} label = {`50% completed`} />
<br></br>
<ProgressBar now = {70} label = {`70% completed`} animated />
<br></br>
<ProgressBar now = {30} label = {`30% completed`} variant = "success" />
</div>
</div>
);
}
輸出
在 ReactJS 中從頭開始建立進度條
我們可以使用 HTML 和 CSS 在 ReactJS 中從頭開始建立進度條。我們可以使用兩個巢狀的 div 來建立進度條，並新增 CSS 來自定義進度條。
語法
使用者可以按照以下語法在 ReactJS 中從頭開始建立進度條。
<div class = "mainDiv"> <div class = "childDiv"></div> </div>
在上面的語法中，mainDiv 用作進度條。我們可以將寬度設定為 childDiv 完成百分比。
示例
檔名 – App.js
在下面的檔案中，我們建立了具有“mainDiv”類名的 div，並添加了另一個具有“childDiv”類名的 div。此外，我們在 childDiv 內部添加了<span>元素來為進度條設定標籤。
import React from "react";
import "./App.css";
export default function App() {
return (
<div>
<h3>
{" "}
Creating the progress bar using the <i> HTML and CSS </i> in ReactJs
</h3>
<br></br>
<div class = "mainDiv">
<div class = "childDiv">
<span class = "text"> 60% </span>
</div>
</div>
</div>
);
}
檔名 – App.css
在下面的檔案中，我們為 mainDiv 設定了寬度。此外，我們還對進度條應用了一些 CSS。在 childDiv 中，我們設定了 60% 的寬度，顯示 60% 的完成百分比。
.mainDiv {
height: 2rem;
width: 500px;
background-color: whitesmoke;
border-radius: 12px;
margin: 1rem;
}
.childDiv {
height: 100%;
width: 60%;
background-color: green;
border-radius: 12px;
text-align: left;
}
.text {
color: white;
padding-left: 30px;
font-size: 1.4rem;
font-weight: 700;
}
輸出
在本教程中，我們學習了三種建立進度條的方法。如果使用者想要從庫中建立進度條，可以使用第一種和第二種方法；如果使用者想要從頭開始建立進度條，則應使用第三種方法。
9K+ 瀏覽量
