README

#larakit/lk-html 基于PEAR/HTML_Common2的HTML实体生成库

允许将HTML元素视为对象，使用方法链逐个添加、修改和删除属性值，与其他一次初始化和生成元素的库不同。

安装方法

1. 安装包

$ php composer.phar require larakit/laravel-larakit-html

1. 运行自动补全重新生成

php artisan ide-helper:generate

主要方法

1. 如果元素由两个闭合标签组成，则使用方法设置内容

$el->setContent($text)

1. 如果元素由一个标签组成，则使用方法设置所有属性

$el->setAttribute($name, $value);

1. CSS类管理通过使用方法（可以多次添加一个类，但最终属性中只会出现唯一的类）

$el->addClass($class)->removeClass($class);

元素 A（链接）

$el = \HtmlA::setHref('/')->setContent('TeXt');
echo $el;

或者在 Twig 模板中

{{ html_a('/').setContent('TeXt')|raw }}

结果

<a href="/">TeXt</a>

元素 Abbr（缩写）

$el = \HtmlAbbr::setTitle('HyperText Markup Language')
    ->setContent('HTML');
echo $el;
$el = \HtmlAbbr::setTitle('PHP: Hypertext Preprocessor')
    ->setContent('PHP')
    ->asInitialism();
echo $el;

或者在 Twig 模板中

{{ html_abbr('HyperText Markup Language').setContent('HTML')|raw }}
{{ html_abbr('PHP: Hypertext Preprocessor').setContent('PHP').asInitialism()|raw }}

结果

<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="PHP: Hypertext Preprocessor" class="initialism">PHP</abbr>

元素 Area/Map（地图区域链接）

$map = \HtmlMap::setName('map')->setId('map-123');
$map->addArea()->setShape('poly')
    ->setCoords('1601,15,1602,52,1676,52,1676,205,1590,203')
    ->setHref('/page123');
$map->addArea()->setShape('poly')
    ->setCoords('1676,205,1590,203,1591,170,1440,169,1439,14')
    ->setAttribute('777');
echo $map;

或者在 Twig 模板中

{% set map = html_map('map', 'map-123') %}
{% set area = map.addArea().setShape('poly').setCoords('1601,15,1602,52,1676,52,1676,205,1590,203').setHref('/page123') %}
{% set area = map.addArea().setShape('poly').setCoords('1676,205,1590,203,1591,170,1440,169,1439,14').setHref('777') %}
{{ map|raw }}

结果

<map name="map" id="map-123">
  <area shape="poly" href="/page123" coords="1601,15,1602,52,1676,52,1676,205,1590,203">
  <area shape="poly" data-id="777" coords="1676,205,1590,203,1591,170,1440,169,1439,14">
</map>

元素 Blockquote（引用）

$el = \HtmlBlockquote::setAuthor('В.И. Ленин')
    ->setContent('Главная проблема цитат в интернете – люди сразу верят в их подлинность.');
echo $el;

或者在 Twig 模板中

{{ html_blockquote('Главная проблема цитат в интернете – люди сразу верят в их подлинность.', 'В.И. Ленин')|raw }}

结果

<blockquote>
  <p>Главная проблема цитат в интернете – люди сразу верят в их подлинность.</p>
  <footer>В.И. Ленин</footer>
</blockquote>

元素 Button（按钮）

$el = \HtmlButton::setContent('Удалить')
    ->setTitle('Удаление не доступно')
    //классы можно добавлять через пробел
    ->addClass('btn btn-danger')    
    //следом можно добавить еще один класс, даже дублировать предыдущий (вставится только один)
    ->addClass('disabled btn');
echo $el;

或者在 Twig 模板中

{{ html_button('Удалить')
    .setTitle('Удаление не доступно')
    .addClass('btn btn-danger')
    .addClass('disabled btn')|raw }}

结果

<button class="btn btn-danger disabled" title="Удаление не доступно">Удалить</button>

元素 Div（块级包装）

$el = \HtmlDiv::addClass('row');
$el->setContent(
    \HtmlDiv::addClass('col-lg-6')->setContent('Attribute')
    .
    \HtmlDiv::addClass('col-lg-6')->setContent('Value');
);    
echo $el;

或者在 Twig 模板中

{{
    html_div(
        html_div('Attribute').addClass('col-lg-6')
        ~
        html_div('Value').addClass('col-lg-6')
    )
    .addClass('row')|raw
}}

