HTML生成器

v0.1.5 2019-12-05 18:02 UTC

This package is auto-updated.

Last update: 2024-09-06 05:19:50 UTC


README

用于生成HTML代码的PHP库

安装

注意,需要PHP ~7.2

composer require oscarotero/html

用法

namespace Html;

//Create a div
$div = div();

//Render the div
echo $div;
//<div></div>

//Create a div with text content
echo div('Hello world');
//<div>Hello world</div>

//Create a div with more text content
echo div('Hello', ' world');
//<div>Hello world</div>

//HTML entities are escaped
echo div('Hello', ' <world>');
//<div>Hello &lt;world&gt;</div>

//Use the function raw() to do not escape html entities
echo div('Hello', raw(' <world>'));
//<div>Hello <world></div>

//Create a div with html content
echo div('Hello ', strong('world'));
//<div>Hello <strong>world</strong></div>

//A div with many content
echo div(
    h1('Hello world'),
    p('This is a paragraph'),
    ul(
        li('And this is a list item'),
        li('Other list item')
    )
);

属性

向HTML标签添加属性有两种方式:使用数组作为第一个参数或使用魔法方法。

//Add attributes using an array
echo div(['id' => 'foo'], 'Hello world');

//Or add attributes with magic methods
echo div('Hello world')->id('foo');

//Both examples outputs: <div id="foo">Hello world</div>

值为null的所有属性都将被省略

//Add attributes using an array
echo div(['id' => null], 'Hello world');

//Or add attributes with magic methods
echo div('Hello world')->id(null);

//Both examples outputs: <div>Hello world</div>

标志

在HTML中,标志(或布尔属性)是不需要值的属性。使用boolean值添加标志。

使用数组语法示例

//Positive flag 
echo div(['hidden' => true]);
//<div hidden></div>

//Negative flag 
echo div(['hidden' => false]);
//<div></div>

//A short method to add positive flags:
echo div(['hidden']);
//<div hidden></div>

//Mixing attributes and flags
echo div(['hidden', 'class' => 'foo']);
//<div hidden class="foo"></div>

使用魔法方法示例

//Positive flag 
echo div()->hidden(true);
//<div hidden></div>

//Negative flag 
echo div()->hidden(false);
//<div></div>

//A short method to add positive flags (true is not needed):
echo div()->hidden();
//<div hidden></div>

某些属性可以包含多个空格分隔的值,例如class。您可以使用数组添加类。

//Using an array
echo div(['class' => ['foo', 'bar']]);

//Using the magic method:
echo div()->class(['foo', 'bar']);

//Both examples return: <div class="foo bar"></div>

使用key => value语法在有条件的情况下添加类。只有当值被评估为真时,该类才会被添加。

//Using an array
echo div([
    'class' => [
        'foo',
        'bar',
        'theme-blue' => true,
        'error' => !empty($error)
    ]
]);

//Using the magic method:
echo div()->class([
    'foo',
    'bar',
    'theme-blue' => true,
    'error' => !empty($error)
]);

//Both examples output: <div class="foo bar theme-blue"></div>

data-*属性

包含非可伸缩值的任何data-*属性都将转换为JSON。与标志不同,布尔值也包括在内。

//Using an array
echo div([
    'data-enabled' => true,
    'data-other' => false,
    'data-omitted' => null, //Null values are ommitted
    'data-options' => ['foo', 'bar']
]);

//Using the special method `data()`
echo div()
    ->data('enabled', true),
    ->data('other', false),
    ->data('omitted', null),
    ->data('options', ['foo', 'bar']);

//Both examples output: <div data-enabled="true" data-other="false" data-options="[&quot;foo&quot;,&quot;bar&quot;]"></div>

导入/导出

元素实现了JsonSerializableSerializable接口,因此您可以导出它们。

$article = article(
    header(
        h1('Hello world')
    ),
    div(['class' => 'content'],
        p('This is an article')
    )
);

//Export to JSON
$json = json_encode($article);

//Use the function array2Html to recreate the html from json:
$article = array2Html(json_decode($json, true));

//Serialize and unserialize
$ser = serialize($article);
$article = unserialize($ser);

其他实现的接口

所有可以包含子元素(不是自闭合元素,如<br><img>)的元素实现了以下标准PHP接口

ArrayAccess

使用数组API访问子元素。

$div = div('First child', strong('Second child'), 'Third child');

echo $div[2]; //Third child

IteratorAggregate

与元素一起迭代。

$div = div('First child', strong('Second child'), 'Third child');

foreach ($div as $child) {
    echo $child;
}

Countable

使用count()

$div = div('First child', strong('Second child'), 'Third child');

echo count($div); //3

注意,NULL子元素将被丢弃。

$div = div('First child', null, 'Third child');

echo count($div); //2