User:Sammp/TestOOUI: Difference between revisions
No edit summary |
No edit summary |
||
| Line 42: | Line 42: | ||
} ); | } ); | ||
$( "#hook" ).append( layout.$element ); | $( "#hook" ).append( layout.$element ); | ||
new OO.ui.FieldLayout( new OO.ui.ButtonWidget( { | |||
label: 'Button' | |||
} ), { | |||
align: 'top', | |||
label: 'FieldLayout with help', | |||
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e' | |||
} ) | |||
Revision as of 21:23, 19 February 2022
// 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 );
new OO.ui.FieldLayout( new OO.ui.ButtonWidget( { label: 'Button' } ), { align: 'top', label: 'FieldLayout with help', help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e' } )