Skip to content

Подключение фреймворка UiKit3 для Yii2

License

Notifications You must be signed in to change notification settings

ruwmapps/yii2_uikit3

Repository files navigation

yii2-uikit3 Расширение для Yii2

Виджет и стили от фреймворка UiKit3

Установка

Установка через composer. Выполнить команду

php composer.phar require --prefer-dist ruwmapps/yii2_uikit3

или

composer require "ruwmapps/yii2_uikit3:*"

Подключение основных файлов css и js фреймворка UiKit3

\ruwmapps\yii2_uikit3\UikitAsset::register($this);

Примеры использования Slideshow:

Подключение файла Slideshow.php

<? use ruwmapps\yii2_uikit3\widgets\Slideshow; ?>

Пример Uikit3 Slideshow без оверлея 2мя способами:

  • указания полного пути к папке с картинками
<?= Slideshow::widget(['path' => '/img/slideshow/','ukSlideshow' => 'animation:fade; autoplay:true; autoplay-interval: 3000','downLi' => 1]); ?>
  • или указания конкретных изображений
<?= Slideshow::widget(['images' => ['/img/slideshow/dark.jpg','/img/slideshow/light.jpg'],'ukSlideshow' => 'animation:fade; autoplay:true; autoplay-interval: 3000','downLi' => 1]); ?>

Пример Uikit3 Slideshow с оверлеем:

<?= Slideshow::widget(['items' => [
                    ['img'=>'/img/slideshow/dark.jpg','overlay'=>'<h3 class="uk-margin-remove">Заголовок</h3><p class="uk-margin-remove">Текст к первой картинке.</p>','classOver'=>'uk-position-bottom uk-position-medium uk-text-center uk-light'],
                    ['img'=>'/img/slideshow/light.jpg','overlay'=>'<h3 class="uk-margin-remove">Заголовок</h3><p class="uk-margin-remove">Текст ко второй картинке.</p>','classOver'=>'uk-overlay uk-overlay-primary uk-position-bottom uk-text-center'],
                ]
                ]); ?>

Демо + инструкции Yii2.wmapps.ru