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

KendoReact 2024 Q2新版下載

進度條是重要的UI元素，它向用戶提供關于正在進行的流程狀態的視覺反饋，在應用程序中廣泛用于指示操作的進度，例如文件上傳、下載或數據處理任務。

在本文中，我們將探討如何使用KendoReact ProgressBar和ChunkProgressBar組件在React應用程序中創建動態進度條。

KendoReact ProgressBar組件

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

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

要創建一個簡單的進度條，我們可以指定值prop，它表示當前的進度。max和min props定義了進度條的范圍，max默認為100，min默認為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自定義進度條的外觀和操作，例如要反轉進程的方向，我們可以將reverse prop設置為true。

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

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

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

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

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

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

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

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>
);
};

當觸發動畫按鈕被點擊時，進度條將動畫到55%。

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

為了定制動畫持續時間，我們可以提供一個持續時間值，下面是提供持續時間值為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>
);
};

以上將導致一個進度條動畫與自定義和較慢的持續時間。

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

KendoReact ChunkProgressBar組件

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

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

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

下面是一個如何在React應用程序中使用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 />);

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

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

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>
);
};

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

總結

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

更多產品更新，歡迎直接咨詢“”了解~

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論