| Name | Type | Default |
|---|---|---|
| animationType | RibbonAnimationType | 'fade' |
|
RibbonAnimationType: "fade" | "slide" | "none"
Sets or gets the animation type. Possible values:"fade" "slide" "none" /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} animationType={'slide'}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| animationDelay | number | string | 400 |
|
Sets or gets the duration of the ribbon animation. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} animationDelay={800}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| disabled | boolean | false |
|
Enables/disables the ribbon. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} disabled={true}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| height | number | string | 100 |
|
Sets or gets the ribbon's height. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} height={100}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| initContent | (index: any) => void | null |
|
Initializes the content of jqxRibbon. Useful for initializing other widgets. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
constructor(props: {}) {
super(props);
this.state = {
initContent: (): any => {
jqwidgets.createInstance('#button', 'jqxButton', { width: 50, height: 50 });
}
}
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} initContent={this.state.initContent}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| mode | RibbonMode | 'default' |
|
RibbonMode: "default" | "popup"
Sets or gets the ribbon's display mode. Possible values:"default" - the ribbon's content is included in its height. "popup" - the ribbon's content is not included in its height and is positioned absolutely. It overlaps elements underneath it. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} mode={'popup'}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| popupCloseMode | RibbonPopupCloseMode | 'click' |
|
RibbonPopupCloseMode: "click" | "mouseLeave" | "none"
Sets or gets the way to close selected content sections when the Possible values:"click" "mouseLeave" "none" /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} mode={'popup'} popupCloseMode={'mouseLeave'}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| position | RibbonPosition | 'top' |
|
RibbonPosition: "top" | "bottom" | "left" | "right"
Sets or gets whether the ribbon's header is positioned at the top, bottom, left or right of the content. Possible values:"top" "bottom" "left" "right" /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} position={'bottom'}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| reorder | boolean | false |
|
Sets or gets whether the ribbon's tabs can be reordered. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} reorder={true}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
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 JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} rtl={true}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| selectedIndex | number | 0 |
|
Sets or gets the selected index (tab). /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} selectedIndex={1}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| selectionMode | RibbonSelectionMode | 'click' |
|
RibbonSelectionMode: "click" | "hover" | "none"
Sets or gets the selection mode. Possible values:"click" "hover" "none" /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} selectionMode={'hover'}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| scrollPosition | RibbonScrollPosition | 'both' |
|
RibbonScrollPosition: "both" | "near" | "far"
Sets or gets the position of the scrollbar buttons. Possible values:"both" "near" "far" /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={100} scrollPosition={'near'}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| scrollStep | number | 10 |
|
Sets or gets the scroll step. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={100} scrollStep={20}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| scrollDelay | number | 50 |
|
Sets or gets the scroll delay. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={100} scrollDelay={100}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
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 JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400} theme={'material'}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| width | string | number | null |
|
Sets or gets the ribbon's width. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| change | Event | |
|
This event is triggered when the user selects or unselects an item. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon} onChange={this.onChange}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
private onChange(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| reorder | Event | |
|
This event is triggered when the user reorders the jqxRibbon items with the mouse. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.setOptions({ reorder: true });
}
public render() {
return (
<JqxRibbon ref={this.myRibbon} onReorder={this.onReorder}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
private onReorder(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| select | Event | |
|
This event is triggered when the user selects an item. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon} onSelect={this.onSelect}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
private onSelect(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| unselect | Event | |
|
This event is triggered when the user unselects an item. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public render() {
return (
<JqxRibbon ref={this.myRibbon} onUnselect={this.onUnselect}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
private onUnselect(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Methods |
||
| Name | Arguments | Return Type |
| addAt | index, item | |
|
Adds a new item by index.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.addAt(0,{ title: "New item", content: "New content" });
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| clearSelection | None | |
|
Unselects the selected item and collapses its content. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.clearSelection();
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| disableAt | index | |
|
Disables an item by index. Index is a number. |
||
| destroy | None | |
|
Destroys the jqxRibbon widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.destroy();
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| enableAt | index | |
|
Enables a disabled item by index. Index is a number. |
||
| hideAt | index | |
|
Hides an item by index. Index is a number. |
||
| removeAt | index | |
|
Removes an item from the ribbon. 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 JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.removeAt(0);
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| render | None | |
|
Renders the jqxRibbon widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.render();
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| refresh | None | |
|
Refreshes the jqxRibbon widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.refresh();
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| 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 JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.selectAt(1);
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| showAt | index | |
|
Shows an item by index. Index is a number. |
||
| setPopupLayout | index, layout, width, height | |
|
Sets the layout of an item's content if mode is set to "popup".
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.setPopupLayout(0,'near',200,200);
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| updateAt | index, item | |
|
Updates an item. Note: after an item has been updated with updateAt, initContent will be called again for that item (if set).
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRibbon, { IRibbonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxribbon';
class App extends React.PureComponent<{}, IRibbonProps> {
private myRibbon = React.createRef<JqxRibbon>();
public componentDidMount(): void {
this.myRibbon.current!.updateAt(1,{ newTitle: "Updated title", newContent: "Updated content" });
}
public render() {
return (
<JqxRibbon ref={this.myRibbon}
width={400}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| val | value | |
|
Sets or gets the selected index. Index is a number. |
||