plugins:wrap [PH Freiburg]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== wrap ======
Erweitert DokuWiki um viele Elemente.

Es gibt funktional einige Dopplungen mit dem [[plugins:bootstrap_wrapper|bootstrap wrapper]]-Plugin.

<callout type="warning" icon="true">Zeilenumbrüche von Listen in Tabellen werden von [[https://www.dokuwiki.org/plugin:edittable| edittable ]] gelöscht</callout>


===== Syntax Grundlage =====
<grid>
<col sm="12" md="6">
Alle mit diesem Plugin gestalteten Elemente werden mit einem ''%%<WRAP>%%''-Tag umschlossen, das durch Attribute erweitert wird.

Man unterscheidet: 
  * <WRAP hi>Block-Elemente (in HTML %%<div>%%), die für ganze Absätze (oder Listen, Tabellen ...) gelten.</WRAP> Sie nehmen i. d. R. die komplette Seitenbreite ein. \\ Das WRAP-Plugin erzeugt Block-Elemente mit einem großgeschriebenen **%%<WRAP>%%**,
  * Inline-Elemente (in HTML %%<span>%%), die nur für <wrap hi>einen Teil eines Bereichs </wrap> gelten, z. B. einen Textabschnitt innerhalb eines Absatzes. \\ Das WRAP-Plugin erzeugt Inline-Elemente mit einem kleingeschriebenen **%%<wrap>%%**. 
</col>
<col sm="12" md="6">
<code><WRAP Attribut> ... Inhalte ... </WRAP></code>
<code><WRAP hi>Block-Elemente, die für ganze Absätze gelten. </WRAP></code>
<code>Inline-Elemente, die nur für <wrap hi>einen Teil eines Bereichs </wrap> gelten</code>
</col></grid>

===== Texte =====

<grid>
<col sm="12" md="6">
Dieser Text ist <wrap hi>hervorgehoben</wrap>, <wrap lo>weniger wichtig</wrap> und <wrap em>besonders hervorgehoben</wrap>.
\\ \\
<wrap indent>Dieser Text wird eingerückt.</wrap>
\\ \\
<wrap outdent>Dieser Text wird "ausgerückt".</wrap>
\\ \\
Es folgt der Spoiler: <wrap spoiler>Dieser Text wird erst nach Markieren sichtbar.</wrap>
\\ \\
Der folgende Text ist versteckt: <wrap hide>Dieser Abschnitt muss überarbeitet werden.</wrap> \\
:!: Achtung: Der Text ist nur in der direkten Anzeige versteckt. Beim Ansehen des Quelltextes der Seite oder beim Bearbeiten ist dieser trotzdem sichtbar, wird in älteren Browser angezeigt und durch die Suchfunktion gefunden. 
\\ \\
<WRAP centeralign>Zentrierter Text...</WRAP>
\\ \\
<WRAP rightalign>... rechtsbündiger Text.</WRAP>
</col>
<col sm="12" md="6"><code>
Dieser Text ist <wrap hi>hervorgehoben</wrap>, <wrap lo>weniger wichtig</wrap> und <wrap em>besonders hervorgehoben</wrap>.
</code><code>
<wrap indent>Dieser Text wird eingerückt.</wrap>
</code><code>
<wrap outdent>Dieser Text wird "ausgerückt".</wrap>
</code><code>
Es folgt der Spoiler: <wrap spoiler>Dieser Text wird erst nach Markieren sichtbar.</wrap>
</code><code>
Der folgende Text ist versteckt: <wrap hide>Dieser Abschnitt muss überarbeitet werden.</wrap> 
</code><code>
<WRAP centeralign>Zentrierter Text...</WRAP>
</code><code>
<WRAP rightalign>... rechtsbündiger Text.</WRAP>
</code></col></grid>

===== Mehrspaltigkeit =====
<grid>
<col sm="12" md="6">
<WRAP col3>Moderne Browser (Firefox, Chrome, Safari, ...) unterstützen Mehrspaltigkeit.\\ Schreiben Sie einfach **''%%col2%%''** für 2 Spalten, **''%%col3%%''** für 3 Spalten, **''%%col4%%''** für 4 Spalten und **''%%col5%%''** für 5 Spalten.\\ Die Inhalte werden automatisch auf die Spalten verteilt.</WRAP>
</col>
<col sm="12" md="6">
<code>
<WRAP col3>Moderne Browse (Firefox, Chrome, Safari, ...) unterstützen Mehrspaltigkeit.\\ Schreiben Sie einfach **''%%col2%%''** für 2 Spalten, **''%%col3%%''** für 3 Spalten, **''%%col4%%''** für 4 Spalten und **''%%col5%%''** für 5 Spalten.\\ Die Inhalte werden automatisch auf die Spalten verteilt.</WRAP>
</code></col></grid>

===== Boxen =====
Sie können einen Box um ein ''WRAP''-Element herum erzeugen. Die erste Angabe beschreibt den Typ der Box:
  * ''column'' erzeugt eine neutrale Textbox ohne Hintergrundfarbe, z. B. für mehrere Spalten mit festem Inhalt,
  * ''box'' erzeugt eine Box in unauffälliger Farbe, ''danger'', ''warning'', ''caution'', ''notice'', ''safety'' mit Signalfarben,
  * mit ''info'', ''tip'', ''important'', ''alert'', ''help'', ''download'', ''todo'' erhält die Box eine Färbung und ein Symbol.
<grid><col sm="12" md="6">
<WRAP box round>Mit der Option ''round'' werden die Ecken abgerundet.</WRAP>

Es kann eine Breite vorgegeben werden. Gängig sind
<WRAP clear></WRAP>
<WRAP box 200px left>Pixel ''px'' für eine feste Breite,</WRAP>
<WRAP box 50%> Prozent ''%'' für eine relative Breite.</WRAP>
<WRAP clear></WRAP>
Zusätzlich wird noch Platz für den Abstand um die Box herum verbraucht.

<WRAP box round>Ohne Breitenangabe geht die Box über die gesamte Breite</WRAP>
<WRAP box 200px center>''center'' zentriert die Box</WRAP>
<WRAP box 30% left>Position ''left''\\ (oder ''column'')</WRAP> <WRAP box 20% right>Position ''right''</WRAP>Wenn die Box links oder rechts positioniert wird, wird sie von Text umflossen. <WRAP clear></WRAP>Dies kann durch ein ''clear'' beendet werden. 
</col>
<col sm="12" md="6">
<code>
<WRAP box round>Mit der Option ''round'' werden die Ecken abgerundet.</WRAP>
</code><code>
<WRAP box 200px left>Pixel ''px'' für eine feste Breite,</WRAP>
<WRAP box 50%> Prozent ''%'' für eine relative Breite.</WRAP>
</code><code>
<WRAP box round>Ohne Breitenangabe geht die Box über die gesamte Breite</WRAP>
</code><code>
<WRAP box 200px center>''center'' zentriert die Box</WRAP>
</code><code>
<WRAP box 30% left>Position ''left'' (oder ''column'')</WRAP>
<WRAP box 20% right>Position ''right''</WRAP>
Wenn die Box links oder rechts positioniert wird, wird sie von Text umflossen.
<WRAP clear></WRAP>Dies kann durch ein ''clear'' beendet werden. 
</code>
</col></grid>

=== Boxentypen ===
<grid>
<col sm="12" md="6">
<WRAP column 25%>Textboxen mit ''column''</WRAP>
<WRAP column 25%>die **zweite** Spalte von drei mit jeweils 25% Breite</WRAP>
<WRAP column 25%>die **dritte** Spalte von drei mit jeweils 25% Breite</WRAP>
</col>
<col sm="12" md="6"><code>
<WRAP column 25%>Textboxen mit ''column''</WRAP>
<WRAP column 25%>die **zweite** Spalte von drei mit jeweils 25% Breite</WRAP>
<WRAP column 25%>die **dritte** Spalte von drei mit jeweils 25% Breite</WRAP>
</code></col></grid>

<grid>
<col sm="12" md="6">
<WRAP info 25% left>Info</WRAP>

<WRAP tip 25% left>Tip</WRAP>

<WRAP important 30% left>Important</WRAP>

<WRAP alert 25%px left>Alert</WRAP>

<WRAP round help 25%px left>Help</WRAP>

<WRAP download 30% left>Download</WRAP>

<WRAP todo 25% left>Todo</WRAP>

<WRAP clear></WRAP>
</col>
<col sm="12" md="6"><code>
<WRAP info 25% left>Info</WRAP>
<WRAP tip 25% left>Tip</WRAP>
<WRAP important 30% left>Important</WRAP>
<WRAP alert 25%px left>Alert</WRAP>
<WRAP help round 25%px left>Help</WRAP>
<WRAP download 30% left>Download</WRAP>
<WRAP todo 25% left>Todo</WRAP>
</code></col></grid>
<grid>
<col sm="12" md="6">
<WRAP box round 25% left>box</WRAP>

<WRAP danger 25% left>Danger</WRAP>

<WRAP warning 25% left>Warning</WRAP>

<WRAP caution 25% left>Caution</WRAP>

<WRAP notice round 25% left>Notice</WRAP>

<WRAP safety round 25% left>Safety</WRAP>

<WRAP clear></WRAP>
</col><col sm="12" md="6">
<code>
<WRAP box round 25% left>box</WRAP>
<WRAP danger 25% left>Danger</WRAP>
<WRAP warning 25% left>Warning</WRAP>
<WRAP caution 25% left>Caution</WRAP>
<WRAP notice round 25% left>Notice</WRAP>
<WRAP safety round 25% left>Safety</WRAP>
</code></col></grid>
<grid>
<col sm="12" md="6">
Die Hinweisboxen können ebenfalls **inline** im Fließtext eingesetzt werden:

<wrap info>info</wrap>, <wrap help>help</wrap>, <wrap alert>alert</wrap>, <wrap important>important</wrap>, <wrap tip>tip</wrap>, <wrap download>download</wrap>, <wrap todo>todo</wrap>\\ und <wrap box round>box</wrap>, <wrap danger>danger</wrap>, <wrap warning>warning</wrap>, <wrap caution>caution</wrap>, <wrap notice>notice</wrap>, <wrap safety>safety</wrap>.
</col>
<col sm="12" md="6">
<code>
<wrap info>info</wrap>, <wrap help>help</wrap>, <wrap alert>alert</wrap>, <wrap important>important</wrap>, <wrap tip>tip</wrap>, <wrap download>download</wrap>, <wrap todo>todo</wrap>\\ und <wrap box round>box</wrap>, <wrap danger>danger</wrap>, <wrap warning>warning</wrap>, <wrap caution>caution</wrap>, <wrap notice>notice</wrap>, <wrap safety>safety</wrap>.
</code></col></grid>
\\ \\
<grid>
<col sm="12" md="6"><WRAP>
<WRAP caution 70% right>
//**__Box, rechts positioniert und links umflossen__**//

<WRAP column 50%>
Innere Box, links positioniert. Der Text ist teilweise <wrap hi>hervorgehoben</wrap>.
</WRAP>

Text nach der inneren Box umfließt rechts bis zu einem ''clear'' <WRAP clear></WRAP>

<WRAP important round>Runde "Important"-Box, unter einem ''clear''.</WRAP>
</WRAP>
Boxen lassen sich kombinieren und ineinander verschachteln</WRAP>
</col>
<col sm="12" md="6">
<code>
<WRAP caution 70% right>
  //**__Box, rechts positioniert und links umflossen__**//

  <WRAP column 50%>
    Innere Box, links positioniert.
    Der Text ist teilweise <wrap hi>hervorgehoben</wrap>.
  </WRAP>

  Text nach der inneren Box umfließt rechts
  bis zu einem ''clear'' <WRAP clear></WRAP>

  <WRAP important round>Runde "Important"-Box,
  unter einem ''clear''.</WRAP>
  
</WRAP>
Boxen lassen sich kombinieren und ineinander verschachteln
</code>
</col></grid>
===== Drucken =====
<grid>
<col sm="12" md="6">
Hinter dieser Zeile folgt im Druck ein Seitenumbruch. <WRAP pagebreak></WRAP>
\\ \\
<wrap noprint>Dieser Text erscheint auf dem Bildschirm, aber nicht auf einem Ausdruck.</wrap>
\\ \\
<wrap onlyprint>Dieser Text erscheint nicht auf dem Bildschirm, nur auf einem Ausdruck.</wrap>

Diese Einstellungen gelten auch für den pdf-Export über das Plugin [[plugins:dw2pdf|dw2pdf]].
</col>
<col sm="12" md="6">
<code>
Hinter dieser Zeile folgt im Druck ein Seitenumbruch.
<WRAP pagebreak></WRAP>
</code><code>
<wrap noprint>Dieser Text erscheint auf dem Bildschirm, aber nicht auf einem Ausdruck.</wrap>
</code><code>
<wrap onlyprint>Dieser Text erscheint nicht auf dem Bildschirm, nur auf einem Ausdruck.</wrap>
</code></col></grid>

===== WRAP ohne Attribut =====

Da ein WRAP-Block seine Inhalte nach außen abkapselt, lassen sich durch ein einfaches ''%%<WRAP>%%'' Formatierungen umsetzen, die sonst nicht möglich sind. 

**Beispiel:** in Tabellenfeldern lassen sich normalerweise keine Listen anlegen, weil ein Listenpukte mit einem Zeilenumbruch abgeschlossen werden muss, der aber auch zu einer neuen Reihe in einer Tabelle führen würde. Ist die Liste innerhalb eines WRAP-Blocks, wird der Zeilenumbruch dort als "Ende einer Listenzeile" verarbeitet, aber in der umliegenden Tabelle nicht als "Ende der Reihe" ausgewertet:

<grid>
<col sm="12" md="6">
^ Spalte 1 ^ Spalte 2 ^
| <WRAP>
Liste in Tabellenfeld
  * Listenpunkt 1
  * Listenpunkt 2
</WRAP>  | Inhalt Spalte 2 |
</col>
<col sm="12" md="6">
<code>
^ Spalte 1 ^ Spalte 2 ^
| <WRAP>
Liste in Tabellenfeld
  * Listenpunkt 1
  * Listenpunkt 2
</WRAP> | Inhalt spalte 2 |
</code></col></grid>