User:Sammp/TestOOUI: Difference between revisions

From GNU Radio
Jump to navigation Jump to search
No edit summary
No edit summary
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
// An example of a fieldset with horizontal layout.
<span class="mw-ui-button {{#switch: {{{color|white}}} | red = mw-ui-destructive | green = mw-ui-constructive | white = | blue = mw-ui-progressive}}">{{{1|Button text}}}</span>


var fieldset = new OO.ui.FieldsetLayout( {
<div class="button">test</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 );
<span class="oo-ui-messageWidget-block type=error">test</span>


// HorizontalLayout with a text input and a label.
<span class="oo-ui-messageWidget {type=error inline=true}">{Text}</span>
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( {
<span class="mw-ui-icon-alert"></span>
label: 'Button'
 
} ), {
<div class="warningbox"><span class="oo-ui-iconElement-icon oo-ui-icon-infoFilled oo-ui-icon-alert"></span><h2>short</h2>test</div>
align: 'top',
 
label: 'FieldLayout with help',
<div class="oo-ui-buttonElement-button" role="button" tabindex="0" ><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon"></span><span class="oo-ui-labelElement-label">Normal</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span></div>
help: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u200e'
 
} )
<span class="oo-ui-image-notice">Text</span>
 
<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-flaggedElement-notice oo-ui-iconElement oo-ui-messageWidget-block oo-ui-messageWidget" aria-live="polite" aria-labelledby="ooui-364"><span class="oo-ui-iconElement-icon oo-ui-icon-infoFilled oo-ui-image-notice"></span><span class="oo-ui-labelElement-label"><strong>MessageWidget with notice for the user.</strong><br>Featuring multiple lines of notice.</span></div>
 
 
 
<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-flaggedElement-notice oo-ui-iconElement oo-ui-messageWidget-block oo-ui-messageWidget"><span class="oo-ui-iconElement-icon oo-ui-icon-infoFilled oo-ui-image-notice"></span><span class="oo-ui-labelElement-label"><strong>MessageWidget with notice for the user.</strong><br>Featuring multiple lines of notice.</span></div>
 
<div class="oo-ui-fieldLayout-field"><div class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-flaggedElement-notice oo-ui-iconElement oo-ui-messageWidget-block oo-ui-messageWidget" aria-live="polite" aria-labelledby="ooui-364"><span class="oo-ui-iconElement-icon oo-ui-icon-infoFilled oo-ui-image-notice"></span><span class="oo-ui-labelElement-label"><strong>MessageWidget with notice for the user.</strong><br>Featuring multiple lines of notice.</span></div></div>
 
<div class="oo-ui-fieldLayout-body"><span class="oo-ui-fieldLayout-header"><label class="oo-ui-labelElement-label" id="ooui-364">MessageWidget (type: 'notice')</label><span class="demo-linked-field-anchor" id="MessageWidget-type-notice"></span></span><div class="oo-ui-fieldLayout-field"><div class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-flaggedElement-notice oo-ui-iconElement oo-ui-messageWidget-block oo-ui-messageWidget" aria-live="polite" aria-labelledby="ooui-364"><span class="oo-ui-iconElement-icon oo-ui-icon-infoFilled oo-ui-image-notice"></span><span class="oo-ui-labelElement-label"><strong>MessageWidget with notice for the user.</strong><br>Featuring multiple lines of notice.</span></div></div></div>

Latest revision as of 02:32, 20 February 2022

Button text

test


test

{Text}

short

test
Normal

Text

MessageWidget with notice for the user.
Featuring multiple lines of notice.


MessageWidget with notice for the user.
Featuring multiple lines of notice.
MessageWidget with notice for the user.
Featuring multiple lines of notice.
<label class="oo-ui-labelElement-label" id="ooui-364">MessageWidget (type: 'notice')</label>
MessageWidget with notice for the user.
Featuring multiple lines of notice.
Retrieved from "https://wiki.gnuradio.org/index.php?title=User:Sammp/TestOOUI&oldid=11499"