| Name | Type | Default |
|---|
|
disabled
|
boolean
|
false
|
Sets or gets whether the scrollbar is disabled.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} disabled={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
height
|
string | number
|
null
|
Sets or gets height of the scroll bar.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
largestep
|
number
|
50
|
Sets or gets the scrollbar's largestep. The value is increased/decreased with this largestep when the user presses the left mouse button in the area between a scrollbar button and thumb.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} largestep={100}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
min
|
number
|
0
|
Sets or gets the scrollbar's minimum value.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} min={20} value={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
max
|
number
|
1000
|
Sets or gets the scrollbar's maximum value.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} max={100} value={50}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
rtl
|
boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} rtl={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
step
|
number
|
10
|
Sets or gets the scrollbar's step. The value is increased/decreased with this step when the user presses a scrollbar button.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} step={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
showButtons
|
boolean
|
true
|
Sets or gets whether the scrollbar displays the increase and decrease arrow buttons.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} showButtons={false}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
thumbMinSize
|
number
|
10
|
Specifies the scrollbar thumb's minimum size.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} thumbMinSize={30}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
theme
|
string
|
''
|
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} theme={'material'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
vertical
|
boolean
|
false
|
Sets or gets the scrollbar's orientation.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={20} height={180} vertical={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
value
|
number
|
0
|
Sets or gets the scrollbar's value.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} value={200}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
width
|
string | number
|
null
|
Sets or gets width of the scroll bar.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
|
valueChanged
|
Event
|
|
This event is triggered when the value is changed.
Code examples
Bind to the valueChanged event of jqxScrollBar.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar} onValueChanged={this.onValueChanged}
width={180} height={20}
/>
);
}
private onValueChanged(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
| Name | Arguments | Return Type |
|---|
|
destroy
|
None
|
|
Destroys the widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public componentDidMount(): void {
this.myScrollBar.current!.destroy();
}
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
isScrolling
|
None
|
|
Returns true, if the user is scrolling. Otherwise, returns false.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public componentDidMount(): void {
this.myScrollBar.current!.isScrolling();
}
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
setPosition
|
index
|
|
Sets the thumb's position
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public componentDidMount(): void {
this.myScrollBar.current!.setPosition(10);
}
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|