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

FloatingUI

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

Что это?

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

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

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

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

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

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

Примеры

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

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

База

Ну типа это что-то

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

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

{{FlexBox}}

Клоун

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

@@ Строка 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}};">{{{SubTitle}}}</span>|}}<{{{TitleElement|span}}} class="flexbox-name"><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>
@@ Строка 11: / Строка 11: @@
 | ContentStyles = background-color: {{ColorPalette|{{{Color}}}|Transparent}}; border-color: {{ColorPalette|{{{Color}}}|Secondary}};
 | 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
+| Основной текст сверху.
+|-
+| TitleElement
+| Определяет каким элементом будет тайтл, по-умолчанию: <code>span</code>. <br> Необходимо для отображения тайтла в Содержании. Рекомендуется использовать h3-h6 если необходимо.
+|-
+| Image
+| Изображение с указанием размера, но без <code>File:</code> <br> Использование: <code>Clown.png<nowiki>{{!}}</nowiki>96px</code>
+|-
+| Content
+| Основной текст в шаблоне, например, описание.
+|-
+| DropdownTitle
+| Не отображается если не заполнен проп <code>DropdownContent</code>, задаёт надпись на кнопке раскрытия <code>DropdownContent</code>. По-умолчанию: <code>Подробно</code>
+|-
+| DropdownContent
+| Содержимое дропдауна, без этого пропса дропдауна не будет. Лучше всего использовать для второстепенной информации.
+|}
+= Примеры =
+== Всё заполнено ==
 <pre><nowiki>
 {{FlexBox
-| Color           = Green
+| Color           = Lavaland
-| SubTitle        = 100
+| SubTitle        = Класс
-| Title           = Ущерб активам станции
+| Title           = Ну типа это что-то
-| TitleElement    = h4
+| TitleElement    = h3
-| Image           = SL_Damage to Station Assets.png{{!}}128px
+| Image           = Clown.png{{!}}96px
-| Content         = Умышленное, злонамеренное повреждение станции или её имущества в незначительной степени.
+| Content         = Самый обыкновенный клоун. Рекомендуется избиение.
-| DropdownTitle   = Подробно
+| DropdownTitle   = Чё там ещё?
-| DropdownContent =
+| DropdownContent = Избиение клоуна без причины - является нарушением правил сервера.
-[[Животные|Питомцы департаментов]], [[киборг]]и, големы ксенобиологии и личные домашние животные считаются собственностью станции. Граффити не считается ущербом активам станции, в отличие от уничтожения личных вещей членов экипажа. В случае более серьезного ущерба обратитесь к статье [[#Саботаж|Саботаж]].
+}}
+</nowiki></pre>
+{{FlexBox
+| Color           = Lavaland
+| SubTitle        = База
+| Title           = Ну типа это что-то
+| TitleElement    = h3
+| Image           = Generic_clown.png{{!}}96px
+| Content         = Самый обыкновенный клоун. Рекомендуется избиение.
+| DropdownTitle   = Чё там ещё?
+| DropdownContent = Избиение клоуна без причины - является нарушением правил сервера.
 }}
+== Минимальное заполнение ==
+<pre><nowiki>
+{{FlexBox}}
 </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: различия между версиями