circulon/yii2-columnlistview

Responsive columnar List View for Yii 2.x

v1.0.0 2015-06-28 12:49 UTC

Requires

• yiisoft/yii2: ~2.0.0

MIT

• Kieren Eaton

• responsive
• yii
• column
• yii2
• columns
• yii 2
• ListView
• list view
• circulon

README

Yii 2.x ListView for building a responsive column layout

This is ideal for portfolio style layout of model/s content

Features

• default settings for several common responsive layouts
• easily configurable for custom layouts
• generates fully responsive columns;

Installation

The preferred way to install this extension is through composer.

Either run

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

or add

"circulon/yii2-columnlistview": "*"

to the require section of your composer.json file.

Basic usage

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

The above example will generate a listview with the following layout per device size

• lg (Desktop) 4 columns
• md (Tablet) 3 columns
• sm (Phone) 2 columns
• xs 1 column

Advanced usage

Custom layout

Creating your own column layout is easy to do.

The setup of the columnsLayout var is as follows

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

NOTE: Unless otherwise specified SIZE_TINY ('xs') defaults to 1 column

Generally I find it easier to layout columns for Tablet ('md' / SIZE_MEDIUM) then scale up for large and down for small and tiny devices.

Check the source for additional size layouts.

Custom CSS classes for columns

For example, if you want to render 3 columns using a custom CSS class:

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

You must set up your widget as follows:

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