Версия от 19:06, 6 декабря 2024

FloatingUI

Шаблон использует FloatingUI и он не будет работать без него!
Вся логика находится прямо в скине, а значит в другом скине он бесполезен!

Что это?

Если ты на этой странице, то тебе наверняка интересно что же это? А я расскажу.

Это Dropdown, знакомься, он умеет не многое, но он достаточно универсален (наверное).
Что же он может? Ну вот краткий список:

Автоматическая подгонка ширины контента, под ширину тайтла, это если простым языком.
Неплохая кастомизируемость, учитывая где мы блять находимся.
Он не покинет зону твоего экрана, если ты не пролистаешь слишком далеко от него, ну то есть контент может быть как сверху, так и снизу тайтла.
В отличии от тултипов и попапов, их спокойно можно открывать сразу несколько штук, если это кому-то вообще надо.
Так же, в отличии от них, он открывается при клике на тайтл.

Класс, а как использовать?

Нравится? Надо? Если ответ да на оба вопроса, читай дальше, я тут описываю как юзать его.

Шаблон имеет следующие свойства, читай внимательно, дабы потом не стоять у разбитого корыта.

Пропс	Что делает
Title	Это собственно то на что юзер будет жать, обычный текст по сути, ну или что тебе там в голову придёт засунуть сюда...
Content	То что будет показываться юзеру, после того как он клацнет на Title. Можешь засунуть сюда что душе угодно.
TitleStyles	Дополнительные стили для тайтла. Можешь засунуть сюда цвет фона, размер шрифта, отступы и прочее говно. Например `TitleStyles = background-color: var(--red-light); color: var(--color-text);`
ContentStyles	Аналогично пропсу выше, только стили применяются к контенту, использовать так же.
Class	Тебе это скорее всего не пригодится. Добавляет вписанный класс в основной элемент дропдауна, и такой же класс но с припиской `--content` к контентной части.
Position	Где твой тултип будет изначально. По-умолчанию стоит `bottom`, но ты можешь при желании вписать `top`. Бога ради, не вписывай ничего другого!!!

Пример

Простенький пример использования.

{{Dropdown
| Title = Нажми на меня
| Content = Молодец, ты нажал на меня! Но в чём смысл... 
| TitleStyles = background-color: {{ColorPalette|Blue|Light}};
| ContentStyles = background-color: {{ColorPalette|Blue|Secondary}};
| Class = can-you-see-me
| Position = top
}}

@@ Строка 1: / Строка 1: @@
-<includeonly><div class="floating-dropdown {{#if:{{{Class|}}}|{{{Class}}}|}}" data-position='{{{Position|bottom}}}' style="{{{TitleStyles|}}}"><div class="floating-dropdown--content"><div class="floating-dropdown--contains {{#if:{{{Class|}}}|{{{Class}}}--content|}}" style="{{{ContentStyles|}}}">{{{Content}}}</div><div class="dropdown-content-fill"></div></div><div class="dropdown-fill">{{{Title}}}</div></div></includeonly><noinclude>
+<includeonly><div class="floating-dropdown {{#if:{{{Class|}}}|{{{Class}}}|}}" data-position='{{{Position|bottom}}}' style="{{{TitleStyles|}}}"><div class="floating-dropdown--content"><div class="floating-dropdown--contains {{#if:{{{Class|}}}|{{{Class}}}--content|}}" style="{{{ContentStyles|}}}">{{{Content}}}
+</div><div class="dropdown-content-fill"></div></div><div class="dropdown-fill">{{{Title}}}</div></div></includeonly><noinclude>
 {{Notice|Category=Шаблоны|Title=FloatingUI|Content=Шаблон использует [https://floating-ui.com FloatingUI] и он не будет работать без него!<br>Вся логика находится прямо в скине, а значит в другом скине он бесполезен!}}
 = Что это? =