ruwmapps/yii2_uikit3

为Yii2的Uikit 3

维护者

详细信息

github.com/ruwmapps/yii2_uikit3

源代码

问题

安装: 111

依赖: 1

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 2

公开问题: 0

语言:CSS

类型:yii2-extension

0.0.7 2020-03-18 12:31 UTC

Requires

MIT 1150c907e0a81f324784a266ac13fea5878bd6b2

widgetsyii2uikit3

This package is auto-updated.

Last update: 2024-09-24 17:12:13 UTC

README

来自UiKit3的组件和样式

安装

通过composer安装。执行以下命令

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

或

composer require "ruwmapps/yii2_uikit3:*"

连接UiKit3框架的基本CSS和JS文件

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

Slideshow使用示例

连接Slideshow.php文件

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

两种方式实现没有覆盖层的Uikit3 Slideshow示例

  • 指定图片文件夹的完整路径
<?= 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