Difference between revisions of "Buttons"

From Tweeki
Jump to: navigation, search
(34 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
[[Category:Twitter Bootstrap]]
+
[[Category:Components]] __FORCETOC__
−
{| class=wikitable
+
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
 
! Markup !! Result
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button>Simple Button</button>
+
<btn>Simple Button</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button>Simple Button</button>
+
<btn>Simple Button</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button size="large">Large Button</button>
+
<btn size="lg">Large Button</btn>
−
<button size="small">Small Button</button>
+
<btn size="sm">Small Button</btn>
−
<button size="mini">Mini Button</button>
 
 
</pre>
 
</pre>
 
|
 
|
−
<div class="btn-toolbar"><button size="large">Large Button</button>
+
<btn size="lg">Large Button</btn>
−
<button size="small">Small Button</button>
+
<btn size="sm">Small Button</btn>
−
<button size="mini">Mini Button</button></div>
 
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button>
+
<btn>
 
Grouped
 
Grouped
 
Buttons
 
Buttons
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button>
+
<btn>
 
Grouped
 
Grouped
 
Buttons
 
Buttons
−
</button>
+
</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button>
+
<btn>
 
Button
 
Button
  
 
Tool
 
Tool
 
Bar
 
Bar
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button>
+
<btn>
 
Button
 
Button
  
 
Tool
 
Tool
 
Bar
 
Bar
−
</button>
+
</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button class="btn-primary">
+
<btn class="btn-primary">
 
Classy
 
Classy
 
Buttons
 
Buttons
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button class="btn-primary">
+
<btn class="btn-primary">
 
Classy
 
Classy
 
Buttons
 
Buttons
−
</button>
+
</btn>
 +
|-
 +
|
 +
<pre>
 +
<btn class="">
 +
Button without any class
 +
</btn>
 +
</pre>
 +
|
 +
<btn class="">
 +
Button without any class
 +
</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button>
+
<btn>
 
Classy||btn-primary
 
Classy||btn-primary
 
Non-classy
 
Non-classy
 
Very Classy||btn-success
 
Very Classy||btn-success
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button>
+
<btn>
 
Classy||btn-primary
 
Classy||btn-primary
 
Non-classy
 
Non-classy
 
Very Classy||btn-success
 
Very Classy||btn-success
−
</button>
+
</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button>
+
<btn>
 
Standard Button
 
Standard Button
−
Internal Target|Some Page Title
+
Some Page Title|Internal Target
−
External Target|http://some.where
+
http://some.where|External Target
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button>
+
<btn>
 
Standard Button
 
Standard Button
−
Internal Target|Some Page Title
+
Some Page Title|Internal Target
−
External Target|http://some.where
+
http://some.where|External Target
−
</button>
+
</btn>
 +
|}
 +
 
 +
== Dropdown Buttons ==
 +
 
 +
{| class="table table-bordered"
 +
! Markup !! Result
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button>
+
<btn>
 
Dropdown-Menu
 
Dropdown-Menu
 
* Some Menu Item
 
* Some Menu Item
−
** Submenu
 
 
*
 
*
 +
*: Some Heading
 
* Some Other Menu Item
 
* Some Other Menu Item
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button>
+
<btn>
 
Dropdown-Menu
 
Dropdown-Menu
 
* Some Menu Item
 
* Some Menu Item
−
** Submenu
 
 
*
 
*
 +
*: Some Heading
 
* Some Other Menu Item
 
* Some Other Menu Item
−
</button>
+
</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button>
+
<btn>
−
Split Dropdown|Target
+
Target|Split Dropdown
 
* Some Menu Item
 
* Some Menu Item
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button>
+
<btn>
−
Split Dropdown|Target
+
Target|Split Dropdown
 
* Some Menu Item
 
* Some Menu Item
−
</button>
+
</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button class="">
+
<btn class="">
 
Non-Button Dropdown
 
Non-Button Dropdown
 
* Some Menu Item
 
* Some Menu Item
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button class="">
+
<btn class="">
 
Non-Button Dropdown
 
Non-Button Dropdown
 
* Some Menu Item
 
* Some Menu Item
−
</button>
+
</btn>
 +
|-
 +
|
 +
<pre>
 +
<btn>
 +
Semantic Dropdown
 +
* {{#ask:[[Category:Components]]}}
 +
</btn>
 +
</pre>
 +
<small>'''Note:''' this only works with the [https://www.semantic-mediawiki.org/wiki/Semantic_MediaWiki Semantic MediaWiki] extension installed.
 +
|
 +
<btn>
 +
Semantic Dropdown
 +
* {{#ask:[[Category:Components]]}}
 +
</btn>
 +
|}
 +
 
 +
== Wrappers ==
 +
 
 +
{| class="table table-bordered"
 +
! Markup !! Result
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button wrapperclass="btn-group dropup">
+
<btn wrapperclass="btn-group dropup">
 
Dropup
 
Dropup
 
* Some Menu Item
 
* Some Menu Item
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button wrapperclass="btn-group dropup">
+
<btn wrapperclass="btn-group dropup">
 
Dropup
 
Dropup
 
* Some Menu Item
 
* Some Menu Item
−
</button>
+
</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button wrapperclass="btn-group btn-group-vertical">
+
<btn wrapperclass="btn-group-vertical">
 
Explicit
 
Explicit
 
Wrapper
 
Wrapper
 
Setting
 
Setting
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button wrapperclass="btn-group btn-group-vertical">
+
<btn wrapperclass="btn-group-vertical">
 
Explicit
 
Explicit
 
Wrapper
 
Wrapper
 
Setting
 
Setting
−
</button>
+
</btn>
 
|-
 
|-
 
|
 
|
 
<pre>
 
<pre>
−
<button wrapper="">
+
<btn wrapper="">
 
Explicit
 
Explicit
 
Wrapper
 
Wrapper
 
Unsetting
 
Unsetting
−
</button>
+
</btn>
 
</pre>
 
</pre>
 
|
 
|
−
<button wrapper="">
+
<btn wrapper="">
 
Explicit
 
Explicit
 
Wrapper
 
Wrapper
 
Unsetting
 
Unsetting
−
</button>
+
</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
 +
Target|<span class="fa fa-cog"></span> icon with span
 +
</btn>
 +
</pre>
 +
|
 +
<btn>
 +
Target|<span class="glyphicon glyphicon-cog"></span> icon with span
 +
Target|<span class="fa fa-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' for Boostrap 3 and 'fa' for Bootstrap 4.
 +
|
 +
<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>
 +
|}
 +
 +
== 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.

Revision as of 23: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>
Simple Button
<btn size="lg">Large Button</btn>
<btn size="sm">Small Button</btn>
Large Button
Small Button
<btn>
Grouped
Buttons
</btn>
GroupedButtons
<btn>
Button

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

Dropdown Buttons

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

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

Semantic Dropdown
AccordionsButtonsCarouselFormsModalsNavigationTabsTooltips

Wrappers

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

ExplicitWrapperUnsetting

Styling

Markup Result 
<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
Target|<span class="fa fa-cog"></span> icon with span
</btn>
icon with span icon with span
<btn icon="cog">
icon attribute
</btn>

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

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

Welcome

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.
Retrieved from "https://tweeki.kollabor.at/w/index.php?title=Buttons&oldid=667"