Skip to content

内部块

内部块是 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>

提示

当使用块相关指令时,传入的所有属性相关指令最终只会影响所属的部件实例,与实际的块无关。

https://zentao.net