README

Lightning View是一个用于在PHP中生成HTML视图的库，是模板语言的替代品。

示例

您可以编写以下PHP代码

<?php

echo _container(
	_h1('Hello world'),

	_row()->class('text-center', 'mb-4')->content(
		_col('Row 1'),
		_col('Row 2')->size(6),
		_col('Row 3')
	),

	_inputgroup(
		_input(),
		_button('Button')
	)->class('mb-4'),

	_button('Button with tooltip')->tooltip('Tooltip content'),

	_button('Button with modal')
		->class('ml-4')
		->modal()
			->header('Modal title')
			->body('Modal content')
			->footer(_closebutton('Close')),

	_buttonGroup(
		_button('Button group'),
		_button('With dropdown')->dropdown(
			_button('Button 1'),
			_button('Button 2')
		)
	)->class('ml-4')
);

而不是编写以下HTML代码

<div class="container">
	<h1>Hello world</h1>

	<div class="row text-center mb-4">
		<div class="col">Row 1</div>
		<div class="col-6">Row 2</div>
		<div class="col">Row 3</div>
	</div>

	<div class="input-group mb-4">
		<input class="form-control" type="text" />
		<div class="input-group-append">
			<button class="btn btn-primary" type="button">Button</button>
		</div>
	</div>

	<button type="button" class="mb-4 btn btn-primary" data-toggle="tooltip" title="Tooltip content">
		Button with tooltip
	</button>

	<button class="btn btn-primary ml-4" data-toggle="modal" data-target="#modal-1" type="button">
		Button with modal
	</button>
	<div class="modal fade" id="modal-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Modal title</h5>
					<button class="close" data-dismiss="modal" type="button"><span>×</span></button>
				</div>
				<div class="modal-body">Modal content</div>
				<div class="modal-footer">
					<button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
				</div>
			</div>
		</div>
	</div>

	<div class="btn-group ml-4">
		<button class="btn btn-primary" type="button">Button group</button>
		<button class="btn dropdown-toggle btn-primary" data-toggle="dropdown" type="button">With dropdown </button>
		<div class="dropdown-menu">
			<button class="dropdown-item" type="button">Button 1</button>
			<button class="dropdown-item" type="button">Button 2</button>
		</div>
	</div>
</div>

使用元素

您可以通过调用具有该名称的函数来创建一个元素

<?php

$div = _div();
$span = _span();

echo $div . $span; // <div></div><span></span>

使用属性

您可以使用PHP属性或使用函数访问元素的HTML属性

<?php

$div = _div();

// Adding some classes
$div->class('bg-primary', 'text-white');

// Replacing the classes
$div->class = 'bg-secondary text-primary';

// Getting the classes (returns an array with all the classes)
dump($div->class); // ['bg-secondary', 'text-primary']

添加子元素

向元素添加子元素有两种方式

<?php

// Sending parameters to the constructor
echo _row(
	_col('Text 1'),
	_col('Text 2')
);

// Using a function : append(), prepend() or content() (to replace all the content)
echo _row()->content(
	_col('Text 2'),
	_col('Text 3')
)->append(
	_col('Text 4')
)->prepend(
	_col('Text 1')
);

这两种方法接受许多类型的参数。

<?php

// String
echo _div('Content');

// Object
echo _div(_span());

// Array
echo _div([_span(), _span()]);

// Mixed
echo _div(_span(), 'Content', [_span(), _span()]);

闭包

您可以使用闭包与元素交互。

<?php

// $row contains the row
echo _row(function ($row) use ($products) {
	foreach ($products as $product) {
		$row->append(
			_col($product->title)
		);
	}
});

// You can also use the exec() function
echo _row()->exec(function ($row) use ($products) {
	// ...
});

HTML实体

您传递给函数的所有字符串都将自动进行HTML实体编码。
如果您想发送HTML字符串并避免此编码，可以使用_html()函数。

<?php

echo _div('<span></span>');  // <div>&lt;span&gt&lt;/span&gt</div>;
echo _div(_html('<span></span>'));  // <div><span></span></div>

元素

链接

您可以使用blank()函数在新标签页中打开链接

<?php

_a('Link')->href('/link')->blank();

以获得

<a href="/link" target="_blank">Link</a>

按钮

按钮默认具有主色。
您可以使用color()和size()函数来自定义它们。

<?php

_button('Button')->color('secondary')->size('sm')->onclick('doSomething()');

以获得

<button class="btn btn-secondary btn-sm" onclick="doSomething()" type="button">Button</button>

带链接的按钮

如果您定义了href，则标签将自动更改为标签。

<?php

_button('Button')->href('/link');

以获得

<a class="btn btn-primary" href="/link">Button</a>

按钮组

<?php

_buttonGroup(
	_button('Button 1'),
	_button('Button 2')->color('info'),
	_button('Button 3')->color('secondary')
);

输入组

<?php

_inputgroup(
	_input(),
	_button('Button')
);

下拉菜单

<?php

_button('Dropdown')->dropdown(
	_h6('Header')
	'Simple text',
	_a('Link'),
	_hr(),
	_button('Button'),
);

其他元素中的下拉菜单

您可以在其他元素中轻松使用下拉菜单。

<?php

_buttonGroup(
	_button('Dropdown')->dropdown(
		_button('Button 1'),
		_button('Button 2')
	)
);

_inputgroup(
	_input(),
	_button('Dropdown')->dropdown(
		_button('Button 1'),
		_button('Button 2')
	)
);

_navbarnav(
	_a('Dropdown')->dropdown(
		_a('Link 1'),
		_a('Link 2')
	)
);

选择

select()函数显示一个下拉菜单，前面有一个标题，以及一个<input type="hidden" />标签来发送表单中的选择值。

<?php

_select([
	't' => 'Top',
	'b' => 'Bottom',
	'l' => 'Left',
	'r' => 'Right',
])->name('position')->title('Choose a position');

模态框

在按钮上调用modal()函数会返回一个模态框，该模态框将由此按钮触发。
您可以通过调用header()和footer()函数来自定义模态框的这些部分。

<?php

_button('Button with modal')
	->modal()
		->header('Modal title')
		->body('Modal content')
		->footer(_closebutton('Close'));

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件。