| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| lsshtml [2026/04/23 17:22] – [style="card"] madmin | lsshtml [2026/04/23 17:33] (текущий) – [collapsable] madmin |
|---|
| ==== button-expand ==== | ==== button-expand ==== |
| Кнопочка разворачивания/сворачивания скрываемых элементов, имеет смысл только для карточек | Кнопочка разворачивания/сворачивания скрываемых элементов, имеет смысл только для карточек |
| | <code> |
| | <div class="button-expand"></div> |
| | </code> |
| ==== space ==== | ==== space ==== |
| Элемент разделитель, следует размещать его между элементами, в начале или конце. Максимально раздвигает элементы друг от друга. | Элемент разделитель, следует размещать его между элементами, в начале или конце. Максимально раздвигает элементы друг от друга. |
| | <code> |
| | <div>элемент слева</div> |
| | <div class="space"></div> |
| | <div>элемент справа</div> |
| | </code> |
| ==== separator ==== | ==== separator ==== |
| Элемент разделитель, отображается как вертикальная палочка между элементами | Элемент разделитель, отображается как вертикальная палочка между элементами |
| | <code> |
| | <div>элемент 1</div> |
| | <div class="separator"></div> |
| | <div>элемент 2</div> |
| | </code> |
| ==== stretch ==== | ==== stretch ==== |
| Дополнительный признак элемента, пытается занять элементом все доступное пространство | Дополнительный признак элемента, пытается занять элементом все доступное пространство |
| ==== hide-empty ==== | ==== hide-empty ==== |
| Дополнительный признак элемента, скрывает элемент без содержимого | Дополнительный признак элемента, скрывает элемент без содержимого. |
| | Часто при написании шаблона неизвестно, есть ли в конкретном экземпляре содержимое или нет. |
| | Бывает, что элемент должен отображаться даже если содержимого нет, а бывает что пустые элементы надо выкинуть. Тогда удобно использовать этот класс. |
| | <code> |
| | <!-- этот элемент будет скрыт --> |
| | <div class="hide-empty"></div> |
| | |
| | <!-- этот элемент отобразится --> |
| | <div class="hide-empty">содержимое</div> |
| | </code> |
| ==== collapsable ==== | ==== collapsable ==== |
| Дополнительный признак элемента, имеет смысл только для карточек. При сворачивании/разворачивании карточки скрывается/отображается | Дополнительный признак элемента, имеет смысл только для карточек. При сворачивании/разворачивании карточки скрывается/отображается |
| | ===== Пример шаблона ===== |
| | <code> |
| | <div class="flex-column stretch"> |
| | <div class="flex-row center-v stretch"> |
| | <div class="flex-row center-v wrap"> |
| | <div>{$html_code}</div> |
| | <div>[{$html_project_code}]</div> |
| | <div>{$html_theme_name}</div> |
| | </div> |
| | <div class="space"></div> |
| | <div class="flex-row center-v"> |
| | <div class="lss-icons-{$html_priority} hide-empty">{$html_priority}</div> |
| | <div class="lss-icons-{$html_iconunreaded} hide-empty">{$html_iconunreaded}</div> |
| | <div class="tag lss-color-{$html_status_code_color}">{$html_status_code}</div> |
| | <div class="tag lss-color-{$taskpriority_code_color}">{$taskpriority_code}</div> |
| | </div> |
| | </div> |
| | <div class="flex-row stretch"> |
| | <div class="flex-column stretch"> |
| | <div class="title">{$html_name}</div> |
| | <div class="collapsable hide-empty">{$html_info}</div> |
| | <div class="flex-row wrap"> |
| | <div>от:</div> |
| | <div class="title">{$html_userfrom_fio}</div> |
| | <div class="separator"></div> |
| | <div>для:</div> |
| | <div class="title">{$html_userto_fio}</div> |
| | </div> |
| | </div> |
| | <div class="button-expand"></div> |
| | </div> |
| | <div class="flex-row wrap center-v stretch"> |
| | <div class="flex-row center-v hide-empty"> |
| | <div>{$html_status_datecode}</div> |
| | <div class="tag lss-color-white">{$html_status_date}</div> |
| | </div> |
| | <div class="space"></div> |
| | <div class="tag lss-color-{$html_deadline_status_color} hide-empty">{$html_deadline}</div> |
| | </div> |
| | </div> |
| | </code> |
