Широкий спойлер

Примечание:

Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.

Стандартные спойлеры

Это компонент для создания "широких" кастомизируемых спойлеров. Вот так выглядит классический вариант такого спойлера: Чтобы использовать его есть несколько вариантов.

Первый вариант использования

Скопируйте код ниже в начало вашей статьи.

[[include component:wide-spoiler
bg-color=white |
color=#901 |
class=classic |
border=1px solid #dcdcdc |
hover-border=#505052 solid 1px]]

Затем, оберните нужный вам спойлер в блок с классом "classic". Должно получиться так:

[[div class="classic"]]
[[collapsible show="Спойлер" hide="Скрыть"]]

[[/collapsible]]
[[/div]]

Второй вариант использования

Этот вариант позволяет превратить все спойлеры на странице в широкие без оборачивания каждого из них в отдельный блок. Для этого просто также скопируйте код ниже в начало вашей статьи.

[[include component:wide-spoiler
bg-color=white |
color=#901 |
class=classic |
border=1px solid #dcdcdc |
hover-border=#505052 solid 1px |
all-spoilers=t]]

Дополнительные спойлеры

Есть ещё две версии этого спойлера с отличительным внешним видом.

Спойлер с уголками

Чтобы использовать его, скопируйте следующий код.

[[include component:wide-spoiler
bg-color=white |
color=#901 |
class=classic_special |
border=1px solid #dcdcdc |
hover-border=#505052 solid 1px |
special=t]]

Затем оберните нужный вам спойлер в блок с классом "classic_special". Обратите внимание, что класс отличается от добавленного в стандартном спойлере. Должно получиться так:

[[div class="classic_special"]]
[[collapsible show="Спойлер" hide="Скрыть"]]
Бу
[[/collapsible]]
[[/div]]

Спойлер с уголками и анимацией

Чтобы использовать его, скопируйте следующий код.

[[include component:wide-spoiler
bg-color=white |
color=#901 |
class=classic_animation |
border=1px solid #dcdcdc |
hover-border=#505052 solid 1px |
special=t |
animation=t]]

Затем оберните нужный вам спойлер в блок с классом "classic_animation". Обратите внимание, что класс отличается от добавленного в стандартном спойлере. Должно получиться так:

[[div class="classic_animation"]]
[[collapsible show="Спойлер" hide="Скрыть"]]
Бу
[[/collapsible]]
[[/div]]

Кастомизация

Все параметры при добавлении спойлера вы можете изменить на свой вкус и цвет. Пример измененного спойлера:

Параметры

bg-color=цвет заднего фона спойлера, работает HEX и RGB

color=цвет текста, уголков и анимации при наведении, работает HEX и RGB

class=название класса для блока, в который вы оборачиваете спойлер, ОБЯЗАН быть уникальным для каждого нового спойлера, если вы не хотите конфликтов

border=цвет и ширина границы спойлера

hover-border=цвет и ширина границы спойлера при наведении на него

special=включает уголки спойлера, принимает любое значение, если хотите без уголков, то не добавляйте этот параметр

animation=включает анимацию при наведении на спойлер и меняет вид открытого спойлера, не предполагается к использованию без уголков

all-spoilers=отключает необходимость оборачивать спойлеры в блоки, НО все еще нужно указывать класс, который будет использоваться для оборачивания спойлеров с уголками/анимацией

Структурные: визуальный_элемент
версия страницы: 21, Последняя правка: 06 Июль 2024, 01:21 (124 дня назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.