Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求。現(xiàn)在我們非常自豪地宣布，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for React能夠為客戶提供更好的用戶體驗，并且能夠更快地構(gòu)建更好的應(yīng)用程序。

KendoReact 2024 Q2新版下載

 進度條是重要的UI元素，它向用戶提供關(guān)于正在進行的流程狀態(tài)的視覺反饋，在應(yīng)用程序中廣泛用于指示操作的進度，例如文件上傳、下載或數(shù)據(jù)處理任務(wù)。

在本文中，我們將探討如何使用KendoReact ProgressBar和ChunkProgressBar組件在React應(yīng)用程序中創(chuàng)建動態(tài)進度條。

KendoReact ProgressBar組件

KendoReact ProgressBar組件以完成的百分比顯示任務(wù)的進度，它通過kendo-react-progressbars npm包分發(fā)，并且可以直接從這個包中導(dǎo)入。

import { ProgressBar } from '@progress/kendo-react-progressbars';

要創(chuàng)建一個簡單的進度條，我們可以指定值prop，它表示當(dāng)前的進度。max和min props定義了進度條的范圍，max默認(rèn)為100，min默認(rèn)為0。

import * as React from "react";
import { createRoot } from "react-dom/client";
import { ProgressBar } from "@progress/kendo-react-progressbars";

const App = () => {
const value = 55; // Current progress value

return (
<div className="container">
<ProgressBar value={value} />
</div>
);
};

const domNode = document.querySelector("my-app");
const root = createRoot(domNode);
root.render(<App />);

上面的代碼將顯示完成55%的進度條。

我們可以使用各種props自定義進度條的外觀和操作，例如要反轉(zhuǎn)進程的方向，我們可以將reverse prop設(shè)置為true。

const App = () => {
const value = 55;

return (
<div className="container">
<ProgressBar value={value} reverse={true} />
</div>
);
};

要以垂直方向顯示進度條，我們可以將orientation prop設(shè)置為“vertical”。

const App = () => {
const value = 55;

return (
<div className="container">
<ProgressBar value={value} orientation="vertical" />
</div>
);
};

animation prop允許自定義進度條的動畫，我們可以通過將該道具設(shè)置為布爾值或帶有可自定義持續(xù)時間選項的對象來啟用或自定義動畫。例如，要啟用默認(rèn)動畫，我們可以簡單地將animation設(shè)置為true。

我們將animation prop設(shè)置為true，還將渲染一個按鈕，當(dāng)點擊該按鈕時，該按鈕將更新進度條中顯示的值，從0到55，這個進度條值的變化將有助于觸發(fā)動畫。

const App = () => {
const [progressBarValue, setProgressBarValue] = React.useState(0);

return (
<div className="container">
<ProgressBar value={progressBarValue} animation={true} />
<button onClick={() => setProgressBarValue(55)}>Trigger animation</button>
</div>
);
};

當(dāng)觸發(fā)動畫按鈕被點擊時，進度條將動畫到55%。

觸發(fā)動畫按鈕被按下，一個灰色的進度條從左到右填充粉紅色至55%。

為了定制動畫持續(xù)時間，我們可以提供一個持續(xù)時間值，下面是提供持續(xù)時間值為1000毫秒的示例。

const App = () => {
const [progressBarValue, setProgressBarValue] = React.useState(0);

return (
<div className="container">
<ProgressBar value={progressBarValue} animation={{ duration: 1000 }} />
<button onClick={() => setProgressBarValue(55)}>Trigger animation</button>
</div>
);
};

以上將導(dǎo)致一個進度條動畫與自定義和較慢的持續(xù)時間。

觸發(fā)動畫按鈕被按下，一個灰色的進度條從左到右填充粉紅色至55%，但移動得慢得多。

KendoReact ChunkProgressBar組件

ChunkProgressBar組件類似于ProgressBar組件，因為它可視化地向用戶表示任務(wù)的進度。和progressbar組件一樣，ChunkProgressBar組件也可以從kendo-react-progressbars npm包中導(dǎo)入。

import { ChunkProgressBar } from '@progress/kendo-react-progressbars';

ChunkProgressBar組件的獨特之處在于它能夠以不同的塊顯示進度，這使得它特別適合可以將進度劃分為明確的階段或步驟的場景。這是通過chunkCount屬性實現(xiàn)的，該屬性允許我們指定將進度條分割成塊的數(shù)量。

下面是一個如何在React應(yīng)用程序中使用ChunkProgressBar組件的基本示例：

import * as React from "react";
import { createRoot } from "react-dom/client";
import { ChunkProgressBar } from "@progress/kendo-react-progressbars";

const App = () => {
const value = 60;

return (
<div className="container">
<ChunkProgressBar chunkCount={5} value={value} />
</div>
);
};

const domNode = document.querySelector("my-app");
const root = createRoot(domNode);
root.render(<App />);

上面的代碼將呈現(xiàn)一個分成五個塊的進度條，進度在視覺上填充成60%的比例值。給定默認(rèn)行為并假設(shè)最大值為100，這意味著進度條將顯示超過一半的填充塊。

為了模擬在塊中完成任務(wù)的進度，我們可以引入一個按鈕，當(dāng)單擊該按鈕時，它會更新進度條的值。

const App = () => {
const [progressBarValue, setProgressBarValue] = React.useState(0);

const incrementValue = () => {
setProgressBarValue((prevValue) => prevValue + 20);
};

return (
<div className="container">
<ChunkProgressBar chunkCount={5} value={progressBarValue} />
<button onClick={incrementValue}>Increment Chunk</button>
</div>
);
};

上面的示例實時模擬了任務(wù)進程，每次單擊按鈕都會填充進度條的一個額外塊，演示一個常見的用例，其中任務(wù)以離散增量而不是連續(xù)的方式進行。

總結(jié)

總之，KendoReact ProgressBar和ChunkProgressBar組件為開發(fā)人員提供了在React應(yīng)用程序中顯示任務(wù)進度的有用工具。無論您是需要傳統(tǒng)的進度條還是分段進度指示器，這些組件都提供了靈活性和自定義選項，以滿足您的應(yīng)用程序需求。

更多產(chǎn)品更新，歡迎直接咨詢“”了解~

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進群討論