Aylong в 11:34, 3 декабря 2024

2024-12-03T11:34:24Z

← Предыдущая версия		Версия от 11:34, 3 декабря 2024
Строка 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>Вся логика находится прямо в скине, а значит в другом скине он бесполезен!}}		{{Important\|Category=Шаблоны\|Title=FloatingUI\|Note=Шаблон использует [https://floating-ui.com FloatingUI] и он не будет работать без него!<br>Вся логика находится прямо в скине, а значит в другом скине он бесполезен!}}
	= Что это? =		= Что это? =
	Если ты на этой странице, то тебе наверняка интересно что же это? А я расскажу.		Если ты на этой странице, то тебе наверняка интересно что же это? А я расскажу.

Aylong: Новая страница: «
{{{Content}}}
{{{Title}}}
{{Notice|Category=Шаб...»

2024-12-03T11:32:12Z

Новая страница: «<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=Шаб...»

Новая страница

<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>Вся логика находится прямо в скине, а значит в другом скине он бесполезен!}}
= Что это? =
Если ты на этой странице, то тебе наверняка интересно что же это? А я расскажу.

Это Dropdown, знакомься, он умеет не многое, но он достаточно универсален (наверное).<br>
Что же он может? Ну вот краткий список:
# Автоматическая подгонка ширины контента, под ширину тайтла, это если простым языком.
# Неплохая кастомизируемость, учитывая где мы блять находимся.
# Он не покинет зону твоего экрана, если ты не пролистаешь слишком далеко от него, ну то есть контент может быть как сверху, так и снизу тайтла.
# В отличии от [[Шаблон:Tooltip|тултипов]] и [[Шаблон:Popup|попапов]], их спокойно можно открывать сразу несколько штук, если это кому-то вообще надо.
# Так же, в отличии от них, он открывается при клике на тайтл.

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

Шаблон имеет следующие свойства, читай внимательно, дабы потом не стоять у разбитого корыта.
{| class="wikitable"
! Пропс
! Что делает
|-
| Title
| Это собственно то на что юзер будет жать, обычный текст по сути, ну или что тебе там в голову придёт засунуть сюда...

|-
| Content
| То что будет показываться юзеру, после того как он клацнет на Title. Можешь засунуть сюда что душе угодно.

|-
| TitleStyles
| Дополнительные стили для тайтла. Можешь засунуть сюда цвет фона, размер шрифта, отступы и прочее говно.
Например <code>TitleStyles = background-color: {{ColorPalette|Red|Light}}; color: var(--color-text);</code>

|-
| ContentStyles
| Аналогично пропсу выше, только стили применяются к контенту, использовать так же.

|-
| Class
| Тебе это скорее всего не пригодится. Добавляет вписанный класс в основной элемент дропдауна, и такой же класс но с припиской <code>--content</code> к контентной части.

|-
| Position
| Где твой тултип будет изначально. По-умолчанию стоит <code>bottom</code>, но ты можешь при желании вписать <code>top</code>. Бога ради, не вписывай '''ничего''' другого!!!
|}

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

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

Шаблон:Dropdown - История изменений

Aylong в 11:34, 3 декабря 2024

Aylong: Новая страница: «{{{Content}}}{{{Title}}} {{Notice|Category=Шаб...»

Aylong: Новая страница: «
{{{Content}}}
{{{Title}}}
{{Notice|Category=Шаб...»