Uikit 3 extensions for Yii2

Widgets & assets for a lightweight and modular front-end framework UiKit

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.

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

After this settings, just run:

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

or add

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

to the require section of your composer.json file and start composer update

Assets usage exaple:

For example, including main UiKit css & js files in any view files

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

ActiveForm improvements examples:

Horizontal layout for ActiveForm

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

To get a column layout in grid mode you can modify those options

$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

$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

$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

$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

$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.

For example,

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:

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

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