| Name | Type | Default |
|---|
|
columns
|
Array<string>
|
[]
|
Defines the layout of the widget's elements. Each Array item should be a Percentage Value and the total should be "100%".
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
constructor(props: {}) {
super(props);
this.state = {
columns: ['30%', '40%', '30%']
}
}
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} columns={this.state.columns}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
disabled
|
boolean
|
false
|
Enables/disables the navbar.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} disabled={true}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
height
|
string | number
|
null
|
Sets or gets the NavBar's height.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
minimized
|
boolean
|
false
|
Defines whether the NavBar is minimized.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} minimized={true}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
minimizeButtonPosition
|
NavBarMinimizeButtonPosition
|
'left'
|
NavBarMinimizeButtonPosition: "left" | "right"
Defines the position of the Toggle Button in the minimized state.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} minimized={true} minimizeButtonPosition={'right'}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
minimizedHeight
|
number | string
|
30
|
Defines the NavBar's height in minimized state.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} minimized={true} minimizedHeight={40}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
minimizedTitle
|
number | string
|
""
|
Defines the NavBar's Title in minimized state.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} minimized={true} minimizedTitle={'custom element'}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
orientation
|
NavBarOrientation
|
"horizontal"
|
NavBarOrientation: "vertical" | "horizontal"
Defines the NavBar's orientation. Possible values: "horizontal", "vertical".
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} orientation={'vertical'}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
popupAnimationDelay
|
number
|
250
|
Defines the animation speed of the NavBar's Popup in minimized state.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} minimized={true} popupAnimationDelay={400}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
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 JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} rtl={true}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
selection
|
boolean
|
true
|
Sets or gets whether the items can be selected.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} selection={false}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
selectedItem
|
number | string
|
0
|
Sets or gets the selected item. The property is taken into account when selection is true.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} selectedItem={1}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
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 JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50} theme={'material'}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
width
|
string | number
|
'100%'
|
Sets or gets the NavBar's width.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
|
change
|
Event
|
|
This event is triggered when the user selects an item.
Code examples
Bind to the change event of jqxNavBar.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public render() {
return (
<JqxNavBar ref={this.myNavBar} onChange={this.onChange}
width={'90%'} height={50}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
private onChange(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
| Name | Arguments | Return Type |
|---|
|
close
|
None
|
|
When NavBar is minimized, closes the popup.
|
|
destroy
|
None
|
|
Destroys the jqxNavBar widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public componentDidMount(): void {
this.myNavBar.current!.destroy();
}
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
getSelectedIndex
|
None
|
|
Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public componentDidMount(): void {
this.myNavBar.current!.getSelectedIndex();
}
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
open
|
None
|
|
When NavBar is minimized, opens the popup.
|
|
selectAt
|
index
|
|
Selects the item with indicated index. Index is a number.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
class App extends React.PureComponent<{}, INavBarProps> {
private myNavBar = React.createRef<JqxNavBar>();
public componentDidMount(): void {
this.myNavBar.current!.selectAt(1);
}
public render() {
return (
<JqxNavBar ref={this.myNavBar}
width={'90%'} height={50}>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|