Различия

Показаны различия между двумя версиями страницы.

--- lsshtml [2026/04/23 17:25] – [space] madmin
+++ lsshtml [2026/04/23 17:33] (текущий) – [collapsable] madmin
@@ Строка 49: / Строка 49: @@
 ==== separator ====
 Элемент разделитель, отображается как вертикальная палочка между элементами
+<code>
+<div>элемент 1</div>
+<div class="separator"></div>
+<div>элемент 2</div>
+</code>
 ==== stretch ====
 Дополнительный признак элемента, пытается занять элементом все доступное пространство
 ==== hide-empty ====
-Дополнительный признак элемента, скрывает элемент без содержимого
+Дополнительный признак элемента, скрывает элемент без содержимого.
+Часто при написании шаблона неизвестно, есть ли в конкретном экземпляре содержимое или нет.
+Бывает, что элемент должен отображаться даже если содержимого нет, а бывает что пустые элементы надо выкинуть. Тогда удобно использовать этот класс.
+<code>
+<!-- этот элемент будет скрыт -->
+<div class="hide-empty"></div>
+<!-- этот элемент отобразится -->
+<div class="hide-empty">содержимое</div>
+</code>
 ==== 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>