README

安装

Composer

composer require jasonroyle/li3_element

Git

git submodule add https://github.com/jasonroyle/li3_element.git libraries/li3_element

启用库

通过在 app/config/bootstrap/libraries.php 中添加以下内容使应用了解库。

Libraries::add('li3_element');

渲染

渲染一个元素。

参数

• $element (字符串)
• $data (数组，可选)

返回

渲染的 HTML (字符串)

网格

遍历项目并逐个渲染元素。元素被包裹在行和列 div 中，并作为渲染的 HTML 字符串返回。

参数

• $element (字符串)
• $data (数组)
• $options (数组，可选)

返回

渲染的 HTML (字符串)

示例

默认情况下，数据数组的第一个值将被用作要遍历的项目。

以下示例遍历帖子，将数据数组中的帖子值替换为单个帖子，并将数据传递给元素进行渲染。

echo $this->element->grid('post', ['post' => $posts]);

要向每个元素传递更多数据，请简单地将数据数组附加到后面。

echo $this->element->grid('post', [
	'post' => $posts,
	'foo' => $foo,
	'bar' => $bar
]);

设置 columns、offset 和 max 选项以控制项目的显示方式。

以下示例每行渲染 3 个帖子，忽略前 2 个帖子，并将显示的帖子数量限制为 9。

echo $this->element->grid('post', ['post' => $posts], [
	'columns' => 3,
	'offset' => 2,
	'max' => 9
]);

应用到行和列的属性。

以下示例将 class="row" 属性应用到每一行，将 class="column" 属性应用到每一列。

echo $this->element->grid('post', ['post' => $posts], [
	'columns' => 5,
	'row' => ['class' => 'row'],
	'column' => ['class' => 'column']
]);

以下示例与上一个示例相同，除了每个行的第一列应用了属性 class="column first"，每个行的最后一列应用了属性 class="column last"。

echo $this->element->grid('post', ['post' => $posts], [
	'columns' => 5,
	'row' => ['class' => 'row'],
	'column' => ['class' => 'column'],
	'first_column' => ['class' => 'column first'],
	'last_column' => ['class' => 'column last']
]);

以下示例与上一个示例相同，除了最后一行只有一个列。该列应用了属性 class="column first last"。

echo $this->element->grid('post', ['post' => $posts], [
	'columns' => 5,
	'max' => 11,
	'row' => ['class' => 'row'],
	'column' => ['class' => 'column'],
	'first_column' => ['class' => 'column first'],
	'last_column' => ['class' => 'column last'],
	'first_and_last_column' => ['class' => 'column first last']
]);