Текущая версия от 07:55, 5 июня 2025

Что это?

Добро пожаловать на страницу шаблона 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><templatestyles src="FlexBox/styles.css" />
-<div class="flexbox-container tgui-background" {{ColorPaletteStyles|{{{Color}}}|flexbox}}>
+<div class="flexbox-container tgui-background" style="{{ColorPaletteStyles|{{{Color}}}}}">
-   <div class="flexbox-title">
+   <div class="flexbox-header">
      {{#if:{{{SubTitle|}}}|<div class="flexbox-subtitle" background: {{{TitleGradient}}};">{{{SubTitle}}}</div>|}}
-     <hr><{{{TitleElement|span}}} class="{{#if:{{{SubTitle|}}}|flexbox-text|flexbox-subtitle}}">{{anchor|{{{Title}}}}}{{{Title}}}</{{{TitleElement|span}}}>
+     <hr><{{{TitleElement|span}}} class="{{#if:{{{SubTitle|}}}|flexbox-title|flexbox-subtitle alone}}" {{#if:{{{SubTitle|}}}||style="background: {{{TitleGradient}}};"}}>{{anchor|{{{Title}}}}}{{{Title}}}</{{{TitleElement|span}}}>
    </div>
    <div class="flexbox-content">
-     <div class="flexbox-image">[[File:{{{Image}}}]]</div>
+     <div class="flexbox-image" {{#if:{{{ImagePadding|}}}|style="padding: {{{ImagePadding}}};"|}}>[[File:{{{Image}}}]]</div>
      <div class="flexbox-text">
        <div class="flexbox-desc">{{{Content}}}</div>
@@ Строка 19: / Строка 19: @@
    </div>
 </div></includeonly><noinclude>
-{{Important|Category=Шаблоны|Title=FloatingUI|Note=Шаблон использует [https://floating-ui.com FloatingUI]. А конкретно [[:Шаблон:Dropdown|Dropdown]].<br>Его можно использовать в другом скине, однако придётся отказаться от Dropdown, заменив его на чистый CSS вариант.}}
+{{Notice|Category=Шаблоны|Title=FloatingUI|Content=Шаблон использует [https://floating-ui.com FloatingUI]. А конкретно [[:Шаблон:Dropdown|Dropdown]].<br>Его можно использовать в другом скине, однако придётся отказаться от Dropdown, заменив его на чистый CSS вариант.}}
 = Что это? =
 Добро пожаловать на страницу шаблона FlexBox!