Help: Buttons: verschil tussen versies

Versie van 20 mrt 2017 om 19:58

Met de Tweeki-skin is het erg gemakkelijk om iedere gewenste knop ('button') te maken. Door het gebruik van slimme standaardwaarden is de benodigde codering zeer beknopt.

Pas op: Deze functionaliteit omzeilt de standaard behandeling van koppelingen ('links') door MediaWiki-software. Dit heeft mogelijk gevolgen voor de veiligheid van de website. Het is dus raadzaam alleen vertrouwde mensen tekst in de wiki te laten bewerken. Ook werken functie als 'koppelingen binnen de website' ('Links to this site') niet voor knop-koppelingen.

Standaard knoppen

Code	Resultaat
<btn>Eenvoudige Knop</btn>	Eenvoudige Knop
<btn size="lg">Grote Knop</btn> <btn size="sm">Kleine Knop</btn> <btn size="xs">Mini Knop</btn>	Grote Knop Kleinel Knop Mini Knop
<btn> Gegroepeerde Knoppen </btn>	Gegroepeerde Knoppen
<btn> Knop Tool Bar </btn>	Knop Tool Bar
<btn class="btn-primary"> Knoppen met klasse </btn>	Knoppen met klasse
<btn class=""> Knop zonder klasse </btn>	Knop zonder klasse
<btn> Met Klasse\|\|btn-primary Zonder Klasse Veel Klasse\|\|btn-success </btn>	Met Klasse Zonder Klasse Veel Klasse
<btn> Standaard Knop Een Pagina Naam\|Interne Doelpagina http://erge.ns\|Externe Doelpagina </btn>	Standaard Knop Interne Doelpagina Externe Doelpagina

Dropdown Knoppen

