Utilizador:Lucas.Belo/ooui-test.js

Nota: Depois de publicar, poderá ter de contornar a cache do seu navegador para ver as alterações.

Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.

// An example of a fieldset with horizontal layout.

var fieldset = new OO.ui.FieldsetLayout( {
		label: 'HorizontalLayout'
	} );

// Add an horizontal field layout
fieldset.addItems( [ 
	new OO.ui.FieldLayout(
		new OO.ui.Widget( {
			content: [ new OO.ui.HorizontalLayout( {
				items: [
					new OO.ui.ButtonWidget( { label: 'Button' } ),
					new OO.ui.ButtonGroupWidget( { items: [
						new OO.ui.ToggleButtonWidget( { label: 'A' } ),
						new OO.ui.ToggleButtonWidget( { label: 'B' } )
					] } ),
					new OO.ui.ButtonInputWidget( { label: 'ButtonInput' } ),
					new OO.ui.TextInputWidget( { value: 'TextInput' } ),
					new OO.ui.CheckboxInputWidget( { selected: true } ),
					new OO.ui.RadioInputWidget( { selected: true } ),
					new OO.ui.LabelWidget( { label: 'Label' } )
				]
			} ) ]
		} ),
		{
			label: 'Multiple widgets shown as a single line, ' +
				'as used in compact forms or in parts of a bigger widget.',
			align: 'top'
		}
	)
] );

$( "#hook" ).append( fieldset.$element );

// HorizontalLayout with a text input and a label.
var layout = new OO.ui.HorizontalLayout( {
  items: [
    new OO.ui.LabelWidget( { label: 'Label' } ),
    new OO.ui.TextInputWidget( { value: 'Text' } )
  ]
} );
$( "#hook" ).append( layout.$element );