User:Sammp/TestOOUI: Difference between revisions
(Created page with "<!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- OOjs --> <script src="https://doc.wikimedia.org/oojs-ui/master/demos/node_modules/oojs/dist/oojs.js"></script> <!-- OOUI --> <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui.js"></script> <!-- Add the individual oojs-ui files for proper sourcemap support - -> <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-u...") |
No edit summary |
||
| Line 1: | Line 1: | ||
// 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 ); | |||
Revision as of 21:20, 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 );