| Name | Type | Default |
|---|
|
animationDuration
# |
number
|
300
|
Determines the duration of the progressbar's animation.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return (
<JqxProgressBar
ref={myProgressBar}
width={500}
value={50}
showText={true}
animationDuration={1000}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
colorRanges
# |
Array<ProgressBarColorRanges>
|
[]
|
Interface ProgressBarColorRanges {
stop?: number | string;
color?: string;
}
Determines different color segments.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, {
type IProgressBarProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
const colorRanges = useMemo<IProgressBarProps['colorRanges']>(
() => [
{ stop: 20, color: 'red' },
{ stop: 70, color: 'blue' }
],
[]
);
return (
<JqxProgressBar
ref={myProgressBar}
width={500}
value={50}
showText={true}
colorRanges={colorRanges}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
disabled
# |
boolean
|
false
|
Determines whether the progress bar is disabled.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return (
<JqxProgressBar
ref={myProgressBar}
width={500}
value={50}
showText={true}
disabled={true}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
height
# |
string | number
|
null
|
Sets or gets the progress bar's height.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return (
<JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} height={50} />
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
layout
# |
ProgressBarLayout
|
"normal"
|
ProgressBarLayout: "normal" | "reverse"
Sets or gets the jqxProgressBar's layout.
Possible Values:
'normal'
'reverse'-the slider is filled from right-to-left(horizontal progressbar) and from top-to-bottom(vertical progressbar)
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return (
<JqxProgressBar
ref={myProgressBar}
width={500}
value={50}
showText={true}
layout={'reverse'}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
max
# |
string | number
|
100
|
Sets or gets the progress bar's max value.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return <JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} max={250} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
min
# |
number | string
|
0
|
Sets or gets the progress bar's min value.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return <JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} min={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
orientation
# |
ProgressBarOrientation
|
'horizontal'
|
ProgressBarOrientation: "vertical" | "horizontal"
Sets or gets the orientation.
Possible Values:
'vertical'
'horizontal'
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return (
<JqxProgressBar
ref={myProgressBar}
width={40}
value={50}
showText={true}
height={500}
orientation={'vertical'}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
rtl
# |
boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return <JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} rtl={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
renderText
# |
(text?: ProgressBarRenderText['text'], value?: ProgressBarRenderText['value']) => string
|
null
|
Interface ProgressBarRenderText {
text?: string;
value?: number;
}
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar, {
type IProgressBarProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
const renderText = useMemo<IProgressBarProps['renderText']>(
() =>
(text: string, _value: number): any => {
return (
"<span style='background: #ffe8a6; color: #e53d37; font-style: italic;'>" +
text +
'</span>'
);
},
[]
);
return (
<JqxProgressBar
ref={myProgressBar}
width={500}
value={50}
showText={true}
renderText={renderText}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
showText
# |
boolean
|
false
|
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return <JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
template
# |
ProgressBarTemplate
|
'default'
|
ProgressBarTemplate: "default" | "primary" | "success" | "warning" | "danger" | "info"
Determines the template as an alternative of the default styles.
Possible Values:
'default' - the default template. The style depends only on the "theme" property value.
'primary' - dark blue style for extra visual weight.
'success' - green style for successful or positive action.
'warning' - orange style which indicates caution.
'danger' - red style which indicates a dangerous or negative action.
'info' - blue button, not tied to a semantic action or use.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return (
<JqxProgressBar
ref={myProgressBar}
width={500}
value={50}
showText={true}
template={'success'}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
theme
# |
string
|
''
|
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return (
<JqxProgressBar
ref={myProgressBar}
width={500}
value={50}
showText={true}
theme={'material'}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
value
# |
string | number
|
0
|
Sets or gets the progress bar's value The value should be set between min(default value: 0) and max(default value: 100).
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return <JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
width
# |
string | number
|
null
|
Sets or gets the progress bar's width.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
return <JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
|
complete
# |
Event
|
|
This event is triggered when the value is equal to the max. value.
Code examples #
Bind to the complete event of jqxProgressBar.
|
|
invalidValue
# |
Event
|
|
This event is triggered when the user enters an invalid value( value which is not number or is out of the min - max range. )
Code examples #
Bind to the invalidValue event of jqxProgressBar.
|
|
valueChanged
# |
Event
|
|
This event is triggered when the value is changed.
Code examples #
Bind to the valueChanged event of jqxProgressBar.
|
|
|
| Name | Arguments | Return Type |
|---|
|
actualValue
# |
value
|
|
Sets the progress bar's value.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
useEffect(() => {
myProgressBar.current!.actualValue(20);
}, []);
return <JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
destroy
# |
None
|
|
Destroys the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
useEffect(() => {
myProgressBar.current!.destroy();
}, []);
return <JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
val
# |
value
|
|
Sets or gets the value.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxprogressbar';
function App() {
const myProgressBar = useRef<JqxProgressBar>(null);
useEffect(() => {
myProgressBar.current!.val();
}, []);
return <JqxProgressBar ref={myProgressBar} width={500} value={50} showText={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
