README

为轻量级和模块化前端框架UiKit提供的Widgets和资源

安装yii2-uikit扩展

安装此扩展的首选方式是通过composer。由于Uikit 3 RC版本，您必须在项目的composer.json中设置以使用此包。

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

设置完成后，只需运行

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

或添加

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

到您的composer.json文件的require部分，并开始composer update

资源使用示例

例如，在任意视图文件中包含主UiKit css & js文件

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

ActiveForm改进示例

ActiveForm的水平布局

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

要获取网格模式的列布局，可以修改以下选项

$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"
    ],
]);

单字段的不同选项

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

ActiveField附加方法

以下代码将生成问题图标(?), 放在标签文本之后，信息通过uk-tooltip显示

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

这将生成<i uk-icon="lock"></i>，放在div.uk-inline包裹的输入字段内

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

图标可以放在输入字段的右侧或通过此设置更改为非uikit图标

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

Alert小部件

Alert渲染一个alert uikit组件。

例如，

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

以下示例将在alert框内显示[[begin()]]和[[end()]]调用之间的内容

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

echo 'Say hello...';

Alert::end();

以及AlertFlashes小部件，用于自动调用存储在会话中的现有闪存消息的alert小部件

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