Help: Buttons: verschil tussen versies

Uit MediaWikiGids
Ga naar: navigatie, zoeken
(Aanmaken pagina, kopie van http://tweeki.thai-land.at/wiki/Buttons?action=edit)
 
k (→‎Parsing)
 
(6 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 1: Regel 1:
 
[[Categorie:Tweeki componenten]] __FORCETOC__
 
[[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"
 
{| class="table table-bordered"
−
! Markup !! Result
+
! Code !! Resultaat
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<btn>Simple Button</btn>
+
<btn>Eenvoudige Knop</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<btn>Simple Button</btn>
+
<btn>Eenvoudige Knop</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<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>
 
</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">Kleine Knop</btn>
−
<btn size="xs">Mini Button</btn></div>
+
<btn size="xs">Mini Knop</btn></div>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
 
<btn>
 
<btn>
−
Grouped
+
Gegroepeerde
−
Buttons
+
Knoppen
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn>
 
<btn>
−
Grouped
+
Gegroepeerde
−
Buttons
+
Knoppen
 
</btn>
 
</btn>
 
|-
 
|-
Regel 42: Regel 42:
 
<pre>
 
<pre>
 
<btn>
 
<btn>
−
Button
+
Knop
  
 
Tool
 
Tool
Regel 50: Regel 50:
 
|
 
|
 
<btn>
 
<btn>
−
Button
+
Knop
  
 
Tool
 
Tool
Regel 59: Regel 59:
 
<pre>
 
<pre>
 
<btn class="btn-primary">
 
<btn class="btn-primary">
−
Classy
+
Knoppen
−
Buttons
+
met klasse
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn class="btn-primary">
 
<btn class="btn-primary">
−
Classy
+
Knoppen
−
Buttons
+
met klasse
 
</btn>
 
</btn>
 
|-
 
|-
Regel 72: Regel 72:
 
<pre>
 
<pre>
 
<btn class="">
 
<btn class="">
−
Button without any class
+
Knop zonder klasse
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn class="">
 
<btn class="">
−
Button without any class
+
Knop zonder klasse
 
</btn>
 
</btn>
 
|-
 
|-
Regel 83: Regel 83:
 
<pre>
 
<pre>
 
<btn>
 
<btn>
−
Classy||btn-primary
+
Met Klasse||btn-primary
−
Non-classy
+
Zonder Klasse
−
Very Classy||btn-success
+
Veel Klasse||btn-success
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn>
 
<btn>
−
Classy||btn-primary
+
Met Klasse||btn-primary
−
Non-classy
+
Zonder Klasse
−
Very Classy||btn-success
+
Veel Klasse||btn-success
 
</btn>
 
</btn>
 
|-
 
|-
Regel 98: Regel 98:
 
<pre>
 
<pre>
 
<btn>
 
<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>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn>
 
<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>
 
</btn>
 
|}
 
|}
  
−
== Dropdown Buttons ==
+
== Dropdown Knoppen ==
  
 
{| class="table table-bordered"
 
{| class="table table-bordered"
−
! Markup !! Result
+
! Codering !! Resultaat
 
|-
 
|-
 
|
 
|
Regel 120: Regel 120:
 
<btn>
 
<btn>
 
Dropdown-Menu
 
Dropdown-Menu
−
* Some Menu Item
+
* Een Menu Item
 
*
 
*
−
* Some Other Menu Item
+
* Nog Een Menu Item
 
</btn>
 
</btn>
 
</pre>
 
</pre>
Regel 128: Regel 128:
 
<btn>
 
<btn>
 
Dropdown-Menu
 
Dropdown-Menu
−
* Some Menu Item
+
* Een Menu Item
 
*
 
*
−
* Some Other Menu Item
+
* Nog Een Menu Item
 
</btn>
 
</btn>
 
|-
 
|-
Regel 136: Regel 136:
 
<pre>
 
<pre>
 
<btn>
 
<btn>
−
Target|Split Dropdown
+
Doel|Gesplitste Dropdown
−
* Some Menu Item
+
* Een Menu Item
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn>
 
<btn>
−
Target|Split Dropdown
+
Doel|Gesplitste Dropdown
−
* Some Menu Item
+
* Een Menu Item
 
</btn>
 
</btn>
 
|-
 
|-
Regel 149: Regel 149:
 
<pre>
 
<pre>
 
<btn class="">
 
<btn class="">
−
Non-Button Dropdown
+
Dropdown zonder Knop
−
* Some Menu Item
+
* Een Menu Item
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn class="">
 
<btn class="">
−
Non-Button Dropdown
+
Dropdown zonder Knop
−
* Some Menu Item
+
* Een Menu Item
 
</btn>
 
</btn>
 
|-
 
|-
Regel 162: Regel 162:
 
<pre>
 
<pre>
 
<btn>
 
<btn>
−
Semantic Dropdown
+
Semantische Dropdown
−
* {{#ask:[[Category:Components]]}}
+
* {{#ask:[[Categorie:Tweeki Componenten]]}}
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn>
 
<btn>
−
Semantic Dropdown
+
Semantische Dropdown
−
* {{#ask:[[Category:Components]]}}
+
* {{#ask:[[Categorie:Tweeki Componenten]]}}
 
</btn>
 
</btn>
 
|}
 
|}
Regel 182: Regel 182:
 
<btn wrapperclass="btn-group dropup">
 
<btn wrapperclass="btn-group dropup">
 
Dropup
 
Dropup
−
* Some Menu Item
+
* Een Menu Item
 
</btn>
 
</btn>
 
</pre>
 
</pre>
Regel 188: Regel 188:
 
<btn wrapperclass="btn-group dropup">
 
<btn wrapperclass="btn-group dropup">
 
Dropup
 
Dropup
−
* Some Menu Item
+
* Een Menu Item
 
</btn>
 
</btn>
 
|-
 
|-
Regel 225: Regel 225:
  
 
{| class="table table-bordered"
 
{| class="table table-bordered"
−
! Markup !! Result
+
! Codering !! Resultaat
 
|-
 
|-
 
|
 
|
Regel 261: Regel 261:
 
|}
 
|}
  
−
== Icons ==
+
== Iconen ==
  
 
{| class="table table-bordered"
 
{| class="table table-bordered"
−
! Markup !! Result
+
! Codering !! Resultaat
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
 
<btn>
 
<btn>
−
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
+
Target|<span class="glyphicon glyphicon-cog"></span> icoon met span
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn>
 
<btn>
−
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
+
Target|<span class="glyphicon glyphicon-cog"></span> icoon met span
 
</btn>
 
</btn>
 
|-
 
|-
Regel 283: Regel 283:
 
</btn>
 
</btn>
 
</pre>
 
</pre>
−
<small>'''Note:''' the icon attribute is just a synonym for 'glyphicon'
+
<small>'''NB:''' het ''icon'' attribuut is gewoon een synoniem voor 'glyphicon'
 
|
 
|
 
<btn icon="cog">
 
<btn icon="cog">
Regel 303: Regel 303:
 
<pre>
 
<pre>
 
<btn fa="cog">
 
<btn fa="cog">
−
fa attribute
+
fa attribuut
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn fa="cog">
 
<btn fa="cog">
−
fa attribute
+
fa attribuut
 
</btn>
 
</btn>
 
|}
 
|}
Regel 319: Regel 319:
 
<pre>
 
<pre>
 
<btn>
 
<btn>
−
{{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}}
+
{{fullurl:{{FULLPAGENAME}}}}|{{ucfirst:magic words}}
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
 
<btn>
 
<btn>
−
{{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}}
+
{{fullurl:{{FULLPAGENAME}}}}|{{ucfirst:magic words}}
 
</btn>
 
</btn>
 
|-
 
|-
Regel 340: Regel 340:
 
|}
 
|}
  
−
== Miscellaneous ==
+
== Overige mogelijkheden ==
  
 
{| class="table table-bordered"
 
{| class="table table-bordered"
Regel 357: Regel 357:
 
</div>
 
</div>
 
</pre>
 
</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">
 
<div class="dropdown">
Regel 370: Regel 370:
 
|}
 
|}
  
−
== 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.

Huidige versie van 20 mrt 2017 om 21:28

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.

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
Kleine Knop
Mini Knop
<btn>
Gegroepeerde
Knoppen
</btn>
GegroepeerdeKnoppen
<btn>
Knop

Tool
Bar
</btn>
Knop
ToolBar
<btn class="btn-primary">
Knoppen
met klasse
</btn>
Knoppenmet klasse
<btn class="">
Knop zonder klasse
</btn>
Knop zonder klasse
<btn>
Met Klasse||btn-primary
Zonder Klasse
Veel Klasse||btn-success
</btn>
Met KlasseZonder KlasseVeel Klasse
<btn>
Standaard Knop
Een Pagina Naam|Interne Doelpagina
http://erge.ns|Externe Doelpagina
</btn>
Standaard KnopInterne DoelpaginaExterne Doelpagina

Dropdown Knoppen

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

Wrappers

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

ExplicitWrapperUnsetting

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

Iconen

Codering Resultaat 
<btn>
Target|<span class="glyphicon glyphicon-cog"></span> icoon met span
</btn>
icoon met span
<btn icon="cog">
icon attribute
</btn>

NB: het icon attribuut is gewoon een synoniem voor 'glyphicon'

icon attribute
<btn glyphicon="cog">
glyphicon attribute
</btn>
glyphicon attribute
<btn fa="cog">
fa attribuut
</btn>
fa attribuut

Parsing

Markup Result 
<btn>
{{fullurl:{{FULLPAGENAME}}}}|{{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

Overige mogelijkheden

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!

Data-Toggle-Attribut

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.

  1. Check of er een semantische querie staat.
  2. Wanneer er een bestaande of standaard interface message bestaat met die naam, gebruik dan de inhoud van dat bericht.
  3. Verwerk het.
  4. Wanneer het een geldige URL betreft (beginning with http:// or other URL protocol), the link will point to that URL.
  5. Indien geen van bovenstaanden, dan wordt het verwerkt als een wikilink.
Overgenomen van "http://gids.wikiwerkers.nl/w/index.php?title=Help:Buttons&oldid=70"