User:Jayprakash12345/OOUI-Widget
List of Widget edit
- ButtonWidget
- ButtonInputWidget
- ButtonGroupWidget
- CheckboxInputWidget
- CheckboxMultiselectInputWidget
- RadioInputWidget
- RadioSelectInputWidget
- TextInputWidget
- MultilineTextInputWidget
- SearchInputWidget
- DropdownInputWidget
- ComboBoxInputWidget
- LabelWidget
- IconWidget
- IndicatorWidget
- ProgressBarWidget
Layouts:
- FieldLayout
- ActionFieldLayout
- FieldsetLayout
- FormLayout
- PanelLayout
- HorizontalLayout
Examples edit
- ButtonWidget
new OOUI\ButtonWidget( [
'label' => 'Simple Button With Icon',
'icon' => 'alert'
] );
- ButtonInputWidget
new OOUI\ButtonInputWidget( [
'label' => 'Simple Button With Icon',
'type' => 'submit'
] );
- ButtonGroupWidget
new OOUI\ButtonGroupWidget([
'items' => [
new OOUI\ButtonWidget( [
'label' => 'Button 1',
] ),
new OOUI\ButtonWidget( [
'label' => 'Button 2',
] )
]
]);
- CheckboxInputWidget
new OOUI\FieldLayout(
new OOUI\CheckboxInputWidget( [
'selected' => true
] ),
[
'align' => 'inline',
'label' => 'CheckboxInputWidget'
]
);
- CheckboxMultiselectInputWidget
new OOUI\FieldLayout(
new OOUI\CheckboxMultiselectInputWidget( [
'value' => [ 'dog', 'cat' ],
'options' => [
[
'data' => 'check1',
'label' => 'Check 1'
],
[
'data' => 'check2',
'label' => "Check 2 (disabled)",
'disabled' => true
],
[
'data' => 'check3',
'label' => 'Check 3'
],
]
] ),
[
'align' => 'top',
'label' => 'CheckboxMultiselectInputWidget',
]
);
- RadioInputWidget
new OOUI\FieldLayout(
new OOUI\RadioInputWidget( [
'name' => 'radiobutton'
] ),
[
'align' => 'inline',
'label' => 'RadioInputWidget'
]
);
- RadioSelectInputWidget
new OOUI\FieldLayout(
new OOUI\RadioSelectInputWidget( [
'value' => 'dog',
'options' => [
[
'data' => 'radio1',
'label' => 'Radio 1'
],
[
'data' => 'radio2',
'label' => 'Radio 2'
],
[
'data' => 'radio3',
'label' => 'Radio 3'
],
]
] ),
[
'align' => 'top',
'label' => 'RadioSelectInputWidget',
]
);
- TextInputWidget
new OOUI\FieldLayout(
new OOUI\TextInputWidget( [ 'icon' => 'globe' ] ),
[
'label' => "TextInputWidget (icon)",
'align' => 'top'
]
);
- MultilineTextInputWidget
new OOUI\FieldLayout(
new OOUI\MultilineTextInputWidget( [
'value' => "Multiline\nThis is the Multiline Text Widget"
] ),
[
'label' => "MultilineTextInputWidget",
'align' => 'top'
]
);
- SearchInputWidget
new OOUI\FieldLayout(
new OOUI\SearchInputWidget(),
[
'label' => "SearchInputWidget",
'align' => 'top'
]
);
- DropdownInputWidget
new OOUI\FieldLayout(
new OOUI\DropdownInputWidget( [
'options' => [
[ 'data' => 'en', 'label' => 'English' ],
[ 'data' => 'hi', 'label' => 'Hindi' ],
[ 'data' => 'ta', 'label' => 'Tamil' ],
[ 'data' => 'bn', 'label' => 'Bangla' ],
],
'value' => 'en',
] ),
[
'label' => "DropdownInputWidget",
'align' => 'top'
]
);
- ComboBoxInputWidget
new OOUI\FieldLayout(
new OOUI\ComboBoxInputWidget( [
'options' => [
[ 'data' => 'en', 'label' => 'English' ],
[ 'data' => 'hi', 'label' => 'Hindi' ],
[ 'data' => 'ta', 'label' => 'Tamil' ],
[ 'data' => 'bn', 'label' => 'Bangla' ],
]
] ),
[
'label' => 'ComboBoxInputWidget',
'align' => 'top'
]
);
- LabelWidget
new OOUI\LabelWidget( [
'label' => 'Label'
] );
- IconWidget
new OOUI\IconWidget( [
'icon' => 'search',
'label' => 'Search',
'invisibleLabel' => true,
'title' => 'Search icon'
] );
- IndicatorWidget
new OOUI\IndicatorWidget( [
'indicator' => 'required',
'label' => 'Required',
'invisibleLabel' => true,
'title' => 'Required indicator'
] );
- ProgressBarWidget
new OOUI\FieldLayout(
new OOUI\ProgressBarWidget( [
'progress' => 33
] ),
[
'label' => 'Progress bar',
'align' => 'top'
]
);