as-milano/yii2-assets

Useful assets (icons, js and css components) for Yii2 Framework.

Maintainers

Details

gitlab.com/NecroMan/yii2-assets

Installs: 302

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Forks: 1

Language:CSS

Type:yii2-extension

dev-master 2018-08-29 21:03 UTC

Requires

  • bower-asset/animate.css: ~3.5
  • bower-asset/blazy: ~1.6
  • bower-asset/fontawesome: ~4.6
  • bower-asset/html.sortable: ~0.4
  • bower-asset/jquery-migrate: ~1.2
  • bower-asset/jquery.lazyload: ~1.9
  • bower-asset/jquery.mmenu: ~6.1
  • bower-asset/jquery.nicescroll: ~3.6
  • bower-asset/owl.carousel: ~2.0
  • bower-asset/remarkable-bootstrap-notify: ~3.1
  • bower-asset/sidr: ~2.2
  • bower-asset/slick-carousel: ~1.5
  • yiisoft/yii2: ~2.0

BSD-3-Clause 705fbe0b0a8401f7d56adf54c43c40148aca8fba

This package is auto-updated.

Last update: 2019-12-29 03:25:11 UTC

README

Useful assets (icons, js and css components) for Yii2 Framework.

OPTIMIZED FOR OWN PROJECTS!

Includes:

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist as-milano/yii2-assets "*"

or add

"as-milano/yii2-assets": "*"

to the require section of your composer.json file.

Usage

Assets

For any asset included just register it:

\milano\assets\PrettyPhotoAsset::register($view);

or add it to $depends section of one of your base asset classes:

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    ...
    
    public $depends = [
        ...
        'milano\assets\FontAwesomeAsset',
        'milano\assets\PrettyLoaderAsset',
        'milano\assets\PrettyPhotoAsset'
    ];
}

In this case you can handle published files in your own way. Or you can use included widgets.

Widgets

Run any widget in a view

\milano\widgets\PrettyLoaderWidget::widget([
    'blockContent' => false
]);

or attach it to another asset in AssetBundle::register method

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    ...
    
    public static function register($view)
    {
        $asset = parent::register($view);

        \milano\widgets\PrettyLoaderWidget::widget();
        \milano\widgets\PrettyPhotoWidget::widget();

        return $asset;
    }
}

Remember: you can pass additional settings in *::widget function.

prettyLoader

Add CSS to your project

#loaderBackground {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
}

#loaderIcon {
    font-size: 60px;
    line-height: 60px;
    font-weight: bold;
    display: none;
    position: fixed;
    top: 20px;
    right: 10px;
    z-index: 2000;
    color: #EEE;
}

Add HTML to your layout

<div id="loaderIcon"><i class="fa fa-spinner fa-spin"></i></div>
<div id="loaderBackground"></div>

Owl Carousel

Wrap carousel items in container with class owl-carousel.

LazyLoad

If you register AnimateCss Asset you can use it's animation effects to show loaded images:

LazyLoadWidget::widget([
    'selector' => 'img[data-original]',
    'pluginSettings' => [
        'effect' => 'lazyAnimate',
        'effect_speed' => 'zoomIn' // Choose effect you want
    ]
]);

Helpers

Icon helpers

First register or add to dependency corresponding asset. Then add helper to use section of your view:

use \milano\helpers\FA;

and use it:

FA::icon('mars', [FA::SIZE_2X, FA::ROTATE_90]);

FontAwesome helper includes some useful icon setting you can pass in the second parameter. Last parameter of ::icon function in both helpers is additional classes for generated <i> tag.