Виджет усечения используется в тех случаях, когда нужно сделать анонс - короткий текстовый блок. Виджет может как удалить 'лишний' текст, так и скрыть текст под кнопку 'Читать далее'. Так же виджет умеет работать с блоками текста, насыщенными медиа-файлами (видео, изображения и т.д.).
Использование
Атрибут виджета data-ipsTruncate должен быть добавлен в элемент, оборачивающий контент, который необходимо усечь:
<div data-ipsTruncate> <p>Здесь слишком длинный текст...</p> </div>
Параметры
1. type (Строка; необязательный; по умолчанию - 'remove')
Определяет как должен усекаться текст. remove удаляет лишний текст полностью. hide оставляет лишний текст на странице, но скрывает его под кнопку 'читать далее'.
Пример использования:
<div data-ipsTruncate data-ipsTruncate-type="hide" data-ipsTruncate-size="35"> Лишний текст будет скрыт под кнопку </div> <div data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='2 lines'> Лишний текст будет удалён со страницы </div>
2. size (Смешанный; необязательный; по умолчанию - 100)
Определяет размер усечённого текста; избыточный текст удаляется или скрывается. Параметр может принимать три значения:
-
Селектор, например #someElementID
Если указан селектор, высота элемента виджета будет установлена на размер внешней высоты первого найденного указанного селектора. -
Строка, например 3 строки
Текст будет усечён до указанного количества строк текста, с учётом текущего форматирования текста (Внимание: данное значение может быть только во множественном числе). -
Число, например 100
Простое числовое значение, соответствующее числу пикселей, на которое будет усечён текст.
Пример использования:
<div data-ipsTruncate data-ipsTruncate-size='4 lines' data-ipsTruncate-type='remove'> Текст, расположенный ниже 4 строки будет удалён </div> <div data-ipsTruncate data-ipsTruncate-type="hide" data-ipsTruncate-size="#elReportPanel"> Лишний текст будет скрыт на высоту селектора #elReportPanel </div> {truncate="$topic->mapped('title')" length="60"} <!-- Текст переменной будет в длину 60 символов -->
3. expandText (Строка; необязательный; по умолчанию - 'Read more')
Данный параметр может быть использован только с type = hide. С помощью данного параметра можно переопределить стандартную кнопку 'Читать далее'.
События, вызываемые виджетом ips.ui.truncate
Вызываемые виджетом события применяются к элементу, содержащему в себе атрибут data-ipsTruncate.
contentTruncated
Вызывается когда контент в элементе усечён.
Данные события:
- type (Тип используемого усечения, полное удаление или скрытие)
contentExpanded
Вызывается, когда пользователь указывает свой текст кнопки виджета, когда тип - скрытие.