OOUI/Layouts/Menu Layout

From MediaWiki.org
< OOUI‎ | Layouts
Jump to: navigation, search

A MenuLayout combines a menu and a content panel. The menu is positioned relative to the content (after, before, top, or bottom) and its size is customized with the menuSize config. The content area will fill all remaining space.

Note that menu selects and options that are often used in the 'menu' panel of a MenuLayout are documented separately.

Example of a MenuLayout.
// Example of a menu layout
var
  menuLayout = new OO.ui.MenuLayout( {
    position: 'top'
  } ),
  menuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ),
  contentPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ),
  select = new OO.ui.SelectWidget( {
    items: [
      new OO.ui.OptionWidget( {
        data: 'before',
        label: 'Before',
      } ),
      new OO.ui.OptionWidget( {
        data: 'after',
        label: 'After',
      } ),
      new OO.ui.OptionWidget( {
        data: 'top',
        label: 'Top',
      } ),
      new OO.ui.OptionWidget( {
        data: 'bottom',
        label: 'Bottom',
      } )
    ]
  } ).on( 'select', function ( item ) {
   menuLayout.setMenuPosition( item.getData() );
  } );

menuLayout.$menu.append(
  menuPanel.$element.append( '<b>Menu panel</b>', select.$element )
);
menuLayout.$content.append(
  contentPanel.$element.append( '<b>Content panel</b>', '<p>Note that the menu is positioned relative to the content panel: top, bottom, after, before.</p>')
);

$( 'body' ).append( menuLayout.$element );

For a complete list of methods and config options, please see the code-generated documentation.