Help:Buttons - Bewerkingsoverzicht

Bmulckhu: /* Parsing */

2017-03-20T19:28:09Z

‎Parsing

Bmulckhu: /* Miscellaneous */

2017-03-20T19:26:38Z

‎Miscellaneous

Bmulckhu: /* Dropdown Knoppen */

2017-03-20T19:25:33Z

‎Dropdown Knoppen

Bmulckhu: /* Dropdown Knoppen */

2017-03-20T19:24:49Z

‎Dropdown Knoppen

Bmulckhu: /* Icons */

2017-03-20T19:23:35Z

‎Icons

Bmulckhu: /* Standaard knoppen */

2017-03-20T18:01:44Z

‎Standaard knoppen

Bmulckhu: Vertaald in Nederlands

2017-03-20T17:58:39Z

Vertaald in Nederlands

Wijzigingen bekijken

Bmulckhu: Aanmaken pagina, kopie van http://tweeki.thai-land.at/wiki/Buttons?action=edit

2017-03-19T22:51:10Z

Aanmaken pagina, kopie van http://tweeki.thai-land.at/wiki/Buttons?action=edit

Nieuwe pagina

[[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.

<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>

== Standard Buttons ==
{| class="table table-bordered"
! Markup !! Result
|-
|
<pre>
<btn>Simple Button</btn>
</pre>
|
<btn>Simple Button</btn>
|-
|
<pre>
<btn size="lg">Large Button</btn>
<btn size="sm">Small Button</btn>
<btn size="xs">Mini Button</btn>
</pre>
|
<div class="btn-toolbar"><btn size="lg">Large Button</btn>
<btn size="sm">Small Button</btn>
<btn size="xs">Mini Button</btn></div>
|-
|
<pre>
<btn>
Grouped
Buttons
</btn>
</pre>
|
<btn>
Grouped
Buttons
</btn>
|-
|
<pre>
<btn>
Button

Tool
Bar
</btn>
</pre>
|
<btn>
Button

Tool
Bar
</btn>
|-
|
<pre>
<btn class="btn-primary">
Classy
Buttons
</btn>
</pre>
|
<btn class="btn-primary">
Classy
Buttons
</btn>
|-
|
<pre>
<btn class="">
Button without any class
</btn>
</pre>
|
<btn class="">
Button without any class
</btn>
|-
|
<pre>
<btn>
Classy||btn-primary
Non-classy
Very Classy||btn-success
</btn>
</pre>
|
<btn>
Classy||btn-primary
Non-classy
Very Classy||btn-success
</btn>
|-
|
<pre>
<btn>
Standard Button
Some Page Title|Internal Target
http://some.where|External Target
</btn>
</pre>
|
<btn>
Standard Button
Some Page Title|Internal Target
http://some.where|External Target
</btn>
|}

== Dropdown Buttons ==

{| class="table table-bordered"
! Markup !! Result
|-
|
<pre>
<btn>
Dropdown-Menu
* Some Menu Item
*
* Some Other Menu Item
</btn>
</pre>
|
<btn>
Dropdown-Menu
* Some Menu Item
*
* Some Other Menu Item
</btn>
|-
|
<pre>
<btn>
Target|Split Dropdown
* Some Menu Item
</btn>
</pre>
|
<btn>
Target|Split Dropdown
* Some Menu Item
</btn>
|-
|
<pre>
<btn class="">
Non-Button Dropdown
* Some Menu Item
</btn>
</pre>
|
<btn class="">
Non-Button Dropdown
* Some Menu Item
</btn>
|-
|
<pre>
<btn>
Semantic Dropdown
* {{#ask:[[Category:Components]]}}
</btn>
</pre>
|
<btn>
Semantic Dropdown
* {{#ask:[[Category:Components]]}}
</btn>
|}

== Wrappers ==

{| class="table table-bordered"
! Markup !! Result
|-
|
<pre>
<btn wrapperclass="btn-group dropup">
Dropup
* Some Menu Item
</btn>
</pre>
|
<btn wrapperclass="btn-group dropup">
Dropup
* Some Menu Item
</btn>
|-
|
<pre>
<btn wrapperclass="btn-group-vertical">
Explicit
Wrapper
Setting
</btn>
</pre>
|
<btn wrapperclass="btn-group-vertical">
Explicit
Wrapper
Setting
</btn>
|-
|
<pre>
<btn wrapper="">
Explicit
Wrapper
Unsetting
</btn>
</pre>
|
<btn wrapper="">
Explicit
Wrapper
Unsetting
</btn>
|}

== Styling ==

{| class="table table-bordered"
! Markup !! Result
|-
|
<pre>
<btn>
Target|<i>Italic Tag</i>
</btn>
</pre>
|
<btn>
Target|<i>Italic Tag</i>
</btn>
|-
|
<pre>
<btn>
Target|''Italic Wiki Markup''
</btn>
</pre>
|
<btn>
Target|''Italic Wiki Markup''
</btn>
|-
|
<pre>
''<btn>
Surrounding Italic Wiki Markup
</btn>''
</pre>
|
''<btn>
Surrounding Italic Wiki Markup
</btn>''
|}

== Icons ==

{| class="table table-bordered"
! Markup !! Result
|-
|
<pre>
<btn>
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
</btn>
</pre>
|
<btn>
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
</btn>
|-
|
<pre>
<btn icon="cog">
icon attribute
</btn>
</pre>
<small>'''Note:''' the icon attribute is just a synonym for 'glyphicon'
|
<btn icon="cog">
icon attribute
</btn>
|-
|
<pre>
<btn glyphicon="cog">
glyphicon attribute
</btn>
</pre>
|
<btn glyphicon="cog">
glyphicon attribute
</btn>
|-
|
<pre>
<btn fa="cog">
fa attribute
</btn>
</pre>
|
<btn fa="cog">
fa attribute
</btn>
|}

== Parsing ==
{| class="table table-bordered"
! Markup !! Result
|-
|
<pre>
<btn>
{{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}}
</btn>
</pre>
|
<btn>
{{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}}
</btn>
|-
|
<pre>
<btn>
mainpage
</btn>
</pre>
<small><b>Info</b>: if a system message by that name exists, the text will be replaced by it's content</small>
|
<btn>
mainpage
</btn>
|}

== Miscellaneous ==

{| class="table table-bordered"
! Markup !! Result
|-
|
<pre>
<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>
</pre>
<small>'''Attention!''' Be careful not to have the <code>ul</code> on a new line!</small>
|
<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>
|}

== Specifications ==

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.

# Check for semantic queries.
# If there is an existing or default interface message with that name, use the content of that message instead.
# Parse it.
# If it is a valid URL (beginning with http:// or other URL protocol), the link will point to that URL.
# Else, it will be treated as a wikilink.

@@ Regel 169: / Regel 169: @@
 <btn>
 Semantische Dropdown
-* {{#ask:[[Category:Components]]}}
+* {{#ask:[[Categorie:Tweeki Componenten]]}}
 </btn>
 |}

@@ Regel 163: / Regel 163: @@
 <btn>
 Semantische Dropdown
-* {{#ask:[[Category:Components]]}}
+* {{#ask:[[Categorie:Tweeki Componenten]]}}
 </btn>
 </pre>

@@ Regel 23: / Regel 23: @@
+|
 <div class="btn-toolbar"><btn size="lg">Grote Knop</btn>
-<btn size="sm">Kleinel Knop</btn>
+<btn size="sm">Kleine Knop</btn>
 <btn size="xs">Mini Knop</btn></div>
 |-
@@ Regel 59: / Regel 59: @@
 <pre>
 <btn class="btn-primary">
-Knoppen met klasse
+Knoppen
 </btn>
 </pre>

@@ Regel 319: / Regel 319: @@
 <pre>
 <btn>
-{{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}}
+{{fullurl:{{FULLPAGENAME}}}}|{{ucfirst:magic words}}
 </btn>
 </pre>
+|
 <btn>
-{{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}}
+{{fullurl:{{FULLPAGENAME}}}}|{{ucfirst:magic words}}
 </btn>
 |-

@@ Regel 340: / Regel 340: @@
 |}
-== Miscellaneous ==
+== Overige mogelijkheden ==
 {| class="table table-bordered"

@@ Regel 261: / Regel 261: @@
 |}
-== Icons ==
+== Iconen ==
 {| class="table table-bordered"
-! Markup !! Result
+! Codering !! Resultaat
 |-
+|
 <pre>
 <btn>
-Target|<span class="glyphicon glyphicon-cog"></span> icon with span
+Target|<span class="glyphicon glyphicon-cog"></span> icoon met span
 </btn>
 </pre>
+|
 <btn>
-Target|<span class="glyphicon glyphicon-cog"></span> icon with span
+Target|<span class="glyphicon glyphicon-cog"></span> icoon met span
 </btn>
 |-
@@ Regel 283: / Regel 283: @@
 </btn>
 </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">
@@ Regel 303: / Regel 303: @@
 <pre>
 <btn fa="cog">
-fa attribute
+fa attribuut
 </btn>
 </pre>
+|
 <btn fa="cog">
-fa attribute
+fa attribuut
 </btn>
 |}