Виджет Uikit3 для Yii2 - Инструкция

Установка через 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

    use ruwmapps\yii2_uikit3\Slideshow;

    Пример слайд шоу без оверлея


      • echo Slideshow::widget(['path' => '/img/slideshow/','ukSlideshow' => 'animation:fade; autoplay:true; autoplay-interval: 3000','downLi' => 1]);

      Пояснения

      2 способа реализации слайд-шоу без оверлея, path или images

      • подгрузка всех картинок из папки
        echo Slideshow::widget(['path' => '/img/slideshow/', //тут остальные необязательные параметры]);
      • подгрузка строго указанных картинок
        echo Slideshow::widget(['images' => ['/img/slideshow/dark.jpg','/img/slideshow/light.jpg'], //тут остальные необязательные параметры]);

      Пример слайд шоу с оверлеем

        • Заголовок1

          Текст к первой картинке.

        • Заголовок2

          Текст ко второй картинке.

        • Заголовок3

          Текст к третьей картинке.

        • Заголовок4

          Текст к четвертой картинке.


      • Slideshow::widget(['items' => [
        ['img'=>'/img/slideshow/dark.jpg','overlay'=>'<h3 class="uk-margin-remove">Заголовок1</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">Заголовок2</h3><p class="uk-margin-remove">Текст ко второй картинке.</p>','classOver'=>'uk-overlay uk-overlay-primary uk-position-bottom uk-text-center'],
        ['img'=>'/img/slideshow/photo.jpg','overlay'=>'<h3 class="uk-margin-remove">Заголовок3</h3><p class="uk-margin-remove">Текст к третьей картинке.</p>','classOver'=>'uk-overlay uk-overlay-default uk-position-bottom-left uk-position-small uk-dark'],
        ['img'=>'/img/slideshow/dark.jpg','overlay'=>'<h3 class="uk-margin-remove">Заголовок4</h3><p class="uk-margin-remove">Текст к четвертой картинке.</p>','classOver'=>'uk-position-center uk-position-small uk-text-center uk-light'],
        ]]);

      Пояснения

      Вместо path или images используется обязательный параметр 'items'=>[] , внутри этого массива перечисляются массив(ы) каждый из которых формирует 1 слайд , каждый подмассив содержит 3 параметра 'img' , 'overlay' , 'classOver'

      Slideshow::widget(['items' => [//тут массив или массивы с 3 параметрами], //тут остальные необязательные параметры]);
      • img - путь до картинки
        'img'=>'/img/slideshow/dark.jpg'
      • overlay - содержимое оверлея (можно использовать HTML код)
        'overlay'=>'<h3 class="uk-margin-remove">Заголовок3</h3><p class="uk-margin-remove">Текст к третьей картинке.</p>'
      • classOver - содержит классы блока с оверлеем, по умолчанию 'uk-position-bottom uk-position-medium uk-text-center uk-light'
        'classOver'=>'uk-position-center uk-position-small uk-text-center uk-dark'

      Остальные необязательные параметры :

      • downLi - точки навигации снизу, по умолчанию выключено = 0
        'downLi' => 1
      • ukSlideshow - параметры атрибута uk-slideshow родительского div
        'ukSlideshow' => 'animation:fade; autoplay:true; autoplay-interval: 3000'
      • classDiv - класс внутреннего div, по умолчанию 'uk-position-relative uk-visible-toggle'
        'classDiv' => 'uk-position-relative uk-visible-toggle uk-light'

      * доп. инфо по всем доступным классам и параметрам для настройки эффектов, анимации и стилей см. getuikit.com/docs/slideshow

    • Верхняя панель(NavBar), меню(Nav), Offcanvas

      Подключаем файл NavBar

      use ruwmapps\yii2_uikit3\NavBar;

      Подключаем файл Nav

      use ruwmapps\yii2_uikit3\Nav;

      Подключаем файл Offcanvas

      use ruwmapps\yii2_uikit3\Offcanvas;

      Пример реализации верхней панели

      Можно сузить страницу, чтобы увидеть кнопку и работу offcanvas


      • // в файле шаблона после вызова $this->beginBody(); вызвать виджет NavBar
        NavBar::begin([
           'brandLabel' => '<img src="/img/logo.png">',
           'brandUrl' => '/',
           'offcanvas' => 1,
           'offcanvasTextMenu' => 'Меню',
           'idOffcanvas' => 'offcanvas-test',
        ]);
        // внутри виджета navbar вызовем виджет меню
        echo Nav::widget([
           'items' => [
              ['label' => 'Ссылка 1', 'url' => ['/'],'linkOptions'=>['class'=>'classtest1','data'=>'datatest1']],
              ['label' => 'Ссылка 2', 'url' => ['/'],'linkOptions'=>['class'=>'classtest2','data'=>'datatest2'],
                 'items' => [
                    ['label' => 'подменю1', 'url' => ['/']],
                    ['label' => 'подменю2', 'url' => ['/']],
                 ]
              ],
           ],
           'navbar' => true // при использовании Nav внутри NavBar
        ]);
        // закрываем NavBar
        NavBar::end();



        //.....
        //тут остальное содержимое страницы
        //.....


        //Перед вызовом закрытия подгружаемого контента $this->endBody() , вызвать виджет Offcanvas
        echo Offcanvas::widget([
           'items' => [
              ['label' => 'Ссылка 1', 'url' => ['/']],
              ['label' => 'Ссылка 2', 'url' => ['/']],
           ],
           'idOffcanvas' => 'offcanvas-test',
        ]);
        // далее идет $this->endBody()

      Пояснения

      Необязательные параметры для NavBar
      • brandLabel содержимое логотипа(ссылка на изображение или просто текст), по умолчанию = false
      • brandUrl ссылка логотипа, по умолчанию = false
      • classLinkLogo класс ссылки логотипа, по умолчанию = 'uk-navbar-item uk-logo'
      • offcanvas включить или нет Offcanvas, для включения передать значение 1, по умолчанию = 0
      • offcanvasTextMenu текст возле кнопки для раскрытия Offcanvas, по умолчанию = 'menu'
      • classOffcanvasLink класс ссылки Offcanvas кнопки, по умолчанию = 'uk-navbar-toggle uk-navbar-right uk-hidden@m'
      • classNavBar класс меню определяющий расположение в блоке, по умолчанию = 'uk-navbar-center uk-visible@m'
      • idOffcanvas ид блока offcanvas который надо раскрывать, по умолчанию = 'offcanvas'
      Параметры для Nav
        Обязательные параметры для Nav
      • items массив пунктов меню с параметрами
        • Обязательные подпараметры для параметра items
        • label наименование пункта меню
        • url ссылка пункта меню
        • Не обязательные подпараметры для параметра items
        • linkOptions массив доп атрибутов для тэга <a>
        • items дочерний массив подменю, правила использования параметрами такие-же, как и у родительского
      Необязательныt параметры для Nav
      • navbar расположено ли меню в navBar по умолчанию = false