Codering	Resultaat
<btn> Dropdown-Menu * Een Menu Item * * Nog Een Menu Item </btn>	Dropdown-Menu Een Menu Item Nog Een Menu Item
<btn> Doel\|Gesplitste Dropdown * Een Menu Item </btn>	Gesplitste Dropdown ‌ Een Menu Item
<btn class=""> Dropdown zonder Knop * Een Menu Item </btn>	Dropdown zonder Knop Een Menu Item
<btn> Semantische Dropdown * {{#ask:[[Category:Components]]}} </btn>	Semantische Dropdown [[Category:Components]]

Wrappers

Markup	Result
<btn wrapperclass="btn-group dropup"> Dropup * Een Menu Item </btn>	Dropup Een Menu Item
<btn wrapperclass="btn-group-vertical"> Explicit Wrapper Setting </btn>	Explicit Wrapper Setting
<btn wrapper=""> Explicit Wrapper Unsetting </btn>	Explicit Wrapper Unsetting

Styling

Codering	Resultaat
<btn> Target\|<i>Italic Tag</i> </btn>	Italic Tag
<btn> Target\|''Italic Wiki Markup'' </btn>	Italic Wiki Markup
''<btn> Surrounding Italic Wiki Markup </btn>''	Surrounding Italic Wiki Markup

Icons

Markup	Result
<btn> Target\|<span class="glyphicon glyphicon-cog"></span> icon with span </btn>	icon with span
<btn icon="cog"> icon attribute </btn> Note: the icon attribute is just a synonym for 'glyphicon'	icon attribute
<btn glyphicon="cog"> glyphicon attribute </btn>	glyphicon attribute
<btn fa="cog"> fa attribute </btn>	fa attribute

Parsing

Markup

Result

<btn>
{{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}}
</btn>

Magic words

<btn>
mainpage
</btn>

Info: if a system message by that name exists, the text will be replaced by it's content

Hoofdpagina

Miscellaneous

Markup Result

<div class="dropdown">
<btn data-toggle="dropdown">
Data-Toggle-Attribut <b class="caret"></b>
</btn><ul class="dropdown-menu" id="file-dropdown-menu">
<li>[[Buttons]]</li>
<li class="divider"></li>
<li>[[Test]]</li>
</ul>
</div>

Attentie! Zorg ervoor dat je niet de ul op een nieuwe regel plaatst!

Specificaties

De algemene structuur van de de codering voor een enkele knop is target|text|class, waarin text en class optioneel zijn. Wanneer text wordt weggelaten, dan wordt er van uit gegaan dat deze hetzelfde is als target. target en text worden verwerkt volgens het onderstaande algoritme.

Check of er een semantische querie staat.
Wanneer er een bestaande of standaard interface message bestaat met die naam, gebruik dan de inhoud van dat bericht.
Verwerk het.
Wanneer het een geldige URL betreft (beginning with http:// or other URL protocol), the link will point to that URL.
Indien geen van bovenstaanden, dan wordt het verwerkt als een wikilink.

@@ Regel 1: / Regel 1: @@
 [[Categorie:Tweeki componenten]] __FORCETOC__
-With Tweeki it is very easy to create any button you would like to have. By using smart defaults the markup can be very reduced.
+Met de Tweeki-skin is het erg gemakkelijk om iedere gewenste knop ('button') te maken. Door het gebruik van slimme standaardwaarden is de benodigde codering zeer beknopt.
-<div class="alert alert-info" role="alert"><strong>Caveat:</strong> This feature bypasses MediaWiki's default link handling. This might have security implications. You should only allow editing to people you trust! Also features like 'Links to this site' will not work for button links.</div>
+<div class="alert alert-info" role="alert"><strong>Pas op:</strong> Deze functionaliteit omzeilt de standaard behandeling van koppelingen ('links') door MediaWiki-software. Dit heeft mogelijk gevolgen voor de veiligheid van de website. Het is dus raadzaam alleen vertrouwde mensen tekst in de wiki te laten bewerken. Ook werken functie als 'koppelingen binnen de website' ('Links to this site') niet voor knop-koppelingen.</div>
-== Standard Buttons ==
+== Standaard knoppen ==
 {| class="table table-bordered"
-! Markup !! Result
+! Code !! Resultaat
 |-
 |
 <pre>
-<btn>Simple Button</btn>
+<btn>Eenvoudige Knop</btn>
 </pre>
 |
-<btn>Simple Button</btn>
+<btn>Eenvoudige Knop</btn>
 |-
 |
 <pre>
-<btn size="lg">Large Button</btn>
+<btn size="lg">Grote Knop</btn>
-<btn size="sm">Small Button</btn>
+<btn size="sm">Kleine Knop</btn>
-<btn size="xs">Mini Button</btn>
+<btn size="xs">Mini Knop</btn>
 </pre>
 |
-<div class="btn-toolbar"><btn size="lg">Large Button</btn>
+<div class="btn-toolbar"><btn size="lg">Grote Knop</btn>
-<btn size="sm">Small Button</btn>
+<btn size="sm">Kleinel Knop</btn>
-<btn size="xs">Mini Button</btn></div>
+<btn size="xs">Mini Knop</btn></div>
 |-
 |
 <pre>
 <btn>
-Grouped
+Gegroepeerde
-Buttons
+Knoppen
 </btn>
 </pre>
 |
 <btn>
-Grouped
+Gegroepeerde
-Buttons
+Knoppen
 </btn>
 |-
@@ Regel 42: / Regel 42: @@
 <pre>
 <btn>
-Button
+Knop
 Tool
@@ Regel 50: / Regel 50: @@
 |
 <btn>
-Button
+Knop
 Tool
@@ Regel 59: / Regel 59: @@
 <pre>
 <btn class="btn-primary">
-Classy
+Knoppen met klasse
-Buttons
 </btn>
 </pre>
 |
 <btn class="btn-primary">
-Classy
+Knoppen
-Buttons
+met klasse
 </btn>
 |-
@@ Regel 72: / Regel 71: @@
 <pre>
 <btn class="">
-Button without any class
+Knop zonder klasse
 </btn>
 </pre>
 |
 <btn class="">
-Button without any class
+Knop zonder klasse
 </btn>
 |-
@@ Regel 83: / Regel 82: @@
 <pre>
 <btn>
-Classy||btn-primary
+Met Klasse||btn-primary
-Non-classy
+Zonder Klasse
-Very Classy||btn-success
+Veel Klasse||btn-success
 </btn>
 </pre>
 |
 <btn>
-Classy||btn-primary
+Met Klasse||btn-primary
-Non-classy
+Zonder Klasse
-Very Classy||btn-success
+Veel Klasse||btn-success
 </btn>
 |-
@@ Regel 98: / Regel 97: @@
 <pre>
 <btn>
-Standard Button
+Standaard Knop
-Some Page Title|Internal Target
+Een Pagina Naam|Interne Doelpagina
-http://some.where|External Target
+http://erge.ns|Externe Doelpagina
 </btn>
 </pre>
 |
 <btn>
-Standard Button
+Standaard Knop
-Some Page Title|Internal Target
+Een Pagina Naam|Interne Doelpagina
-http://some.where|External Target
+http://erge.ns|Externe Doelpagina
 </btn>
 |}
-== Dropdown Buttons ==
+== Dropdown Knoppen ==
 {| class="table table-bordered"
-! Markup !! Result
+! Codering !! Resultaat
 |-
 |
@@ Regel 120: / Regel 119: @@
 <btn>
 Dropdown-Menu
-* Some Menu Item
+* Een Menu Item
 *
-* Some Other Menu Item
+* Nog Een Menu Item
 </btn>
 </pre>
@@ Regel 128: / Regel 127: @@
 <btn>
 Dropdown-Menu
-* Some Menu Item
+* Een Menu Item
 *
-* Some Other Menu Item
+* Nog Een Menu Item
 </btn>
 |-
@@ Regel 136: / Regel 135: @@
 <pre>
 <btn>
-Target|Split Dropdown
+Doel|Gesplitste Dropdown
-* Some Menu Item
+* Een Menu Item
 </btn>
 </pre>
 |
 <btn>
-Target|Split Dropdown
+Doel|Gesplitste Dropdown
-* Some Menu Item
+* Een Menu Item
 </btn>
 |-
@@ Regel 149: / Regel 148: @@
 <pre>
 <btn class="">
-Non-Button Dropdown
+Dropdown zonder Knop
-* Some Menu Item
+* Een Menu Item
 </btn>
 </pre>
 |
 <btn class="">
-Non-Button Dropdown
+Dropdown zonder Knop
-* Some Menu Item
+* Een Menu Item
 </btn>
 |-
@@ Regel 162: / Regel 161: @@
 <pre>
 <btn>
-Semantic Dropdown
+Semantische Dropdown
 * {{#ask:[[Category:Components]]}}
 </btn>
@@ Regel 168: / Regel 167: @@
 |
 <btn>
-Semantic Dropdown
+Semantische Dropdown
 * {{#ask:[[Category:Components]]}}
 </btn>
@@ Regel 182: / Regel 181: @@
 <btn wrapperclass="btn-group dropup">
 Dropup
-* Some Menu Item
+* Een Menu Item
 </btn>
 </pre>
@@ Regel 188: / Regel 187: @@
 <btn wrapperclass="btn-group dropup">
 Dropup
-* Some Menu Item
+* Een Menu Item
 </btn>
 |-
@@ Regel 225: / Regel 224: @@
 {| class="table table-bordered"
-! Markup !! Result
+! Codering !! Resultaat
 |-
 |
@@ Regel 357: / Regel 356: @@
 </div>
 </pre>
-<small>'''Attention!''' Be careful not to have the <code>ul</code> on a new line!</small>
+<small>'''Attentie!''' Zorg ervoor dat je '''niet''' de <code>ul</code> op een nieuwe regel plaatst!</small>
 |
 <div class="dropdown">
@@ Regel 370: / Regel 369: @@
 |}
-== Specifications ==
+== Specificaties ==
-The general structure for the code of a single button is <code>target|text|class</code>, where <code>text</code> and <code>class</code> are optional. If <code>text</code> is omitted it is assumed to be the same as <code>target</code>. <code>target</code> and <code>text</code> are parsed after the following algorithm.
+De algemene structuur van de de codering voor een enkele knop is <code>target|text|class</code>, waarin <code>text</code> en <code>class</code> optioneel zijn. Wanneer <code>text</code> wordt weggelaten, dan wordt er van uit gegaan dat deze hetzelfde is als <code>target</code>. <code>target</code> en <code>text</code> worden verwerkt volgens het onderstaande algoritme.
-# Check for semantic queries.
+# Check of er een semantische querie staat.
-# If there is an existing or default interface message with that name, use the content of that message instead.
+# Wanneer er een bestaande of standaard interface message bestaat met die naam, gebruik dan de inhoud van dat bericht.
-# Parse it.
+# Verwerk het.
-# If it is a valid URL (beginning with http:// or other URL protocol), the link will point to that URL.
+# Wanneer het een geldige URL betreft (beginning with http:// or other URL protocol), the link will point to that URL.
-# Else, it will be treated as a wikilink.
+# Indien geen van bovenstaanden, dan wordt het verwerkt als een wikilink.