Различия

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

--- lsshtml [2026/04/23 17:06] – [title] 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 - классы контейнеры  ====
@@ Строка 26: / Строка 25: @@
   * **center-v** - пытаться размещать дочерние элементы вертикально по центру
 ===== Классы элементов, вложенных в контейнеры =====
-==== title ====
+==== title - класс заголовка ====
 Элемент заголовка
 <code>
 <div class="title">Текст заголовка</div>
 </code>
-==== tag ====
+==== tag - класс выделения ====
 Элемент, выделенный цветным кружочком
 <code>
 <div class="tag lss-color-red">код</div>
 </code>
+==== 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 ====
+Дополнительный признак элемента, скрывает элемент без содержимого.
+Часто при написании шаблона неизвестно, есть ли в конкретном экземпляре содержимое или нет.
+Бывает, что элемент должен отображаться даже если содержимого нет, а бывает что пустые элементы надо выкинуть. Тогда удобно использовать этот класс.
+<code>
+<!-- этот элемент будет скрыт -->
+<div class="hide-empty"></div>
-  * button-expand
+<!-- этот элемент отобразится -->
+<div class="hide-empty">содержимое</div>
-  * stretch
+</code>
-  * collapsable
+==== collapsable ====
-  * hide-empty
+Дополнительный признак элемента, имеет смысл только для карточек. При сворачивании/разворачивании карточки скрывается/отображается
+===== Пример шаблона =====
-  * space
+<code>
-  * separator
+<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>