====== Demonstrace použití wiki-pluginu WRAP ======

Následující text je výtahem základního použití wiki-pluginu wrap. Při sepsiování tohoto textu bylo čerpáno z:
[[https://www.dokuwiki.org/_media/plugin:wrap_plugin_example7.png]]

===== Základní syntaxe =====
Používá se párová značka WRAP nebo wrap. Tento tag napsaný velkými písmeny vede k vytvoření DIVu na úrovni HTML kódu.
Tag napsaný malým písmem vede k vytvoření SPANu. WRAP je tedy určen pro velký obsah, zatímco wrap pro malý (jednořádkový) obsah.

<code>
<WRAP classes #id width :language>
"velký" obsah
</WRAP>

<wrap classes #id width :language> "malý" obsah </wrap>
</code>

Z přehldu syntaxe je patrné, co se v tagu definuje, je to: třída, identifikátor, šířka a jazyk.
Tagy Wrap lze do sebe zanořovat a vytvářet tak tabulky, definovat šířku sloupců každého vnořeného tagu (jde v podstatě o tabulku), apod.

====== Příklady ======

===== Boxy =====
<WRAP group>

<WRAP third column> 
<WRAP info 300px>INFO Box</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP info 300px>INFO Box</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída info, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round info 300px>INFO Box, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round info 300px>INFO Box, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída info, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>




<WRAP group>

<WRAP third column> 
<WRAP tip 300px>TIP Box</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP tip 300px>TIP Box</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída tip, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round tip 300px>TIP Box, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round tip 300px>TIP Box, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída tip, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>




<WRAP group>

<WRAP third column> 
<WRAP important 300px>IMPORTANT Box</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP important 300px>IMPORTANT Box</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída important, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round important 300px>IMPORTANT Box, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round important 300px>IMPORTANT Box, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída important, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>





<WRAP group>

<WRAP third column> 
<WRAP alert 300px>ALERT Box</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP alert 300px>ALERT Box</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída alert, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round alert 300px>ALERT Box, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round alert 300px>ALERT Box, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída alert, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>






<WRAP group>

<WRAP third column> 
<WRAP help 300px>HELP Box</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP help 300px>HELP Box</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída help, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round help 300px>HELP Box, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round help 300px>HELP Box, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída help, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>





<WRAP group>

<WRAP third column> 
<WRAP download 300px>DOWNLOAD Box</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP download 300px>DOWNLOAD Box</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída download, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round download 300px>DOWNLOAD Box, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round download 300px>DOWNLOAD Box, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída download, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>





<WRAP group>

<WRAP third column> 
<WRAP todo 300px>TODO Box</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP todo 300px>TODO Box</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída todo, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round todo 300px>TODO Box, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round todo 300px>TODO Box, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída todo, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>
===== Poznámky (Safety Notes) =====
<WRAP group>

<WRAP third column> 
<WRAP danger 300px>DANGER Note</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP danger 300px>DANGER Note</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída danger, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round danger 300px>DANGER Note, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round danger 300px>DANGER Note, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída danger, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>





<WRAP group>

<WRAP third column> 
<WRAP warning 300px>WARNING Note</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP warning 300px>WARNING Note</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída warning, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round warning 300px>WARNING Note, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round warning 300px>WARNING Note, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída warning, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>





<WRAP group>

<WRAP third column> 
<WRAP caution 300px>CAUTION Note</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP caution 300px>CAUTION Note</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída caution, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round caution 300px>CAUTION Note, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round caution 300px>CAUTION Note, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída caution, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>





<WRAP group>

<WRAP third column> 
<WRAP notice 300px>NOTICE Note</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP notice 300px>NOTICE Note</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída notice, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round notice 300px>NOTICE Note, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round notice 300px>NOTICE Note, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída notice, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>





<WRAP group>

<WRAP third column> 
<WRAP safety 300px>SAFETY Note</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP safety 300px>SAFETY Note</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída safety, ostré rohy, šířka 300px.
</WRAP>

</WRAP>


<WRAP group>

<WRAP third column> 
<WRAP round safety 300px>SAFETY Note, zaoblený</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round safety 300px>SAFETY Note, zaoblený</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída safety, zaoblené rohy, šířka 300px.
</WRAP>

</WRAP>



===== Zarovnávání textu =====
Text ve WAPech lze zarovnávat dle potřeby pomocí parametrů tagu: **leftalign**, **rightalign**, **centeralign**, **justify**

<WRAP group>

<WRAP third column> 
<WRAP round safety 300px rightalign>SAFETY Note, zaoblený, zarovnání doprava</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP round safety 300px rightalign>SAFETY Note, zaoblený, zarovnání doprava</WRAP>
</code>
</WRAP>

<WRAP third column>
Třída safety, zaoblené rohy, šířka 300px, zarovnání textu doprava.
</WRAP>

</WRAP>

===== Tabulkování, seskupování =====
Plugin WRAP umí rozdělit stránku (nebo část stránky) podle potřeby na polovinu **half**, třetinu **third**, čtvrtinu **quarter**.
Při demonstraci Boxů a Safety Notes výše bylo použito této možnosti a stránka byla rozdělena na třetiny, kde v prvním sloupci byla demonstrována vizuální ukázka kódu, ve druhém zápis kódu, ve třetím poznámka.
Nyní se v příkaldu zaměříme na toto rozdělení stránky nebo její části.

<WRAP group>

<WRAP third column> 
<WRAP group>
<WRAP third column>1.sloupec</WRAP>
<WRAP third column>2.sloupec</WRAP>
<WRAP third column>3.sloupec</WRAP>
</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP group>

<WRAP third column>1.sloupec</WRAP>
<WRAP third column>2.sloupec</WRAP>
<WRAP third column>3.sloupec</WRAP>

</WRAP>
</code>
</WRAP>

<WRAP third column>
Vytvoří skupinu tří sloupců, každý v šířce 1/3 přiděleného prostoru stránky
</WRAP>

</WRAP>





<WRAP group>

<WRAP third column> 
<WRAP group>
<wrap quarter column>1.sloupec</wrap>
<wrap quarter column>2.sloupec</wrap>
<wrap quarter column>3.sloupec</wrap>
<wrap quarter column>4.sloupec</wrap>
</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP group>

<wrap quarter column>1.sloupec</wrap>
<wrap quarter column>2.sloupec</wrap>
<wrap quarter column>3.sloupec</wrap>
<wrap quarter column>4.sloupec</wrap>

</WRAP>
</code>
</WRAP>

<WRAP third column>
Vytvoří skupinu čtyř sloupců, každý v šířce 1/4 přiděleného prostoru stránky, přitom použije tag wrap zapsaný malými písmeny, který vytváří SPAN (jednořádkový obsah = malý kontejner).
</WRAP>

</WRAP>






Uvedené rozdělení stránky na poloviny, třetiny a čtvrtiny je automatické a nemusí vždy vyhovovat záměru. Proto lze šířku definovat i manuálně v %, px, em. Stejně tak lze definovat i pozicování sloupců:
**column**, **left**, **right**, **center**.
<WRAP group>

<WRAP third column> 
<WRAP group>
<WRAP 100px column right>1.sloupec</WRAP>
<WRAP 5% column center>2.sloupec</WRAP>
<WRAP 100em column left>3.sloupec</WRAP>
</WRAP>
</WRAP>

<WRAP third column>
<code>
<WRAP group>

<WRAP 100px column right>1.sloupec</WRAP>
<WRAP 5% column center>2.sloupec</WRAP>
<WRAP 10em column left>3.sloupec</WRAP>

</WRAP>
</code>
</WRAP>

<WRAP third column>
Vytvoří skupinu tří sloupců, první v pravo, druhý na střed, třetí vlevo. Každý sloupec má jinak definovanou šířku.
</WRAP>

</WRAP>





<WRAP group>

<WRAP third column> 

<WRAP box 350px left :cs>
=== Vnější box obtékaný z prava ===

<WRAP 165px left>
Vnitřní box v levo
</WRAP>

Text ve vnějším boxu

<WRAP clear></WRAP>

<WRAP round tip>
Round TIP box ''clear''
</WRAP>

</WRAP>


</WRAP>

<WRAP third column>
<code>
<WRAP box 350px left :cs>
=== Vnější box obtékaný z prava ===

<WRAP 165px left>
Vnitřní box v levo
</WRAP>

Text ve vnějším boxu

<WRAP clear></WRAP>

<WRAP round tip>
Round TIP box ''clear''
</WRAP>

</WRAP>

</code>
</WRAP>

<WRAP third column>
Ukázka vnořování a zahnizďování boxů (vnější wrap používá třídu **box**), možnosti kombinování, atd.
</WRAP>

</WRAP>





===== Zvýrazňování a další funkce tagu WRAP/wrap =====

<WRAP group>

<WRAP third column> 
<wrap hi>Ahoj</wrap>, já jsem <wrap lo>různě zvýrazněná </wrap><wrap em>věta</wrap>.
</WRAP>

<WRAP third column>
<code>
<wrap hi>Ahoj</wrap>, já jsem <wrap lo>různě zvýrazněná </wrap><wrap em>věta</wrap>.
</code>
</WRAP>

<WRAP third column>
Možnosti zvýrazňování textu s pomocí tříd **hi**, **lo**, **em**, použitých v příkladu v tomto pořadí.
</WRAP>

</WRAP>






<WRAP group>

<WRAP third column> 
Zde následuje důležité upozornění: <wrap spoiler>Návštěvníci z vesmíru jsou mezi námi a konzumují olej !</wrap>
</WRAP>

<WRAP third column>
<code>
Zde následuje důležité upozornění: <wrap spoiler>Návštěvníci z vesmíru jsou mezi námi a konzumují olej !</wrap>
</code>
</WRAP>

<WRAP third column>
Ukázka zkrytého textu s použitím třídy **spoiler**, pro zobrazení textu je třeba jej myší označit/vybrat.
</WRAP>

</WRAP>



====== Použité zdroje a další informace o pluginu ======
[[https://www.dokuwiki.org/plugin:wrap]]
<html><BR></html>
[[https://www.dokuwiki.org/_media/plugin:wrap_plugin_example7.png]]