Overview: DevExtreme | 您所在的位置:网站首页 › dialogalert › Overview: DevExtreme |
The ProgressBar is a UI component that shows current progress. View Demo The following code adds a simple ProgressBar to your page. The value property specifies the current value. The min and max properties limit the range of accepted values. The progress is measured in percentages and calculated by the following formula: (value / max) * 100. If the current progress is unknown yet, set the value property to false. jQuery HTMLJavaScript $(function(){ $("#progressBarContainer").dxProgressBar({ min: 0, max: 100, value: 49 }); }); Angular HTMLTypeScript import { DxProgressBarModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxProgressBarModule ], // ... }) Vue import 'devextreme/dist/css/dx.light.css'; import { DxProgressBar } from 'devextreme-vue/progress-bar'; export default { components: { DxProgressBar } } React import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { ProgressBar } from 'devextreme-react/progress-bar'; class App extends React.Component { constructor(props) { super(props); } render() { return ( ); } } export default App;When the ProgressBar reaches the maximum value, the complete event is raised. You can handle it using the onComplete function. jQuery JavaScript $(function() { $("#progressBarContainer").dxProgressBar({ min: 0, max: 100, value: 49, onComplete: function() { DevExpress.ui.dialog.alert("Completed"); } }); }); Angular HTMLTypeScript import { DxProgressBarModule } from "devextreme-angular"; import { alert } from "devextreme/ui/dialog"; // ... export class AppComponent { handleComplete(e) { alert('Completed'); } } @NgModule({ imports: [ // ... DxProgressBarModule ], // ... }) Vue import 'devextreme/dist/css/dx.light.css'; import { DxProgressBar } from 'devextreme-vue/progress-bar'; import { alert } from "devextreme/ui/dialog"; export default { components: { DxProgressBar }, methods: { handleComplete() { alert('Completed'); } } } React import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { ProgressBar } from 'devextreme-react/progress-bar'; import { alert } from "devextreme/ui/dialog"; class App extends React.Component { constructor(props) { super(props); } onComplete() { alert('Completed'); } render() { return ( ); } } export default App; See Also Configure a UI Component: Angular | Vue | React | jQuery | AngularJS | Knockout ProgressBar - Progress Status ProgressBar - Handle the Value Change Event ProgressBar API Reference |
CopyRight 2018-2019 实验室设备网 版权所有 |