Различия

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

--- lsshtml [2026/04/23 17:10] – [tag] madmin
+++ lsshtml [2026/04/23 17:33] (текущий) – [collapsable] madmin
@@ Строка 3: / Строка 3: @@
 Пользователь может использовать HTML в:
   * панели type="html"
-  * панели type="list", style="card"
+  * панели type="list", style="card" - отображение карточки
   * панели type="grid", field.type="html"
-===== style="card" =====
+Если выбран способ отображения карточки (панель list, style=card), есть возможность сворачивать/разворачивать содержимое.
-Для отображения карточек можно использовать панель **type="list"**, **style="card"**.
+Соответственно, для карточки имеют смысл классы **button-expand** и **collapsable**.
-При этом
 ===== Классы контейнеров, основанных на flex =====
 ==== flex-row и flex-column - классы контейнеры  ====
@@ Строка 38: / Строка 37: @@
 ==== button-expand ====
 Кнопочка разворачивания/сворачивания скрываемых элементов, имеет смысл только для карточек
+<code>
+<div class="button-expand"></div>
+</code>
 ==== space ====
+Элемент разделитель, следует размещать его между элементами, в начале или конце. Максимально раздвигает элементы друг от друга.
+<code>
+<div>элемент слева</div>
+<div class="space"></div>
+<div>элемент справа</div>
+</code>
 ==== separator ====
+Элемент разделитель, отображается как вертикальная палочка между элементами
+<code>
+<div>элемент 1</div>
+<div class="separator"></div>
+<div>элемент 2</div>
+</code>
 ==== stretch ====
+Дополнительный признак элемента, пытается занять элементом все доступное пространство
 ==== hide-empty ====
-==== collapsable ====
+Дополнительный признак элемента, скрывает элемент без содержимого.
+Часто при написании шаблона неизвестно, есть ли в конкретном экземпляре содержимое или нет.
+Бывает, что элемент должен отображаться даже если содержимого нет, а бывает что пустые элементы надо выкинуть. Тогда удобно использовать этот класс.
+<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>