Текущая версия от 02:10, 11 декабря 2024

FloatingUI

Шаблон использует FloatingUI. А конкретно Dropdown.
Его можно использовать в другом скине, однако придётся отказаться от Dropdown, заменив его на чистый CSS вариант.

Что это?

Добро пожаловать на страницу шаблона FlexBox!

Этот шаблон можно использовать для самых разных вещей, но изначально был сделан для Космического Закона, из-за чего могут возникать соответствующие несостыковки и ограничения.

Основное преимушество - адаптивность. Шаблон нормально выглядит как на телефонах, так и на ПК, при этом оставаясь компактным.

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

Ниже перечислен список доступных пропсов, если кто-то будет это дополнять, просьба вписывать их сюда же.

Название	Описание
Color	Красит весь шаблон в любой доступный цвет ColorPalette
SubTitle	Изначально использовалось для номера статьи в КЗ. Необязательный проп.
Title	Основной текст сверху. Если не задать SubTitle, то будет использован его стиль. Так же это одновременно и якорь.
TitleElement	Определяет каким элементом будет тайтл, по-умолчанию: `span`. Необходимо для отображения тайтла в Содержании. Рекомендуется использовать h3-h6 если необходимо.
Image	Изображение с указанием размера, но без `File:` Использование: `Clown.png{{!}}96px`
ImagePadding	Отступ от краёв контейнера изображения. По-умолчанию: 0.
Content	Основной текст в шаблоне, например, описание.
DropdownTextAlign	Расположение текста внутри дропдауна. По-умолчанию он центрирован.
DropdownTitle	Не отображается если не заполнен проп `DropdownContent`, задаёт надпись на кнопке раскрытия `DropdownContent`. По-умолчанию: `Подробно`
DropdownContent	Содержимое дропдауна, без этого пропса дропдауна не будет. Лучше всего использовать для второстепенной информации.

Примеры

Всё заполнено

{{FlexBox
| Color           = Lavaland
| SubTitle        = Класс
| Title           = Ну типа это что-то
| TitleElement    = h3
| Image           = Clown.png{{!}}96px
| Content         = Самый обыкновенный клоун. Рекомендуется избиение.
| DropdownTitle   = Чё там ещё?
| DropdownContent = Избиение клоуна без причины - является нарушением правил сервера.
}}

Клоун

Или же... приколист

Самый обыкновенный клоун. Рекомендуется избиение.

Минимальное заполнение

{{FlexBox
| Title   = Клоун
| Content = Кусок бесполезности
| Image   = Generic_clown.png{{!}}64px
}}

Клоун

Кусок бесполезности

@@ Строка 1: / Строка 1: @@
 <includeonly><div class="flexbox-container" style="background-color: {{ColorPalette|{{{Color}}}|Transparent}};">
 <div class="flexbox-title" style="background-color: {{ColorPalette|{{{Color}}}|Light}}; border-color: {{ColorPalette|{{{Color}}}|Opaque}};">
-{{#if:{{{SubTitle|}}}|<span class="flexbox-subtitle" style="background-color: {{ColorPalette{{!}}{{{Color}}}{{!}}Opaque}};">{{{SubTitle}}}</span><{{{TitleElement|span}}} class="flexbox-name"><span>{{anchor|{{{Title}}}}}{{{Title}}}</span></{{{TitleElement|span}}}>|<{{{TitleElement|span}}} class="flexbox-subtitle" style="background-color: {{ColorPalette{{!}}{{{Color}}}{{!}}Opaque}};"><span>{{anchor|{{{Title}}}}}{{{Title}}}</span></{{{TitleElement|span}}}>}}</div>
+{{#if:{{{SubTitle|}}}|<span class="flexbox-subtitle" style="background-color: {{ColorPalette{{!}}{{{Color}}}{{!}}Opaque}}; background: {{{TitleGradient}}};">{{{SubTitle}}}</span><{{{TitleElement|span}}} class="flexbox-name"><span>{{anchor|{{{Title}}}}}{{{Title}}}</span></{{{TitleElement|span}}}>|<{{{TitleElement|span}}} class="flexbox-subtitle" style="background-color: {{ColorPalette{{!}}{{{Color}}}{{!}}Opaque}}; background: {{{TitleGradient}}}; width: 100%;"><span>{{anchor|{{{Title}}}}}{{{Title}}}</span></{{{TitleElement|span}}}>}}</div>
 <div class="flexbox-content">
-<div class="flexbox-image" style="background-color: {{ColorPalette|{{{Color}}}|Light}}; border-color: {{ColorPalette|{{{Color}}}|Opaque}};>[[File:{{{Image}}}]]</div>
+<div class="flexbox-image" style="background-color: {{ColorPalette|{{{Color}}}|Light}}; border-color: {{ColorPalette|{{{Color}}}|Opaque}}; padding: {{{ImagePadding|0}}};>[[File:{{{Image}}}]]</div>
 <div class="flexbox-container__text" style="border-color: {{ColorPalette|{{{Color}}}|Secondary}};"><div class="flexbox-desc">{{{Content}}}</div>
 {{#if:{{{DropdownContent|}}}|{{Dropdown
@@ Строка 9: / Строка 9: @@
 | Content = {{{DropdownContent}}}
 | TitleStyles = background-color: {{ColorPalette|{{{Color}}}|Light}};
-| ContentStyles = background-color: {{ColorPalette|{{{Color}}}|Transparent}}; border-color: {{ColorPalette|{{{Color}}}|Secondary}};
+| ContentStyles = background-color: {{ColorPalette|{{{Color}}}|Transparent}}; border-color: {{ColorPalette|{{{Color}}}|Secondary}}; text-align: {{{DropdownTextAlign|center}}};
 | Class = flexbox-dropdown
 }}|}}</div></div><div class="tgui-blur"></div></div></includeonly><noinclude>
@@ Строка 45: / Строка 45: @@
 | Image
 | Изображение с указанием размера, но без <code>File:</code> <br> Использование: <code>Clown.png<nowiki>{{!}}</nowiki>96px</code>
+|-
+| ImagePadding
+| Отступ от краёв контейнера изображения. По-умолчанию: 0.
 |-
 | Content
 | Основной текст в шаблоне, например, описание.
+|-
+| DropdownTextAlign
+| Расположение текста внутри дропдауна. По-умолчанию он центрирован.
 |-
@@ Строка 87: / Строка 95: @@
 == Минимальное заполнение ==
 <pre><nowiki>
-{{FlexBox}}
+{{FlexBox
+| Title   = Клоун
+| Content = Кусок бесполезности
+| Image   = Generic_clown.png{{!}}64px
+}}
 </nowiki></pre>

Шаблон:FlexBox: различия между версиями