Текущая версия от 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: @@
-<div class="flexbox-container" style="background-color: {{ColorPalette|{{{Color}}}|Transparent}};">
+<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|h4}}} class="flexbox-name"><span>{{anchor|{{{Title}}}}}{{{Title}}}</span></{{{TitleElement|h4}}}></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>
-</div></div>
+{{Notice|Category=Шаблоны|Title=FloatingUI|Content=Шаблон использует [https://floating-ui.com FloatingUI]. А конкретно [[:Шаблон:Dropdown|Dropdown]].<br>Его можно использовать в другом скине, однако придётся отказаться от Dropdown, заменив его на чистый CSS вариант.}}
-<div class="tgui-blur"></div></div>
+= Что это? =
-<noinclude>
+Добро пожаловать на страницу шаблона FlexBox!
+Этот шаблон можно использовать для самых разных вещей, но изначально был сделан для Космического Закона, из-за чего могут возникать соответствующие несостыковки и ограничения.
+Основное преимушество - адаптивность. Шаблон нормально выглядит как на телефонах, так и на ПК, при этом оставаясь компактным.
+= Класс, а как использовать? =
+Ниже перечислен список доступных пропсов, если кто-то будет это дополнять, просьба вписывать их сюда же.
+{| class="wikitable"
+! Название
+! Описание
+|-
+| Color
+| Красит весь шаблон в любой доступный цвет [[ColorPalette]]
+|-
+| SubTitle
+| Изначально использовалось для номера статьи в КЗ. Необязательный проп.
+|-
+| Title
+| Основной текст сверху. Если не задать SubTitle, то будет использован его стиль. <br> Так же это одновременно и якорь.
+|-
+| TitleElement
+| Определяет каким элементом будет тайтл, по-умолчанию: <code>span</code>. <br> Необходимо для отображения тайтла в Содержании. Рекомендуется использовать h3-h6 если необходимо.
+|-
+| Image
+| Изображение с указанием размера, но без <code>File:</code> <br> Использование: <code>Clown.png<nowiki>{{!}}</nowiki>96px</code>
+|-
+| ImagePadding
+| Отступ от краёв контейнера изображения. По-умолчанию: 0.
+|-
+| Content
+| Основной текст в шаблоне, например, описание.
+|-
+| DropdownTextAlign
+| Расположение текста внутри дропдауна. По-умолчанию он центрирован.
+|-
+| DropdownTitle
+| Не отображается если не заполнен проп <code>DropdownContent</code>, задаёт надпись на кнопке раскрытия <code>DropdownContent</code>. По-умолчанию: <code>Подробно</code>
+|-
+| DropdownContent
+| Содержимое дропдауна, без этого пропса дропдауна не будет. Лучше всего использовать для второстепенной информации.
+|}
+= Примеры =
+== Всё заполнено ==
+<pre><nowiki>
+{{FlexBox
+| Color           = Lavaland
+| SubTitle        = Класс
+| Title           = Ну типа это что-то
+| TitleElement    = h3
+| Image           = Clown.png{{!}}96px
+| Content         = Самый обыкновенный клоун. Рекомендуется избиение.
+| DropdownTitle   = Чё там ещё?
+| DropdownContent = Избиение клоуна без причины - является нарушением правил сервера.
+}}
+</nowiki></pre>
+{{FlexBox
+| Color           = Lavaland
+| SubTitle        = Клоун
+| Title           = Или же... приколист
+| TitleElement    = h3
+| Image           = Generic_clown.png{{!}}96px
+| Content         = Самый обыкновенный клоун. Рекомендуется избиение.
+| DropdownTitle   = Чё там ещё?
+| DropdownContent = Избиение клоуна без причины - является нарушением правил сервера.
+}}
+== Минимальное заполнение ==
 <pre><nowiki>
 {{FlexBox
-| Color           = Green
+| Title   = Клоун
-| SubTitle        = 100
+| Content = Кусок бесполезности
-| Title           = Ущерб активам станции
+| Image   = Generic_clown.png{{!}}64px
-| TitleElement    = h4
-| Image           = SL_Damage to Station Assets.png{{!}}128px
-| Content         = Умышленное, злонамеренное повреждение станции или её имущества в незначительной степени.
-| DropdownTitle   = Подробно
-| DropdownContent =
-[[Животные|Питомцы департаментов]], [[киборг]]и, големы ксенобиологии и личные домашние животные считаются собственностью станции. Граффити не считается ущербом активам станции, в отличие от уничтожения личных вещей членов экипажа. В случае более серьезного ущерба обратитесь к статье [[#Саботаж|Саботаж]].
 }}
 </nowiki></pre>
 {{FlexBox
-| Color           = Green
+| Title   = Клоун
-| SubTitle        = 100
+| Content = Кусок бесполезности
-| Title           = Ущерб активам станции
+| Image   = Generic_clown.png{{!}}64px
-| TitleElement    = h4
-| Image           = SL_Damage to Station Assets.png{{!}}128px
-| Content         = Умышленное, злонамеренное повреждение станции или её имущества в незначительной степени.
-| DropdownTitle   = Подробно
-| DropdownContent =
-[[Животные|Питомцы департаментов]], [[киборг]]и, големы ксенобиологии и личные домашние животные считаются собственностью станции. Граффити не считается ущербом активам станции, в отличие от уничтожения личных вещей членов экипажа. В случае более серьезного ущерба обратитесь к статье [[#Саботаж|Саботаж]].
 }}

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