Predefinição:Switcher/doc

Usage: {{Switcher|width= <width value>|height= <height value>|menu= <position>|thumb|left|right|center|style= <styles>|background= <image source> | <Button Name># <Contents>}}

Variables

• width — width value: if used, unit needs to be specified (e.g.: px). in case it's not provided, will take the entire page width. (see example below)
• height — height value: if used, unit must be specified (e.g.: px). in case it's not provided, will take only the necessary space to display the contents, varying according to the current tab's content. (check tab 2 on example #5)
• background — Source for an image that will be displayed as the background in all tabs. Normal image tags apply here, except the image caption, that will go undisplayed.
• thumb — adds a different frame around the entire switcher.
• left — places the block itself on the left of the page.
• center — places the block itself in the center of the page.
• right — places the block itself on the right of the page.
• f-left - places the block on the left of the page, using the float style. Text will go around it.
• f-right - places the block on the right of the page, using the float style.
• menu — Where buttons will be shown. Possible options: top, bottom, left, right. Defaults to bottom.
• style — styles, listed separated by a space. Options:
  • text-left | text-center | text-right | text-justify
  • buttons-left | buttons-center | buttons-right | buttons-justify | buttons-top | buttons-bottom
  • topTabs, Transparent

Warnings:

• The styles "buttons-top" and "buttons-bottom" were made for using with the menu=right or menu=left parameters. Usage in other situations may lead to weird behaviors.
• On a similar note, there's no need to use the other button styles when putting the menu on either side.

Others:

• It's possible to embed pages in the content of a tab.

TODO:

• add option to do absolute left, right or center with a-left, ... and option to do float-left, .... with f-left, ... (currently all you can do is absolute positions.) done!

• add the option to have the buttons bar on the left or right (idk who would use it on the right) done!

Known Issues

• Instead of the "=" sign inside the text field, the {{=}} template must be used.
• When a switcher is inserted into a switcher, a bug appears. It persists if you try to insert it through page transclusion.
• Switchers often don't show in preview mode.

Examples

Example 1

Code

{{switcher|thumb|center|height=300px|width=300px|background=[[File:Trap.png|300px]]
|Tab1#
|Tab2#
[[File:Legends_Icon_DD.png]]
|Tab3#
[[File:Legends_Icon_CC.png]]
|Tab3#
[[File:Legends_Icon_BB.png]]
}}

Preview

300px

300px

bottom

0

1

2

3

0

Tab1

1

Tab2

2

Tab3

3

Tab4

Example 4

Code

{{switcher|style=text-justify buttons-center|menu=top
|Теxt 1#
Fusce enim velit, vehicula id aliquet feugiat, volutpat nec justo. Fusce viverra metus nec quam ultricies tempor. Aenean ac justo risus. Vivamus leo augue, facilisis vitae congue vitae, pharetra sed massa. Pellentesque molestie risus vitae nisi placerat vel luctus justo rutrum. Proin gravida ullamcorper neque, sit amet porta diam tincidunt eu. Suspendisse vel orci pharetra massa semper interdum. Duis a ipsum ante, non tincidunt magna. Integer arcu nisi, laoreet nec faucibus ut, imperdiet a quam. Aenean vitae adipiscing erat. Donec semper, massa ac luctus congue, diam sapien ornare arcu, sit amet interdum tellus enim ut ligula.
|Теxt 2#
In scelerisque ligula ut sem varius ultrices. Nam lectus enim, interdum vel semper quis, fringilla sed urna. Proin eget justo in dui porta posuere. Integer laoreet tellus et magna mattis facilisis. Donec metus turpis, mollis vitae laoreet quis, elementum non est. Proin pretium iaculis magna, sed pharetra magna mollis quis. Cras eget diam vitae metus elementum varius. In hac habitasse platea dictumst.
}}

Preview

left

0

Fusce enim velit, vehicula id aliquet feugiat, volutpat nec justo. Fusce viverra metus nec quam ultricies tempor. Aenean ac justo risus. Vivamus leo augue, facilisis vitae congue vitae, pharetra sed massa. Pellentesque molestie risus vitae nisi placerat vel luctus justo rutrum. Proin gravida ullamcorper neque, sit amet porta diam tincidunt eu. Suspendisse vel orci pharetra massa semper interdum. Duis a ipsum ante, non tincidunt magna. Integer arcu nisi, laoreet nec faucibus ut, imperdiet a quam. Aenean vitae adipiscing erat. Donec semper, massa ac luctus congue, diam sapien ornare arcu, sit amet interdum tellus enim ut ligula.

1

In scelerisque ligula ut sem varius ultrices. Nam lectus enim, interdum vel semper quis, fringilla sed urna. Proin eget justo in dui porta posuere. Integer laoreet tellus et magna mattis facilisis. Donec metus turpis, mollis vitae laoreet quis, elementum non est. Proin pretium iaculis magna, sed pharetra magna mollis quis. Cras eget diam vitae metus elementum varius. In hac habitasse platea dictumst.

0

buttonstop Теxt 1

1

menuleft Теxt 2

right

0

Fusce enim velit, vehicula id aliquet feugiat, volutpat nec justo. Fusce viverra metus nec quam ultricies tempor. Aenean ac justo risus. Vivamus leo augue, facilisis vitae congue vitae, pharetra sed massa. Pellentesque molestie risus vitae nisi placerat vel luctus justo rutrum. Proin gravida ullamcorper neque, sit amet porta diam tincidunt eu. Suspendisse vel orci pharetra massa semper interdum. Duis a ipsum ante, non tincidunt magna. Integer arcu nisi, laoreet nec faucibus ut, imperdiet a quam. Aenean vitae adipiscing erat. Donec semper, massa ac luctus congue, diam sapien ornare arcu, sit amet interdum tellus enim ut ligula.

1

In scelerisque ligula ut sem varius ultrices. Nam lectus enim, interdum vel semper quis, fringilla sed urna. Proin eget justo in dui porta posuere. Integer laoreet tellus et magna mattis facilisis. Donec metus turpis, mollis vitae laoreet quis, elementum non est. Proin pretium iaculis magna, sed pharetra magna mollis quis. Cras eget diam vitae metus elementum varius. In hac habitasse platea dictumst.

0

buttonsbot Теxt 1

1

menuright Теxt 2

top

0

Fusce enim velit, vehicula id aliquet feugiat, volutpat nec justo. Fusce viverra metus nec quam ultricies tempor. Aenean ac justo risus. Vivamus leo augue, facilisis vitae congue vitae, pharetra sed massa. Pellentesque molestie risus vitae nisi placerat vel luctus justo rutrum. Proin gravida ullamcorper neque, sit amet porta diam tincidunt eu. Suspendisse vel orci pharetra massa semper interdum. Duis a ipsum ante, non tincidunt magna. Integer arcu nisi, laoreet nec faucibus ut, imperdiet a quam. Aenean vitae adipiscing erat. Donec semper, massa ac luctus congue, diam sapien ornare arcu, sit amet interdum tellus enim ut ligula.

1

In scelerisque ligula ut sem varius ultrices. Nam lectus enim, interdum vel semper quis, fringilla sed urna. Proin eget justo in dui porta posuere. Integer laoreet tellus et magna mattis facilisis. Donec metus turpis, mollis vitae laoreet quis, elementum non est. Proin pretium iaculis magna, sed pharetra magna mollis quis. Cras eget diam vitae metus elementum varius. In hac habitasse platea dictumst.

0

menutop Теxt 1

1

Теxt 2

bottom

0

Fusce enim velit, vehicula id aliquet feugiat, volutpat nec justo. Fusce viverra metus nec quam ultricies tempor. Aenean ac justo risus. Vivamus leo augue, facilisis vitae congue vitae, pharetra sed massa. Pellentesque molestie risus vitae nisi placerat vel luctus justo rutrum. Proin gravida ullamcorper neque, sit amet porta diam tincidunt eu. Suspendisse vel orci pharetra massa semper interdum. Duis a ipsum ante, non tincidunt magna. Integer arcu nisi, laoreet nec faucibus ut, imperdiet a quam. Aenean vitae adipiscing erat. Donec semper, massa ac luctus congue, diam sapien ornare arcu, sit amet interdum tellus enim ut ligula.

1

In scelerisque ligula ut sem varius ultrices. Nam lectus enim, interdum vel semper quis, fringilla sed urna. Proin eget justo in dui porta posuere. Integer laoreet tellus et magna mattis facilisis. Donec metus turpis, mollis vitae laoreet quis, elementum non est. Proin pretium iaculis magna, sed pharetra magna mollis quis. Cras eget diam vitae metus elementum varius. In hac habitasse platea dictumst.

0

menubottom Теxt 1

1

Теxt 2

Example 5

Code

{{switcher|menu=top
|Теxt 1#
Fusce enim velit, vehicula id aliquet feugiat, volutpat nec justo.
|Теxt 2#
In scelerisque ligula ut sem varius ultrices.
|Теxt 3#
In hac habitasse platea dictumst.
}}

Preview

top

0

Fusce enim velit, vehicula id aliquet feugiat, volutpat nec justo.

1

In scelerisque ligula ut sem varius ultrices.

2

In hac habitasse platea dictumst.

0

Теxt 1

1

Теxt 2

2

Теxt 3

Example 6

Code

{{switcher|style=topTabs|menu=top
|Теxt 1#
Fusce enim velit, vehicula id aliquet feugiat, volutpat nec justo.
|Теxt 2#
In scelerisque ligula ut sem varius ultrices.
|Теxt 3#
In hac habitasse platea dictumst.
}}

Preview

top

0

Fusce enim velit, vehicula id aliquet feugiat, volutpat nec justo.

1

In scelerisque ligula ut sem varius ultrices.

2

In hac habitasse platea dictumst.

0

Теxt 1

1

Теxt 2

2

Теxt 3

Tests

300px

300px

top

0

text on the left, buttons on the left, switcher on the left, menu on top, thumb style.

1

test

2

test

3

test

0

float-left

1

Tab2

2

Tab3

3

Tab4

300px

300px

top

0

text on the left, buttons on the right, switcher on the right, menu on top, thumb style.

1

test

2

test

3

test

0

float-right

1

Tab2

2

Tab3

3

Tab4

300px

300px

bottom

0

text on the left, buttons unspecified, switcher in the center, menu unspecified, thumb style.

1

test

2

test

3

test page embed: "testo"

0

center, hello

1

Tab2

2

Tab3

3

Tab4

300px

300px

top

0

text on the left, buttons unspecified, switcher position unspecified, menu top, Transparent style.

1

test

2

test

3

test testo

0

hello

1

Tab2

2

Tab3

3

Tab4