内部块
内部块是 zin 部件的一种特殊属性,它允许用户设置部件内部不同的内容区域,这样可以方便的将内容插入到指定的位置。
设置块内容
通常向部件内部传递的子内容会被部件一起进行处理,但有时一些自定义部件允许用户设置不同区块内的子内容,这时就可以通过设置内部块的形式实现。
一般使用
通过指令 to()
方法来设置部件指定内部块的内容。该方法定义如下:
php
to(string $blockName, mixed ...$args): object
其中参数 $blockName
为要设置的块名称,其余参数为要添加到该快内部的内容。下面举例说明:
php
page
(
to('head', css('body {font-size: 12px}')),
css('h1 {font-size: 32px}'),
h1('Hello, zin')
);
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<style>body {font-size: 12px}</style>
</head>
<body>
<style>h1 {font-size: 32px}</style>
<h1>Hello, zin</h1>
</body>
</html>
在上面的例子中使用了两次 css()
调用,第一次是作为 to()
指令参数,将指定的 CSS 样式通过 <style>
元素插入到 <head>
元素内部,第二次直接作为 page()
部件方法参数,将 CSS 样式插入到了 <body>
元素内部。之所以能够实现上述功能是因为 page()
部件定义了一个内部块,名称为 head
,这样可以方便的将内容明确插入到 HTML 头部。
静态方法
在 zin 中还在静态类 to
上提供了静态方法来插入内容到指定的内部块,其中方法名即为块名称。上面的例子使用静态方法的方式为:
php
page
(
to::head(css('body {font-size: 12px}')),
css('h1 {font-size: 32px}'),
h1('Hello, zin')
);
预置块
zin 中的所有部件都拥有三个特殊的内部块,分别为:
块名称 | 说明 |
---|---|
children | 默认块,所有未指定名称的内容都会添加到默认块内 |
before | 前置块,添加到此块内的内容最终输出的 HTML 的前面 |
after | 后置块,添加到此块内的内容最终输出的 HTML 的后面 |
其中默认块无需调用块指令指定,即如下的两个 div 都将添加到默认块中进行输出:
php
div
(
h1('hello, zin'),
to::children(h1('hello, zin'))
);
html
<div>
<h1>hello, zin</h1>
<h1>hello, zin</h1>
</div>
在 zin 中分别提供了指令方法 before()
和 after()
来分别向前置块和后置块内添加内容,他们的定义如下:
php
/* 添加内容到前置块 */
before(mixed ...$args): object
/* 添加内容到后置块 */
after(mixed ...$args): object
上述方法方法都接受一个或更多的参数,每个都将作为块内容添加。下面举例说明:
php
div
(
before(h1('zin')),
'A new way to write html with php',
after
(
p('zin is awesome'),
button('Learn more')
)
);
html
<h1>zin</h1>
<div>
A new way to write html with php
</div>
<p>zin is awesome</p>
<button type="button">Learn more</button>
提示
当使用块相关指令时,传入的所有属性相关指令最终只会影响所属的部件实例,与实际的块无关。