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);

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);

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);

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);

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);

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);

Sets or gets the way to close selected content sections when the mode property is set to "popup".

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);

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);

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);

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);

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);

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);

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);

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);

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);

/* 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);

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);

This event is triggered when the user selects or unselects an item.

Code examples

Bind to the change event of jqxRibbon.

/* 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);

This event is triggered when the user reorders the jqxRibbon items with the mouse.

Code examples

Bind to the reorder event of jqxRibbon.

/* 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);

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxRibbon.

/* 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);

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxRibbon.

/* 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);

Adds a new item by index.

• index - number;
• data - object with the following properties:
  • title - string;
  • content - 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 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);

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);

Disables an item by index. Index is a number.

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);

Enables a disabled item by index. Index is a number.

Hides an item by index. Index is a number.

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);

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);

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);

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);

Shows an item by index. Index is a number.

Sets the layout of an item's content if mode is set to "popup".

• index - number;
• layout - string, possible values:
  • "default" - the item's content is aligned with the widget's header;
  • "near" - the item's content is left/top aligned with its title;
  • "far" - the item's content is right/bottom aligned with its title;
  • "center" - the item's content is centered under/next to its title.
• width - number/string;
• height - number/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 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);

Updates an item.

Note: after an item has been updated with updateAt, initContent will be called again for that item (if set).

• index - number;
• newData - object with the following properties:
  • newTitle - string;
  • newContent - 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 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);

Sets or gets the selected index. Index is a number.