User:Sammp/TestOOUI: Difference between revisions

From GNU Radio
Jump to navigation Jump to search
(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:
<!-- jQuery -->
// An example of a fieldset with horizontal layout.
<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-ui-core.js"></script>
    <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-toolbars.js"></script>
    <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-widgets.js"></script>
    <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-windows.js"></script> -->
<!-- OOUI theme: wikimedia-ui -->
<link rel="stylesheet" href="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-wikimediaui.css">
<script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-wikimediaui.js"></script>
<!-- OOUI theme: apex -->
<!-- <link rel="stylesheet" href="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-apex.css"> -->
<!-- <script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-apex.js"></script> -->
     


<li><a href="https://doc.wikimedia.org/oojs-ui/master/demos/">OOUI Demo and gallery of elements</a>.</li>
var fieldset = new OO.ui.FieldsetLayout( {
<div id="hook">_</div>
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 );