User:Jayprakash12345/OOUI-Widget

List of Widget

• ButtonWidget
• ButtonInputWidget
• ButtonGroupWidget
• CheckboxInputWidget
• CheckboxMultiselectInputWidget
• RadioInputWidget
• RadioSelectInputWidget
• TextInputWidget
• MultilineTextInputWidget
• SearchInputWidget
• DropdownInputWidget
• ComboBoxInputWidget
• LabelWidget
• IconWidget
• IndicatorWidget
• ProgressBarWidget

Layouts:

• FieldLayout
• ActionFieldLayout
• FieldsetLayout
• FormLayout
• PanelLayout
• HorizontalLayout

Examples

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'
    ]
);