worstinme/yii2-uikit

Uikit for Yii2

Uikit 3 extensions for Yii2

Widgets & assets for a lightweight and modular front-end framework UiKit, _(*1)

Installation of yii2-uikit Extension

The preferred way to install this extension is through composer. You have to set in your project's composer.json to use this package, because of Uikit 3 RC version., _(*2)

"minimum-stability": "dev",
"prefer-stable":true,

After this settings, just run:, _(*3)

composer require --prefer-dist worstinme/yii2-uikit:"dev-master"

or add, _(*4)

"worstinme/yii2-uikit": "dev-master"

to the require section of your composer.json file and start composer update, _(*5)

Assets usage exaple:

For example, including main UiKit css & js files in any view files, _(*6)

\worstinme\uikit\Asset::register($this);
\worstinme\uikit\IconAsset::register($this);

ActiveForm improvements examples:

Horizontal layout for ActiveForm, _(*7)

$form = ActiveForm::begin([
    'layout'=>'horizontal', // also available 'stacked' option
]);

To get a column layout in grid mode you can modify those options, _(*8)

$form = ActiveForm::begin([
    'layout'=>'stacked',
    'grid'=>true,
    'options'=>['class'=>'uk-child-width-1-2@m uk-form-small uk-grid-match'],
    'fieldConfig' => [
        'width' => "1-3@m"
    ],
]);

Different options for single field, _(*9)

$form->field($model,'attribute',['width'=>'auto@m']);

ActiveField additional methods:

The code below will generate question icon (?), placed after label text, with information showed with uk-tooltip, _(*10)

$form->field($model,'attribute')->label('label')->info('Additional info to the label of this field');

This will generate <i uk-icon="lock"></i> inside input field wrapped by div.uk-inline, _(*11)

$form->field($model,'attribute')->icon('lock');

Icon can be placed in the right side of input field or changed to non uikit icon by this settings, _(*12)

$form->field($model,'attribute')->icon('<i class="fas fa-user"></i>',['flip'=>true,'uikit'=>false,'tag'=>'a','href'=>'http://example.com']);

Alert widgets:

Alert renders an alert uikit component., _(*13)

For example,, _(*14)

echo Alert::widget([
  'type'=>'primary',
  'body' => 'Say hello...',
]);

The following example will show the content enclosed between the [[begin()]] and [[end()]] calls within the alert box:, _(*15)

Alert::begin([
  'type' => 'warning',
  'closeButton'=>false,
]);

echo 'Say hello...';

Alert::end();

And the AlertFlashes widget to automatically call alert widgets for existing flash messages stored in session, _(*16)

\worstinme\uikit\extend\AlertFlashes::widget();