README

这是一个用于Laravel 5的HTML元素构建器Composer包，简化了创建活动、选中或隐藏元素的流程。

注意：对于Laravel 4，您可以使用 版本 0.3.3。

Elemental是一个简单的HTML元素创建库，主要用于创建动态元素（例如，“活动”、“选中”或“隐藏”类的元素，这些元素依赖于某个变量作为它们的触发器）。

Elemental消除了您在标记中执行此类操作的需要

<div id="content"<?php if ($contentHidden) echo ' class="hidden"'; ?>>
	...
</div><!-- /#content -->

相反，您将能够使用以下简单语法

<?php echo HTML::openHiddenArea('div', '#content', $contentHidden); ?>
	...
<?php echo HTML::closeArea('div', '#content'); ?>

• 安装
• 创建动态元素
• 从复杂数组创建表格

安装

要安装Elemental，请确保已将 regulus/elemental 添加到Laravel 5的 composer.json 文件中。

"require": {
	"regulus/elemental": "0.5.*"
},

然后从命令行运行 php composer.phar update。Composer将安装Elemental软件包。现在，您只需在 config/app.php 中注册服务提供者并设置Elemental的别名即可。将以下内容添加到 providers 数组

Regulus\Elemental\ElementalServiceProvider::class,

并将以下内容添加到 aliases 数组

'HTML' => Regulus\Elemental\Facade::class,

您可以使用 'Elemental' 或其他别名，但出于简单起见，建议使用 'HTML'。Elemental现在可以使用了。

创建动态元素

创建可能具有“隐藏”类的动态元素

//create opening tag entirely with Elemental
echo HTML::openHiddenArea('div', ['id' => 'side-content', 'class' => 'content'], isset($sideContentHidden));

{{-- set the hidden class depending on a boolean value within the opening tag --}}
<div id="side-content"<?=HTML::hiddenArea(isset($sideContentHidden))?>>
	<p>Side Content</p>
</div>

{{-- set the hidden class depending on a boolean value within the opening tag's class attribute --}}
<div id="side-content" class="content<?=HTML::hiddenArea(isset($sideContentHidden), true)?>"">
	<p>Side Content</p>
</div>

openHiddenArea() 的第二个参数可以包含一个用于单个类或ID的字符串，如 ".class" 或 "#id"，或者可以包含一个包含您希望使用的所有属性的数组的所有属性。

您可以使用 openActiveArea() 和 openSelectedArea()，它们分别添加“活动”和“选中”类。所有这些类都使用基本方法 openDynamicArea()，该方法将类名作为其第四个参数。这三个方法使用它只是作为创建一些常见动态元素的简写形式。此外，对于设置开标签内的类，您还有 activeArea()、selectedArea() 和 dynamicArea()。

关闭元素

echo HTML::closeArea('div');

此方法存在是为了完整性，也可以防止某些IDE中语法高亮的错误。如果您在PHP中打开HTML元素，您应该使用PHP创建您的关闭标签。您可以包括元素的类（".class"）或ID（"#id"），将其作为第二个参数，以便在关闭标签的行中添加HTML注释。这有助于在源代码中查找元素的打开和关闭位置。

关闭元素并添加识别注释

echo HTML::closeArea('div', '#content');

上述代码输出以下内容

</div><!-- /#content -->

从复杂数组创建表格

您可以使用Elemental创建数据表标记，包括格式化的标题、表格体单元格、图标等。通过使用示例来说明这是如何工作的，该示例利用了大多数 table() 方法功能。

$usersTable = [
	'table' => [
		'class'         => 'table-striped table-bordered table-hover table-sortable',
		'noDataMessage' => trans('fractal::messages.no_items', ['items' => Str::plural(trans('fractal::labels.user'))]),
	],
	'columns' => [
		[
			'attribute' => 'id',
			'sort'      => true,
		],
		[
			'attribute' => 'username',
			'class'     => 'username',
			'sort'      => true,
		],
		[
			'attribute' => 'name',
			'method'    => 'getName()',
			'sort'      => 'last_name',
		],
		[
			'label'     => 'Email',
			'elements'  => [
				[
					'text' => ':email',
					'href' => 'mailto::email',
				],
			],
			'sort'      => 'email',
		],
		[
			'label'     => 'Role(s)',
			'method'    => 'roles()',
			'attribute' => 'name',
			'type'      => 'list',
		],
		[
			'label'     => 'Activated',
			'method'    => 'isActivated()',
			'type'      => 'boolean',
			'sort'      => true,
		],
		[
			'label'     => 'Banned',
			'method'    => 'isBanned()',
			'type'      => 'boolean',
			'class'     => 'banned',
			'sort'      => true,
		],
		[
			'label'     => 'Last Updated',
			'attribute' => 'updated_at',
			'type'      => 'dateTime',
			'sort'      => true,
		],
		[
			'label'     => 'Actions',
			'class'     => 'actions',
			'elements'  => [
				[
					'icon'       => 'edit',
					'uri'        => config('cms.base_uri').'/users/:username/edit',
					'attributes' => [
						'title' => trans('fractal::labels.edit_user'),
					],
				],
				[
					'icon'           => 'ban-circle',
					'class'          => 'action-item ban-user red',
					'classModifiers' => [
						'hidden' => [
							'isBanned()' => true,
						],
						'invisible' => [
							'id' => 1,
						],
					],
					'attributes' => [
						'data-item-id'         => ':id',
						'data-item-name'       => ':username',
						'data-action-function' => 'actionBanUser',
						'data-action-message'  => 'confirmBanUser',
						'title'                => trans('fractal::labels.ban_user'),
					],
				],
				[
					'icon'           => 'ok-circle',
					'class'          => 'action-item unban-user',
					'classModifiers' => [
						'hidden' => [
							'isBanned()' => false,
						],
						'invisible' => [
							'id' => 1,
						],
					],
					'attributes' => [
						'data-item-id'         => ':id',
						'data-item-name'       => ':username',
						'data-action-function' => 'actionUnbanUser',
						'data-action-message'  => 'confirmUnbanUser',
						'title'                => trans('fractal::labels.unban_user'),
					],
				],
				[
					'icon'           => 'remove',
					'class'          => 'action-item red',
					'classModifiers' => [
						'invisible'    => [
							'id' => 1,
						],
					],
					'attributes'     => [
						'data-item-id'        => ':id',
						'data-item-name'      => ':username',
						'data-action'         => 'delete',
						'data-action-type'    => 'delete',
						'data-action-message' => 'confirmDelete',
						'title'               => trans('fractal::labels.delete_user'),
					],
				],
			],
		],
	],
	'rows' => [
		'idPrefix'       => 'user',
		'classModifiers' => [
			'warning' => [
				'isActivated()' => false,
			],
			'danger' => [
				'isBanned()' => true,
			],
		],
	],
];

//echo full table markup including headings
echo HTML::table($usersTable, $users);

//echo table body only, which is useful for returning an updated body by AJAX to replace the existing <tbody> element
echo HTML::table($usersTable, $users, true);

此示例取自Fractal Laravel 5 CMS软件包，其中包含Elemental表格功能的全能示例。Fractal包含原始渲染的表格以及通过AJAX返回到页面的渲染表格主体，并根据搜索函数的结果更新表格数据。