README

为Yii2框架提供有用的资源（图标、js和css组件）。

适用于自用项目！

包含

• 图标
  • FontAwesome：assets\FontAwesomeAsset，helpers\FA
  • WebHostingHub Glyphs：assets\WHHGAsset，helpers\WHHG
• 脚本
  • jQuery Migrate：assets\JQueryMigrateAsset
  • LazyLoad：assets\LazyLoadAsset，widgets\LazyLoadWidget
  • bLazy.js：assets\BLazyAsset，widgets\BLazyWidget
  • prettyLoader：assets\PrettyLoaderAsset，widgets\PrettyLoaderWidget
  • Owl Carousel：assets\OwlCarouselAsset，widgets\OwlCarouselWidget
  • Photobox：assets\PhotoboxAsset，widgets\PhotoboxWidget
  • Bootstrap Notify：assets\BootstrapNotifyAsset，依赖assets\AnimateCssAsset
  • Animate.css + jQuery插件AnimateCSS：assets\AnimateCssAsset
  • Owl Carousel：assets\OwlCarouselAsset
  • Slick：assets\SlickAsset
  • jQuery.mmenu：widgets\MmenuWidget
  • Sidr：widgets\SidrWidget
  • HTML5 Sortable：assets\SortableAsset
  • 安装

首选安装方式是通过composer。

运行以下命令

或将其添加到您的composer.json文件的require部分。

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

使用

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

或添加到您的基础资源类之一的$depends部分

使用

资产

对于包含的任何资产，只需注册它

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

或将它添加到您的某个基础资源类的$depends部分

/**
 * @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'
    ];
}

在这种情况下，您可以按自己的方式处理发布的文件。或者，您可以使用包含的控件。

控件

在视图中运行任何控件

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

或将其附加到AssetBundle::register方法中的另一个资产

/**
 * @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;
    }
}

请记住：您可以在*::widget函数中传递额外的设置。

prettyLoader

将CSS添加到您的项目

#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;
}

将HTML添加到您的布局

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

Owl Carousel

将轮播项包裹在具有类owl-carousel的容器中。

LazyLoad

如果您注册了AnimateCss Asset，则可以使用它的动画效果显示加载的图像

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

助手

图标助手

首先注册或添加到相应的资产依赖。然后添加助手到您视图的use部分

use \milano\helpers\FA;

并使用它

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

FontAwesome助手包含一些有用的图标设置，您可以通过第二个参数传入。在两个助手函数中，::icon函数的最后一个参数是为生成的<i>标签添加的额外类。