larakit/lk-html

[Larakit] Библиотека для Laravel для генерации HTML

1.0.0 2016-05-10 05:41 UTC

Requires

• larakit/lk-boot: *
• larakit/lk-twig: *
• pear/html_common2: *

MIT

• Alexey Berdnikov

• html
• laravel 5
• larakit

README

#larakit/lk-html Библиотека для генерации HTML-сущностей на основе PEAR/HTML_Common2

Позволяет работать с элементом 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>