README

为 Yii2 渲染 MixItUp 3 小部件。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一：

php composer.phar require dominus77/yii2-mixitup3-widget "*"

或将以下内容添加到您的 composer.json 文件的 require 部分：

"dominus77/yii2-mixitup3-widget": "*"

使用方法

扩展安装后，只需在代码中使用即可：

<?= \dominus77\mixitup3\MixItUp::widget([
    'containerId' => 'mix_container',
    'content' => $this->render('@vendor/dominus77/mixitup3/views/basic'), // example
    'clientOptions' => [
        'animation' => [
            'enable' => true,
        ],
        'selectors' => [
            'target' => '.mix',
            'control' => '[data-mixitup-control]',
        ],
    ],
]); ?>

views\basic.php

<?php

use dominus77\mixitup3\assets\ExampleBasicAsset;

ExampleBasicAsset::register($this);
?>

<div id="mix_controls">
    <button type="button" class="control" data-mixitup-control data-filter="all" >All</button>
    <button type="button" class="control" data-mixitup-control data-filter=".green" >Green</button>
    <button type="button" class="control" data-mixitup-control data-filter=".blue" >Blue</button>
    <button type="button" class="control" data-mixitup-control data-filter=".pink" >Pink</button>
    <button type="button" class="control" data-mixitup-control data-filter="none" >None</button>

    <button type="button" class="control" data-mixitup-control data-sort="default:asc">Asc</button>
    <button type="button" class="control" data-mixitup-control data-sort="default:desc">Desc</button>
    
    <div class="control text" data-mixitup-control data-sort="random">Shuffle</div>
</div>

<div id="mix_container">
    <div class="mix green"><span>1</span></div>
    <div class="mix green"><span>2</span></div>
    <div class="mix blue"><span>3</span></div>
    <div class="mix pink"><span>4</span></div>
    <div class="mix green"><span>5</span></div>
    <div class="mix blue"><span>6</span></div>
    <div class="mix pink"><span>7</span></div>
    <div class="mix blue"><span>8</span></div>

    <div class="gap"></div>
    <div class="gap"></div>
    <div class="gap"></div>
</div>

更多信息

请参阅 MixItUp 3

许可协议

BSD 许可证（BSD）。请参阅 许可文件 获取更多信息。