Difference between revisions of "Buttons"

From Tweeki
Jump to: navigation, search
(16 intermediate revisions by the same user not shown)
Line 17: Line 17:
 
|
 
|
 
<pre>
 
<pre>
<btn size="large">Large Button</btn>
+
<btn size="lg">Large Button</btn>
<btn size="small">Small Button</btn>
+
<btn size="sm">Small Button</btn>
<btn size="mini">Mini Button</btn>
 
 
</pre>
 
</pre>
 
|
 
|
<div class="btn-toolbar"><btn size="large">Large Button</btn>
+
<btn size="lg">Large Button</btn>
<btn size="small">Small Button</btn>
+
<btn size="sm">Small Button</btn>
<btn size="mini">Mini Button</btn></div>
 
 
|-
 
|-
 
|
 
|
Line 67: Line 65:
 
Classy
 
Classy
 
Buttons
 
Buttons
 +
</btn>
 +
|-
 +
|
 +
<pre>
 +
<btn class="">
 +
Button without any class
 +
</btn>
 +
</pre>
 +
|
 +
<btn class="">
 +
Button without any class
 
</btn>
 
</btn>
 
|-
 
|-
Line 110: Line 119:
 
Dropdown-Menu
 
Dropdown-Menu
 
* Some Menu Item
 
* Some Menu Item
** Submenu
 
 
*
 
*
 +
*: Some Heading
 
* Some Other Menu Item
 
* Some Other Menu Item
 
</btn>
 
</btn>
Line 119: Line 128:
 
Dropdown-Menu
 
Dropdown-Menu
 
* Some Menu Item
 
* Some Menu Item
** Submenu
 
 
*
 
*
 +
*: Some Heading
 
* Some Other Menu Item
 
* Some Other Menu Item
 
</btn>
 
</btn>
Line 157: Line 166:
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 +
<small>'''Note:''' this only works with the [https://www.semantic-mediawiki.org/wiki/Semantic_MediaWiki Semantic MediaWiki] extension installed.
 
|
 
|
 
<btn>
 
<btn>
Line 184: Line 194:
 
|
 
|
 
<pre>
 
<pre>
<btn wrapperclass="btn-group btn-group-vertical">
+
<btn wrapperclass="btn-group-vertical">
 
Explicit
 
Explicit
 
Wrapper
 
Wrapper
Line 191: Line 201:
 
</pre>
 
</pre>
 
|
 
|
<btn wrapperclass="btn-group btn-group-vertical">
+
<btn wrapperclass="btn-group-vertical">
 
Explicit
 
Explicit
 
Wrapper
 
Wrapper
Line 261: Line 271:
 
<btn>
 
<btn>
 
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
 
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
 +
Target|<span class="fa fa-cog"></span> icon with span
 
</btn>
 
</btn>
 
</pre>
 
</pre>
Line 266: Line 277:
 
<btn>
 
<btn>
 
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
 
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
 +
Target|<span class="fa fa-cog"></span> icon with span
 
</btn>
 
</btn>
 
|-
 
|-
Line 274: Line 286:
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 +
<small>'''Note:''' the icon attribute is just a synonym for 'glyphicon' for Boostrap 3 and 'fa' for Bootstrap 4.
 
|
 
|
 
<btn icon="cog">
 
<btn icon="cog">
Line 281: Line 294:
 
|
 
|
 
<pre>
 
<pre>
<btn fa="cog">
+
<btn glyphicon="cog">
fa attribute
+
glyphicon attribute
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
<btn fa="cog">
+
<btn glyphicon="cog">
fa attribute
+
glyphicon attribute
 
</btn>
 
</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
<btn glyphicon="cog">
+
<btn fa="cog">
glyphicon attribute
+
fa attribute
 
</btn>
 
</btn>
 
</pre>
 
</pre>
 
|
 
|
<btn glyphicon="cog">
+
<btn fa="cog">
glyphicon attribute
+
fa attribute
 
</btn>
 
</btn>
 
|}
 
|}
Line 316: Line 329:
 
{{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}}
 
{{fullurl:{{PAGENAME}}}}|{{ucfirst:magic words}}
 
</btn>
 
</btn>
 
|}
 
 
== Miscellaneous ==
 
 
{| class="table table-bordered"
 
! Markup !! Result
 
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
<div class="dropdown">
+
<btn>
<btn data-toggle="dropdown">
+
mainpage
Data-Toggle-Attribut
+
</btn>
</btn><ul class="dropdown-menu" id="file-dropdown-menu">
 
<li>[[Buttons]]</li>
 
<li class="divider"></li>
 
<li>[[Test]]</li>
 
</ul>
 
</div>
 
 
</pre>
 
</pre>
<small>'''Attention!''' Be careful not to have the <code>ul</code> on a new line!</small>
+
<small><b>Info</b>: if a system message by that name exists, the text will be replaced by it's content</small>
 
|
 
|
<div class="dropdown">
+
<btn>
<btn data-toggle="dropdown">
+
mainpage
Data-Toggle-Attribut
+
</btn>
</btn><ul class="dropdown-menu" id="file-dropdown-menu">
 
<li>[[Buttons]]</li>
 
<li class="divider"></li>
 
<li>[[Test]]</li>
 
</ul>
 
</div>
 
 
|}
 
|}
  

Revision as of 22:59, 17 December 2019

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.

Standard Buttons

Markup Result
<btn>Simple Button</btn>
<btn size="lg">Large Button</btn>
<btn size="sm">Small Button</btn>
<btn>
Grouped
Buttons
</btn>
<btn>
Button

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

Dropdown Buttons

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

Note: this only works with the Semantic MediaWiki extension installed.

Wrappers

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

ExplicitWrapperUnsetting

Styling

Markup Result
<btn>
Target|<i>Italic Tag</i>
</btn>
<btn>
Target|''Italic Wiki Markup''
</btn>
''<btn>
Surrounding Italic Wiki Markup
</btn>''

Icons

Markup Result
<btn>
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
Target|<span class="fa fa-cog"></span> icon with span
</btn>
<btn icon="cog">
icon attribute
</btn>

Note: the icon attribute is just a synonym for 'glyphicon' for Boostrap 3 and 'fa' for Bootstrap 4.

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

Parsing

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

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

Specifications

The general structure for the code of a single button is target|text|class, where text and class are optional. If text is omitted it is assumed to be the same as target. target and text are parsed after the following algorithm.

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