PHP OOUI\Tag Beispiele

Beispiel #1

Datei: widgets.php Projekt: oojs/oojs-ui

<?php

if (!defined('OOUI_DEMOS')) {
    header('Location: ../demos.php');
    exit;
}
$demoContainer = new OOUI\PanelLayout(['expanded' => false, 'padded' => true, 'framed' => true]);
$demoContainer->addClasses(['oo-ui-demo-container']);
$styles = [[], ['flags' => ['progressive']], ['flags' => ['constructive']], ['flags' => ['destructive']], ['flags' => ['primary', 'progressive']], ['flags' => ['primary', 'constructive']], ['flags' => ['primary', 'destructive']]];
$states = [['label' => 'Button'], ['label' => 'Button', 'icon' => 'tag'], ['label' => 'Button', 'icon' => 'tag', 'indicator' => 'down'], ['icon' => 'tag', 'title' => "Title text"], ['indicator' => 'down'], ['icon' => 'tag', 'indicator' => 'down'], ['label' => 'Button', 'disabled' => true], ['icon' => 'tag', 'title' => "Title text", 'disabled' => true], ['indicator' => 'down', 'disabled' => true]];
$buttonStyleShowcaseWidget = new OOUI\Widget();
$table = new OOUI\Tag('table');
foreach ($styles as $style) {
    $tableRow = new OOUI\Tag('tr');
    foreach ($states as $state) {
        $tableCell = new OOUI\Tag('td');
        $tableCell->appendContent(new OOUI\ButtonWidget(array_merge($style, $state, ['infusable' => true])));
        $tableRow->appendContent($tableCell);
    }
    $table->appendContent($tableRow);
}
$buttonStyleShowcaseWidget->appendContent($table);
$demoContainer->appendContent(new OOUI\FieldsetLayout(['infusable' => true, 'label' => 'Simple buttons', 'items' => [new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Normal']), ['label' => "ButtonWidget (normal)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Progressive', 'flags' => ['progressive']]), ['label' => "ButtonWidget (progressive)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Constructive', 'flags' => ['constructive']]), ['label' => "ButtonWidget (constructive, deprecated)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Destructive', 'flags' => ['destructive']]), ['label' => "ButtonWidget (destructive)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Primary progressive', 'flags' => ['primary', 'progressive']]), ['label' => "ButtonWidget (primary, progressive)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Primary constructive', 'flags' => ['primary', 'constructive']]), ['label' => "ButtonWidget (primary, constructive, deprecated)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Primary destructive', 'flags' => ['primary', 'destructive']]), ['label' => "ButtonWidget (primary, destructive)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Disabled', 'disabled' => true]), ['label' => "ButtonWidget (disabled)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Progressive', 'flags' => ['progressive'], 'disabled' => true]), ['label' => "ButtonWidget (progressive, disabled)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Progressive', 'icon' => 'tag', 'flags' => ['progressive'], 'disabled' => true]), ['label' => "ButtonWidget (progressive, icon, disabled)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Icon', 'icon' => 'tag']), ['label' => "ButtonWidget (icon)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Icon', 'icon' => 'tag', 'flags' => ['progressive']]), ['label' => "ButtonWidget (icon, progressive)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Indicator', 'indicator' => 'down']), ['label' => "ButtonWidget (indicator)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'Indicator', 'indicator' => 'down', 'flags' => ['progressive']]), ['label' => "ButtonWidget (indicator, progressive)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'icon' => 'help', 'title' => 'Icon only']), ['label' => "ButtonWidget (icon only)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'icon' => 'tag', 'label' => 'Labeled']), ['label' => "ButtonWidget (frameless)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'flags' => ['progressive'], 'icon' => 'check', 'label' => 'Progressive']), ['label' => "ButtonWidget (frameless, progressive)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'flags' => ['destructive'], 'icon' => 'remove', 'label' => 'Destructive']), ['label' => "ButtonWidget (frameless, destructive)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'flags' => ['constructive'], 'icon' => 'add', 'label' => 'Constructive']), ['label' => "ButtonWidget (frameless, constructive)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'icon' => 'tag', 'label' => 'Disabled', 'disabled' => true]), ['label' => "ButtonWidget (frameless, disabled)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['framed' => false, 'flags' => ['constructive'], 'icon' => 'tag', 'label' => 'Constructive', 'disabled' => true]), ['label' => "ButtonWidget (frameless, constructive, disabled)‎", 'align' => 'top']), new OOUI\FieldLayout(new OOUI\ButtonWidget(['label' => 'AccessKeyed', 'accessKey' => 'k']), ['label' => "ButtonWidget (with accesskey k)‎", 'align' => 'top'])]]));
$demoContainer->appendContent(new OOUI\FieldsetLayout(['infusable' => true, 'label' => 'Button sets', 'items' => [new OOUI\FieldLayout(new OOUI\ButtonGroupWidget(['items' => [new OOUI\ButtonWidget(['icon' => 'tag', 'label' => 'One']), new OOUI\ButtonWidget(['label' => 'Two']), new OOUI\ButtonWidget(['indicator' => 'required', 'label' => 'Three'])]]), ['label' => 'ButtonGroupWidget', 'align' => 'top'])]]));
# Note that $buttonStyleShowcaseWidget is not infusable,
# because the contents would not be preserved -- we assume
# that widgets will manage their own contents by default,
# but here we've manually appended content to the widget.
# If we embed it in an infusable FieldsetLayout, it will be
# (recursively) made infusable.  We protect the FieldLayout
# by wrapping it with a new <div> Tag, so that it won't get

Beispiel #2

Datei: widgets.php Projekt: Sedles/WikiToLearn

# that widgets will manage their own contents by default,
# but here we've manually appended content to the widget.
# If we embed it in an infusable FieldsetLayout, it will be
# (recursively) made infusable.  We protect the FieldLayout
# by wrapping it with a new <div> Tag, so that it won't get
# rebuilt during infusion.
$wrappedFieldLayout = new OOUI\Tag('div');
$wrappedFieldLayout->appendContent(new OOUI\FieldLayout($buttonStyleShowcaseWidget, array('align' => 'top')));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Button style showcase', 'items' => array($wrappedFieldLayout))));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Form widgets', 'items' => array(new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('selected' => true)), array('align' => 'inline', 'label' => 'CheckboxInputWidget')), new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('selected' => true, 'disabled' => true)), array('align' => 'inline', 'label' => "CheckboxInputWidget (disabled)‎")), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('name' => 'oojs-ui-radio-demo')), array('align' => 'inline', 'label' => 'Connected RadioInputWidget #1')), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('name' => 'oojs-ui-radio-demo', 'selected' => true)), array('align' => 'inline', 'label' => 'Connected RadioInputWidget #2')), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('selected' => true, 'disabled' => true)), array('align' => 'inline', 'label' => "RadioInputWidget (disabled)‎")), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Text input')), array('label' => "TextInputWidget‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('icon' => 'search')), array('label' => "TextInputWidget (icon)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('indicator' => 'required', 'required' => true)), array('label' => "TextInputWidget (indicator, required)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('placeholder' => 'Placeholder')), array('label' => "TextInputWidget (placeholder)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Readonly', 'readOnly' => true)), array('label' => "TextInputWidget (readonly)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Disabled', 'disabled' => true)), array('label' => "TextInputWidget (disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('multiline' => true, 'value' => "Multiline\nMultiline")), array('label' => "TextInputWidget (multiline)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\DropdownInputWidget(array('options' => array(array('data' => 'a', 'label' => 'First'), array('data' => 'b', 'label' => 'Second'), array('data' => 'c', 'label' => 'Third')), 'value' => 'b')), array('label' => 'DropdownInputWidget', 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('label' => 'Submit the form', 'type' => 'submit')), array('align' => 'top', 'label' => "ButtonInputWidget‎")), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('label' => 'Submit the form', 'type' => 'submit', 'useInputTag' => true)), array('align' => 'top', 'label' => "ButtonInputWidget (using <input/>)‎"))))));
# Again, $horizontalAlignmentWidget is not infusable because
# it manually added content after creation.  If we embed it
# in an infusable FieldsetLayout, it will (recursively) be made
# infusable.  So protect the widget by wrapping it in a
# <div> Tag.
$wrappedFieldLayout = new OOUI\Tag('div');
$wrappedFieldLayout->appendContent(new OOUI\FieldLayout($horizontalAlignmentWidget, array('label' => 'Multiple widgets shown as a single line, ' . 'as used in compact forms or in parts of a bigger widget.', 'align' => 'top')));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Horizontal alignment', 'items' => array($wrappedFieldLayout))));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Other widgets', 'items' => array(new OOUI\FieldLayout(new OOUI\IconWidget(array('icon' => 'picture', 'title' => 'Picture icon')), array('label' => "IconWidget (normal)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\IconWidget(array('icon' => 'remove', 'flags' => 'destructive', 'title' => 'Remove icon')), array('label' => "IconWidget (flagged)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\IconWidget(array('icon' => 'picture', 'title' => 'Picture icon', 'disabled' => true)), array('label' => "IconWidget (disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\IndicatorWidget(array('indicator' => 'required', 'title' => 'Required indicator')), array('label' => "IndicatorWidget (normal)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\IndicatorWidget(array('indicator' => 'required', 'title' => 'Required indicator', 'disabled' => true)), array('label' => "IndicatorWidget (disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\LabelWidget(array('label' => 'Label')), array('label' => "LabelWidget (normal)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\LabelWidget(array('label' => 'Label', 'disabled' => true)), array('label' => "LabelWidget (disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\LabelWidget(array('label' => new OOUI\HtmlSnippet('<b>Fancy</b> <i>text</i> <u>formatting</u>!'))), array('label' => "LabelWidget (with html)‎", 'align' => 'top'))))));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Field layouts', 'help' => 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' . "in, duo ex inimicus perpetua complectitur, mel periculis similique at.‎", 'items' => array(new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => 'FieldLayout with help', 'help' => 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' . "in, duo ex inimicus perpetua complectitur, mel periculis similique at.‎", 'align' => 'top'))))));
$demoContainer->appendContent(new OOUI\FormLayout(array('infusable' => true, 'method' => 'GET', 'action' => 'widgets.php', 'items' => array(new OOUI\FieldsetLayout(array('label' => 'Form layout', 'items' => array(new OOUI\FieldLayout(new OOUI\TextInputWidget(array('name' => 'username')), array('label' => 'User name', 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('name' => 'password', 'type' => 'password')), array('label' => 'Password', 'align' => 'top')), new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('name' => 'rememberme', 'selected' => true)), array('label' => 'Remember me', 'align' => 'inline')), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('name' => 'login', 'label' => 'Log in', 'type' => 'submit', 'flags' => array('primary', 'progressive'), 'icon' => 'check')), array('label' => null, 'align' => 'top')))))))));
echo $demoContainer;
?>
	</div>

	<!-- Demonstrate JavaScript "infusion" of PHP widgets -->
	<script src="../node_modules/jquery/dist/jquery.js"></script>
	<script src="../node_modules/oojs/dist/oojs.jquery.js"></script>
	<script src="../dist/oojs-ui.js"></script>
	<script src="../dist/oojs-ui-apex.js"></script>
	<script src="../dist/oojs-ui-mediawiki.js"></script>

Beispiel #3

Datei: widgets.php Projekt: MediaWiki-stable/1.26.1

    foreach ($states as $state) {
        $buttonStyleShowcaseWidget->appendContent(new OOUI\ButtonWidget(array_merge($style, $state, array('infusable' => true))));
    }
    $buttonStyleShowcaseWidget->appendContent(new OOUI\HtmlSnippet('<br />'));
}
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Simple buttons', 'items' => array(new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Normal')), array('label' => "ButtonWidget (normal)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Progressive', 'flags' => array('progressive'))), array('label' => "ButtonWidget (progressive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Constructive', 'flags' => array('constructive'))), array('label' => "ButtonWidget (constructive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Destructive', 'flags' => array('destructive'))), array('label' => "ButtonWidget (destructive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Primary progressive', 'flags' => array('primary', 'progressive'))), array('label' => "ButtonWidget (primary, progressive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Primary constructive', 'flags' => array('primary', 'constructive'))), array('label' => "ButtonWidget (primary, constructive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Primary destructive', 'flags' => array('primary', 'destructive'))), array('label' => "ButtonWidget (primary, destructive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Disabled', 'disabled' => true)), array('label' => "ButtonWidget (disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Constructive', 'flags' => array('constructive'), 'disabled' => true)), array('label' => "ButtonWidget (constructive, disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Constructive', 'icon' => 'tag', 'flags' => array('constructive'), 'disabled' => true)), array('label' => "ButtonWidget (constructive, icon, disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Icon', 'icon' => 'tag')), array('label' => "ButtonWidget (icon)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Icon', 'icon' => 'tag', 'flags' => array('progressive'))), array('label' => "ButtonWidget (icon, progressive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Indicator', 'indicator' => 'down')), array('label' => "ButtonWidget (indicator)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Indicator', 'indicator' => 'down', 'flags' => array('constructive'))), array('label' => "ButtonWidget (indicator, constructive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'icon' => 'help', 'title' => 'Icon only')), array('label' => "ButtonWidget (icon only)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'icon' => 'tag', 'label' => 'Labeled')), array('label' => "ButtonWidget (frameless)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('progressive'), 'icon' => 'check', 'label' => 'Progressive')), array('label' => "ButtonWidget (frameless, progressive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('destructive'), 'icon' => 'remove', 'label' => 'Destructive')), array('label' => "ButtonWidget (frameless, destructive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('constructive'), 'icon' => 'add', 'label' => 'Constructive')), array('label' => "ButtonWidget (frameless, constructive)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'icon' => 'tag', 'label' => 'Disabled', 'disabled' => true)), array('label' => "ButtonWidget (frameless, disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('framed' => false, 'flags' => array('constructive'), 'icon' => 'tag', 'label' => 'Constructive', 'disabled' => true)), array('label' => "ButtonWidget (frameless, constructive, disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'AccessKeyed', 'accessKey' => 'k')), array('label' => "ButtonWidget (with accesskey k)‎", 'align' => 'top'))))));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Button sets', 'items' => array(new OOUI\FieldLayout(new OOUI\ButtonGroupWidget(array('items' => array(new OOUI\ButtonWidget(array('icon' => 'tag', 'label' => 'One')), new OOUI\ButtonWidget(array('label' => 'Two')), new OOUI\ButtonWidget(array('indicator' => 'required', 'label' => 'Three'))))), array('label' => 'ButtonGroupWidget', 'align' => 'top'))))));
# Note that $buttonStyleShowcaseWidget is not infusable,
# because the contents would not be preserved -- we assume
# that widgets will manage their own contents by default,
# but here we've manually appended content to the widget.
# If we embed it in an infusable FieldsetLayout, it will be
# (recursively) made infusable.  We protect the FieldLayout
# by wrapping it with a new <div> Tag, so that it won't get
# rebuilt during infusion.
$wrappedFieldLayout = new OOUI\Tag('div');
$wrappedFieldLayout->appendContent(new OOUI\FieldLayout($buttonStyleShowcaseWidget, array('align' => 'top')));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Button style showcase', 'items' => array($wrappedFieldLayout))));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Form widgets', 'items' => array(new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('selected' => true)), array('align' => 'inline', 'label' => 'CheckboxInputWidget')), new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('selected' => true, 'disabled' => true)), array('align' => 'inline', 'label' => "CheckboxInputWidget (disabled)‎")), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('name' => 'oojs-ui-radio-demo')), array('align' => 'inline', 'label' => 'Connected RadioInputWidget #1')), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('name' => 'oojs-ui-radio-demo', 'selected' => true)), array('align' => 'inline', 'label' => 'Connected RadioInputWidget #2')), new OOUI\FieldLayout(new OOUI\RadioInputWidget(array('selected' => true, 'disabled' => true)), array('align' => 'inline', 'label' => "RadioInputWidget (disabled)‎")), new OOUI\FieldLayout(new OOUI\RadioSelectInputWidget(array('value' => 'dog', 'options' => array(array('data' => 'cat', 'label' => 'Cat'), array('data' => 'dog', 'label' => 'Dog'), array('data' => 'goldfish', 'label' => 'Goldfish')))), array('align' => 'top', 'label' => 'RadioSelectInputWidget')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Text input')), array('label' => "TextInputWidget‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('icon' => 'search')), array('label' => "TextInputWidget (icon)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('required' => true)), array('label' => "TextInputWidget (required)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('placeholder' => 'Placeholder')), array('label' => "TextInputWidget (placeholder)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('type' => 'search')), array('label' => "TextInputWidget (type=search)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Readonly', 'readOnly' => true)), array('label' => "TextInputWidget (readonly)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Disabled', 'disabled' => true)), array('label' => "TextInputWidget (disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Accesskey A', 'accessKey' => 'a')), array('label' => "TextInputWidget (with Accesskey)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Title attribute', 'title' => 'Title attribute with more information about me.')), array('label' => "TextInputWidget (with title)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('multiline' => true, 'value' => "Multiline\nMultiline")), array('label' => "TextInputWidget (multiline)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('multiline' => true, 'rows' => 15, 'value' => "Multiline\nMultiline")), array('label' => "TextInputWidget (multiline, rows=15)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\DropdownInputWidget(array('options' => array(array('data' => 'a', 'label' => 'First'), array('data' => 'b', 'label' => 'Second'), array('data' => 'c', 'label' => 'Third')), 'value' => 'b', 'title' => 'Select an item')), array('label' => 'DropdownInputWidget', 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('label' => 'Submit the form', 'type' => 'submit')), array('align' => 'top', 'label' => "ButtonInputWidget‎")), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('label' => 'Submit the form', 'type' => 'submit', 'useInputTag' => true)), array('align' => 'top', 'label' => "ButtonInputWidget (using <input/>)‎"))))));
// We can't make the outer FieldsetLayout infusable, because the Widget in its FieldLayout
// is added with 'content', which is not preserved after infusion. But we need the Widget
// to wrap the HorizontalLayout. Need to think about this at some point.
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => false, 'label' => 'HorizontalLayout', 'items' => array(new OOUI\FieldLayout(new OOUI\Widget(array('content' => new OOUI\HorizontalLayout(array('infusable' => true, 'items' => array(new OOUI\ButtonWidget(array('label' => 'Button')), new OOUI\ButtonGroupWidget(array('items' => array(new OOUI\ButtonWidget(array('label' => 'A')), new OOUI\ButtonWidget(array('label' => 'B'))))), new OOUI\ButtonInputWidget(array('label' => 'ButtonInput')), new OOUI\TextInputWidget(array('value' => 'TextInput')), new OOUI\DropdownInputWidget(array('options' => array(array('label' => 'DropdownInput', 'data' => null)))), new OOUI\CheckboxInputWidget(array('selected' => true)), new OOUI\RadioInputWidget(array('selected' => true)), new OOUI\LabelWidget(array('label' => 'Label'))))))), array('label' => 'Multiple widgets shown as a single line, ' . 'as used in compact forms or in parts of a bigger widget.', 'align' => 'top'))))));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Other widgets', 'items' => array(new OOUI\FieldLayout(new OOUI\IconWidget(array('icon' => 'picture', 'title' => 'Picture icon')), array('label' => "IconWidget (normal)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\IconWidget(array('icon' => 'remove', 'flags' => 'destructive', 'title' => 'Remove icon')), array('label' => "IconWidget (flagged)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\IconWidget(array('icon' => 'picture', 'title' => 'Picture icon', 'disabled' => true)), array('label' => "IconWidget (disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\IndicatorWidget(array('indicator' => 'required', 'title' => 'Required indicator')), array('label' => "IndicatorWidget (normal)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\IndicatorWidget(array('indicator' => 'required', 'title' => 'Required indicator', 'disabled' => true)), array('label' => "IndicatorWidget (disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\LabelWidget(array('label' => 'Label')), array('label' => "LabelWidget (normal)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\LabelWidget(array('label' => 'Label', 'disabled' => true)), array('label' => "LabelWidget (disabled)‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\LabelWidget(array('label' => new OOUI\HtmlSnippet('<b>Fancy</b> <i>text</i> <u>formatting</u>!'))), array('label' => "LabelWidget (with html)‎", 'align' => 'top'))))));
$demoContainer->appendContent(new OOUI\FieldsetLayout(array('infusable' => true, 'label' => 'Field layouts', 'help' => 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' . "in, duo ex inimicus perpetua complectitur, mel periculis similique at.‎", 'items' => array(new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => 'FieldLayout with help', 'help' => 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' . "in, duo ex inimicus perpetua complectitur, mel periculis similique at.‎", 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => 'FieldLayout with HTML help', 'help' => new OOUI\HtmlSnippet('<b>Bold text</b> is helpful!'), 'align' => 'top')), new OOUI\FieldLayout(new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => 'FieldLayout with title', 'title' => 'Field title text', 'align' => 'top')), new OOUI\ActionFieldLayout(new OOUI\TextInputWidget(), new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => 'ActionFieldLayout aligned left', 'align' => 'left')), new OOUI\ActionFieldLayout(new OOUI\TextInputWidget(), new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => 'ActionFieldLayout aligned inline', 'align' => 'inline')), new OOUI\ActionFieldLayout(new OOUI\TextInputWidget(), new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => 'ActionFieldLayout aligned right', 'align' => 'right')), new OOUI\ActionFieldLayout(new OOUI\TextInputWidget(), new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => 'ActionFieldLayout aligned top', 'align' => 'top')), new OOUI\ActionFieldLayout(new OOUI\TextInputWidget(), new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => 'ActionFieldLayout aligned top with help', 'help' => 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' . "in, duo ex inimicus perpetua complectitur, mel periculis similique at.‎", 'align' => 'top')), new OOUI\ActionFieldLayout(new OOUI\TextInputWidget(), new OOUI\ButtonWidget(array('label' => 'Button')), array('label' => new OOUI\HtmlSnippet('<i>ActionFieldLayout aligned top with rich text label</i>'), 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => '')), array('label' => 'FieldLayout with notice', 'notices' => array('Please input a number.'), 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Foo')), array('label' => 'FieldLayout with error message', 'errors' => array('The value must be a number.'), 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('value' => 'Foo')), array('label' => 'FieldLayout with notice and error message', 'notices' => array('Please input a number.'), 'errors' => array('The value must be a number.'), 'align' => 'top'))))));
$demoContainer->appendContent(new OOUI\FormLayout(array('infusable' => true, 'method' => 'GET', 'action' => 'widgets.php', 'items' => array(new OOUI\FieldsetLayout(array('label' => 'Form layout', 'items' => array(new OOUI\FieldLayout(new OOUI\TextInputWidget(array('name' => 'username')), array('label' => 'User name', 'align' => 'top')), new OOUI\FieldLayout(new OOUI\TextInputWidget(array('name' => 'password', 'type' => 'password')), array('label' => 'Password', 'align' => 'top')), new OOUI\FieldLayout(new OOUI\CheckboxInputWidget(array('name' => 'rememberme', 'selected' => true)), array('label' => 'Remember me', 'align' => 'inline')), new OOUI\FieldLayout(new OOUI\ButtonInputWidget(array('name' => 'login', 'label' => 'Log in', 'type' => 'submit', 'flags' => array('primary', 'progressive'), 'icon' => 'check')), array('label' => null, 'align' => 'top')))))))));
echo $demoContainer;
?>
	</div>

	<!-- Demonstrate JavaScript "infusion" of PHP widgets -->