README

http://nerburish.com/yii2-matchheight-listview-widget/ en 🇪🇸

ListView小部件通过使用Jquery MatchHeight.js（《http://brm.io/jquery-match-height/》）进行了改进

演示截图：

安装

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

运行

php composer.phar require --prefer-dist nerburish/yii2-match-height-view "dev-master"

或添加

"nerburish/yii2-match-height-view": "dev-master"

到您的composer.json文件的require部分。

用法

用法与默认ListView Widget（《https://yiiframework.cn/doc-2.0/yii-widgets-listview.html》）类似

您只需要一个dataProvider并为您的模型准备一个item模板。

在clientOptions中，您可以传递MatchHeight.js选项以修改插件行为（请参阅《https://github.com/liabru/jquery-match-height#options》）

您还可以附加一个cssFile来设置网格样式。

示例

我们有一个这个模型

class MyModel extends \yii\base\Theme
{
	public $id;
	
	public $title;
	
	public $description;
}

以及这个名为_item.php的item模板

<h3><?= $model->title ?></h3>
<p><?= $model->description ?></p>

然后在我们的视图中，我们运行小部件

<?php echo \nerburish\matchheight\MatchHeightView::widget([
	'dataProvider' => $dataProvider,
	'itemView' => '_item',
	'cssFile' => [
		"@web/css/grid-demo.css"		
	]
]) ?>

用于演示的CSS

/* ---- grid ---- */
.grid {
  box-sizing: border-box;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */
.grid-item {
  width: 24%;
  padding: 10px;
  margin: 0.5%;
  float: left;
  background: #e4e4e4;
  border-radius: 5px;
}

您可能还对Masonry.js ListView小部件感兴趣：《https://github.com/nerburish/yii2-masonry-view》

nerburish / yii2-match-height-view

维护者

详细信息

README

安装

用法