README

为 Laravel 5 开发的 HTML 元素构建器 composer 包，简化了创建活动、选中或隐藏元素的流程。

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

Elemental 是一个简单的 HTML 元素创建库，主要用于创建动态元素（例如，"active"、"selected" 或 "hidden" 类的元素，这些元素的触发依赖于某个变量）。

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 现已准备好使用。

创建动态元素

创建可能具有 "hidden" 类的动态元素

//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()，它们分别添加 "active" 和 "selected" 类。所有这些类都使用基方法 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 返回到页面并基于搜索函数结果更新表格数据的渲染表体。

regulus / elemental

维护者

详细信息

README

安装

创建动态元素

从复杂数组创建表格