| Name | Type | Default |
|---|
|
autoOpen
|
boolean
|
false
|
Sets or gets whether the loader will be shown after it's creation.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
height
|
string | number
|
150
|
Sets or gets the loader's height.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true} height={200}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
html
|
string
|
null
|
Sets the loader's content.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true} html={'custom HTML string'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
isModal
|
boolean
|
false
|
Sets or gets whether the loader is displayed as a modal dialog. If the jqxLoader's mode is set to modal, the loader blocks user interaction with the underlying user interface.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true} isModal={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
imagePosition
|
LoaderImagePosition
|
'center'
|
LoaderImagePosition: "center" | "top" | "bottom"
Sets or gets the image's position. Possible values: 'top', 'bottom' and 'center'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true} imagePosition={'top'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
rtl
|
boolean
|
false
|
Sets or gets a value indicating whether widget's text is 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 JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true} rtl={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
text
|
number | string
|
"Loading..."
|
Sets or gets the loader's text.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true} text={'Loading files...'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
textPosition
|
LoaderTextPosition
|
"bottom"
|
LoaderTextPosition: "top" | "bottom" | "left" | "right"
Sets or gets the alignment.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true} textPosition={'left'}
/>
);
}
}
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 JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true} theme={'material'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
width
|
string | number
|
150
|
Sets or gets the jqxLoader's width.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true} width={200}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
| Name | Arguments | Return Type |
|---|
|
close
|
None
|
|
Closing the current loader.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public componentDidMount(): void {
this.myLoader.current!.close();
}
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
open
|
left, top
|
|
Opening/showing the current loader. You can optionally call the method with left and top arguments
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxLoader, { ILoaderProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';
class App extends React.PureComponent<{}, ILoaderProps> {
private myLoader = React.createRef<JqxLoader>();
public componentDidMount(): void {
this.myLoader.current!.open(200,50);
}
public render() {
return (
<JqxLoader ref={this.myLoader}
autoOpen={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|