circulon/yii2-columnlistview

Responsive columnar List View for Yii 2.x

yii2-columnlistview

Yii 2.x ListView for building a responsive column layout, _(*1)

This is ideal for portfolio style layout of model/s content, _(*2)

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., _(*3)

Either run, _(*4)

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

or add, _(*5)

"circulon/yii2-columnlistview": "*"

to the require section of your composer.json file., _(*6)

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, _(*7)

Advanced usage

Custom layout

Creating your own column layout is easy to do., _(*8)

The setup of the columnsLayout var is as follows, _(*9)

  '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, _(*10)

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., _(*11)

Check the source for additional size layouts., _(*12)

Custom CSS classes for columns

For example, if you want to render 3 columns using a custom CSS class:, _(*13)

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

You must set up your widget as follows:, _(*14)

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