SandBox: Difference between revisions

Jump to navigation Jump to search
Fahad AlKhalfan (talk | contribs)
No edit summary
Fahad AlKhalfan (talk | contribs)
No edit summary
Line 7: Line 7:
##I guess I am
##I guess I am
###I am pretty sure I am right
###I am pretty sure I am right
<style>
body {
  font-family: sans-serif;
  font-size: 0.875em;
}
.container {
  width: 600px;
  height: 300px;
  border-style: dotted;
  border-width: 1px;
  padding: 20px;
}
</style>
<script>
// Create form  elements (text input, checkbox, submit button, etc.)
var input1 = new OO.ui.TextInputWidget( {
  placeholder: 'A form text field'
} );
var input2 = new OO.ui.TextInputWidget( {
  placeholder: 'A form text field'
} );
var input3 = new OO.ui.TextInputWidget( {
  placeholder: 'A form text field with help'
} );
var input4 = new OO.ui.CheckboxInputWidget( {
  selected: true
} );
     
// Create a Fieldset layout.
var fieldset = new OO.ui.FieldsetLayout( {
  label: 'FieldsetLayout: Examples of label alignment and help text',
  classes: ["container"]
} );
// Add field layouts that contain the form elements to the fieldset. Items can
// also be specified with the FieldsetLayout's `items` config option:
fieldset.addItems( [
  new OO.ui.FieldLayout( input1, {
    label: 'Left-aligned label, the default',
    align: 'left'
  } ),
  new OO.ui.FieldLayout( input2, {
    label: 'Right-aligned label',
    align: 'right'
  } ),
  new OO.ui.FieldLayout( input3, {
    label: 'Top-aligned label',
    align: 'top',
    help: 'A bit of help'
  } ),
  new OO.ui.FieldLayout( input4, {
    label: 'Inline label',
    align: 'inline'
  } )
] );
$( 'body' ).append( fieldset.$element );
</script>

Revision as of 13:38, 13 October 2017

Hey how are
you?

I am doing fine

  1. is this right?
    1. I guess so
    2. I guess I am
      1. I am pretty sure I am right

<style> body {

 font-family: sans-serif;
 font-size: 0.875em;

}

.container {

 width: 600px;
 height: 300px;
 border-style: dotted;
 border-width: 1px;
 padding: 20px;

} </style>

<script>

// Create form  elements (text input, checkbox, submit button, etc.)

var input1 = new OO.ui.TextInputWidget( {

 placeholder: 'A form text field'

} );

var input2 = new OO.ui.TextInputWidget( {

 placeholder: 'A form text field'

} );

var input3 = new OO.ui.TextInputWidget( {

 placeholder: 'A form text field with help'

} );

var input4 = new OO.ui.CheckboxInputWidget( {

 selected: true

} );

// Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( {

 label: 'FieldsetLayout: Examples of label alignment and help text',
 classes: ["container"]

} );

// Add field layouts that contain the form elements to the fieldset. Items can // also be specified with the FieldsetLayout's `items` config option:

fieldset.addItems( [

 new OO.ui.FieldLayout( input1, {
   label: 'Left-aligned label, the default', 
   align: 'left' 
 } ),
 new OO.ui.FieldLayout( input2, { 
   label: 'Right-aligned label',
   align: 'right' 
 } ),
 new OO.ui.FieldLayout( input3, { 
   label: 'Top-aligned label', 
   align: 'top', 
   help: 'A bit of help'
 } ),
 new OO.ui.FieldLayout( input4, { 
   label: 'Inline label', 
   align: 'inline' 
 } )

] );

$( 'body' ).append( fieldset.$element ); </script>