结果

<div class="row">
    <div class="col-lg-6">Attribute</div>
    <div class="col-lg-6">Value</div>
</div>

元素 I（斜体）用于图标字体

$el = \HtmlI::addClass('fa fa-bed');
echo $el;

或者在 Twig 模板中

{{  html_i().addClass('fa fa-bed')|raw  }}

结果

<i class="fa fa-bed"></i>

元素 Img（图片）

$el = \HtmlImg::setSrc('/picture.jpg');
echo $el;
$el = \HtmlImg::setAttribute('data-src',  'holder.js/140x140')
        ->setTitle('A generic square placeholder image with rounded corners')
        ->addClass('img-rounded');
echo $el;

或者在 Twig 模板中

{{  html_image('/picture.jpg')|raw  }}
{{  html_image()
        .setAttribute('data-src',  'holder.js/140x140')
        .setTitle('A generic square placeholder image with rounded corners')
        .addClass('img-rounded')|raw
}}

结果

    <img src="/picture.jpg">
    <img data-src="holder.js/140x140" class="img-rounded" 
        alt="A generic square placeholder image with rounded corners">

元素 Span（内联包装）

$el = \HtmlSpan::addClass('text-success')
    ->setContent('Groove');
echo $el;

或者在 Twig 模板中

{{  html_span('Groove').addClass('text-success')|raw  }}

结果

<span class="text-success">Groove</span>

元素 Strike（删除线文本）

$el = \HtmlStrike::setContent('Старая цена: 100руб.');
echo $el;

或者在 Twig 模板中

{{  html_strike('Старая цена: 100руб.')|raw  }}

结果

<strike>Старая цена: 100руб.</strike>

元素 Strong（粗体文本）

$el = \HtmlStrong::setContent('Важный текст');
echo $el;

或者在 Twig 模板中

{{  html_strong('Важный текст')|raw  }}

结果

<strong>Важный текст</strong>

元素 Video

$el = \HtmlVideo::setSrc('http://ste.com/video.mp4');
echo $el;

或者在 Twig 模板中

{{ html_video('http://ste.com/video.mp4') }}

结果

<video>
    <source src="http://ste.com/video.mp4" type="video/mp4">
    Тег video не поддерживается вашим браузером
    <a href="http://ste.com/video.mp4">Скачайте видео</a>
</video>

元素 Table（表格）

$table = \HtmlTable::addClass('table')->setCaption('Заголовок таблицы');
$tr = $table->addRow();
$tr->addCell()->setContent('Предмет')->asTh()->setRowspan(2);
$tr->addCell()->setContent('Габариты')->asTh()->setColspan(3);
$tr->addCell()->setContent('Вес')->asTh()->setRowspan(2);
$tr = $table->addRow();
$tr->addCell()->setContent('Длина')->asTh();
$tr->addCell()->setContent('Ширина')->asTh();
$tr->addCell()->setContent('Высота')->asTh();
$tr = $table->addRow();
$tr->addCell()->setContent('Стол');
$tr->addCell()->setContent('2000 мм');
$tr->addCell()->setContent('1000 мм');
$tr->addCell()->setContent('900 мм');
$tr->addCell()->setContent('15 кг');
$tr = $table->addRow();
$tr->addCell()->setContent('Шкаф');
$tr->addCell()->setContent('3500 мм');
$tr->addCell()->setContent('600 мм');
$tr->addCell()->setContent('2400 мм');
$tr->addCell()->setContent('65 кг');
echo $table;

结果

<table class="table">
    <caption>Заголовок таблицы</caption>
    <tbody>
        <tr>
            <th rowspan="2">Предмет</th>
            <th colspan="3">Габариты</th>
            <th rowspan="2">Вес</th>
        </tr>
        <tr>
            <th>Длина</th>
            <th>Ширина</th>
            <th>Высота</th>
        </tr>
        <tr>
            <td>Стол</td>
            <td>2000 мм</td>
            <td>1000 мм</td>
            <td>900 мм</td>
            <td>15 кг</td>
        </tr>
        <tr>
            <td>Шкаф</td>
            <td>3500 мм</td>
            <td>600 мм</td>
            <td>2400 мм</td>
            <td>65 кг</td>
        </tr>
    </tbody>
</table>