FANDOM


Zwijanie jest opcją do pokazywania (lub ukrywania) elementów HTML.

Kiedy strona zawiera wiele powiązanych ze sobą elementów, które sprawiają, że strona ta jest ​​bardzo długa, można użyć zwijania, funkcja ta pozwala redaktorom na skrócenie strony i umożliwienie czytelnikom na rozwinięcie obszarów, które ich interesują. Podobnie do spisu treści, inne elementy wiki mogą być zaprojektowane do zwijania.

Aby stworzyć zwijany element, wystarczy dodać do niego klasę „mw-collapsible”.

Przykłady

Zwijanie tabeli

Dodając "mw-collapsible" jako klasę, można zwinąć tabelę oszczędzając miejsce.

Numer Litera
1 A
2 B
3 C
{| class="wikitable mw-collapsible" style="float:right"
! Numer !! Litera
|-
| 1 || A
|-
| 2 || B
|-
| 3 || C
|}

Zwijanie tekstu

Możliwe jest również zwijanie tekstu w artykułach, skutecznie skracając stronę i pozwalając czytelnikowi zdecydować, czy chce przeczytać resztę informacji. Dla przykładu:

<div class="mw-collapsible">
Ten tekst jest zwijany.
</div>

Daje w rezultacie:

Ten tekst jest zwijany.

Zaawansowane ustawienia

Stan początkowy

Aby ustawić stan początkowy dla zwijanego elementu można się posłużyć klasą „mw-collapsed” oraz „mw-collapsible”, przykład można ujrzeć poniżej:

{| class="mw-collapsible mw-collapsed wikitable"
! Nagłówek || pozostaje widoczny
|-
| Ta zawartość || jest ukryta
|-
| podczas || pierwszego ładowania
|}
Nagłówek pozostaje widoczny
Ta zawartość
jest początkowo ukryta

Wybieranie zawartości zwijania

Można również określić, która część zawartości może być zwijana używając „mw-collapsible-content”.

<div class="mw-collapsible mw-collapsed" style="width:100%">
Ten tekst nie jest zwijany; ale następny jest zwijany i ukryty domyślnie:
<div class="mw-collapsible-content">Ten tekst powinien być ukryty domyślnie.</div>
Ten tekst powinien być również widoczny
</div>

Co da w rezultacie:

Ten tekst nie jest zwijany; ale następny jest zwijany i ukryty domyślnie:

Ten tekst powinien być ukryty domyślnie.

Ten tekst powinien być również widoczny

Niestandardowe nazwy

Nie lubisz Rozwiń/Zwiń w linkach? Nie ma problemu! Zmień to używając „data-expandtext” i „data-collapsetext”.

{| class="wikitable mw-collapsible" data-expandtext="Illuminati" data-collapsetext="Deluminati"
!Mój || Nagłówek
|-
| A || B
|-
| C || D
|}
Mój Nagłówek
A B
C D

Przycisk przełączania

Jeśli zauważysz na przykładzie powyższej tabeli, że link w drugiej kolumnie zwiększa szerokość tabeli w stosunku do tekstu zawartego w nim. Można ustalić, aby przełącznik był umieszczony w innym miejscu na stronie.

Aby to zrobić musimy przypisać ID do elementu. To ID musi być poprzedzone prefiksem „mw-customcollapsible-”, a następnie należy dodać unikalny tekst dla tego elementu. Korzystanie z powyższej tabeli, możemy dodać ID „mw-customcollapsible-myTable”.

Który zajmuje się samą tabelą. Następnie, możemy dodać przycisk/link/tekst z klasą „mw-customtoggle-myTable” (należy pamiętać, że class (klasa) i ID muszą mieć taki sam unikalny tekst).

{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
!Mój || Nagłówek
|-
| A || B
|-
| C || D
|}

<div class="mw-customtoggle-myTable wikia-menu-button">Pokaż/Ukryj tabelę</div>
Mój Nagłówek
A B
C D

Pokaż/Ukryj tabelę

Zobacz również

Treści społeczności są dostępne na podstawie licencji CC-BY-SA , o ile nie zaznaczono inaczej.