README

为构建响应式列布局的 Yii 2.x ListView

这对于模型/内容的组合式布局风格非常理想

特性

为几种常见的响应式布局提供默认设置
易于配置自定义布局
生成完全响应式的列；

安装

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

运行以下命令：

$ php composer.phar require circulon/yii2-columnlistview "*"

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

"circulon/yii2-columnlistview": "*"

基本用法

    use circulon\widgets\ColumnListView;
    
    echo ColumnListView::widget([
        'dataProvider' => $dataProvider,
        
        'columns' => 3, // default : 1
])

上述示例将为每个设备大小生成以下布局的列表视图

lg (桌面) 4列
md (平板) 3列
sm (手机) 2列
xs 1列

高级用法

自定义布局

创建自己的列布局非常简单。

列布局变量的设置如下

  'columns' => <column number>
  'columnsLayout' => [
    <column number> => [
      <column to break at> => <size to use>,
      <column to break at> => [<size to use>, <size to use>] 
      ...
    ],
    ...
  ],

注意：除非指定，SIZE_TINY ('xs') 默认为1列

通常我发现，为平板（'md' / SIZE_MEDIUM）布局列更容易，然后为大型和小型/超小型设备进行缩放。

查看源代码以获取更多尺寸布局。

自定义列的 CSS 类

例如，如果您想使用自定义 CSS 类渲染 3 列

  <div class="row">
    ...
    <div class="col-lg-4 col-xs-12" data-key="...">
      ...
    </div>
    ...
  </div>

您必须按以下方式设置您的小部件

  echo ColumnListView::widget([
    'dataProvider' => $dataProvider,
    'columns' => 3,
    'itemOptions' => [
      'class' => 'col-lg-4 col-xs-12',
    ],
  'itemView' => 'item',
  ]);

circulon / yii2-columnlistview

维护者

详细信息

README

特性

安装

基本用法

高级用法

自定义布局

自定义列的 CSS 类