User:Sammp/TestOOUI: Difference between revisions

From GNU Radio
Jump to navigation Jump to search
No edit summary
No edit summary
 
(36 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: [
<span class="mw-ui-icon-alert"></span>
    new OO.ui.LabelWidget( { label: 'Label' } ),
 
    new OO.ui.TextInputWidget( { value: 'Text' } )
<div class="warningbox"><span class="oo-ui-iconElement-icon oo-ui-icon-infoFilled oo-ui-icon-alert"></span><h2>short</h2>test</div>
  ]
 
} );
<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>
$( "#hook" ).append( layout.$element );
 
<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"