Difference between revisions of "Buttons"
From Tweeki
(→Icons) |
|||
(39 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
[[Category:Components]] __FORCETOC__ | [[Category:Components]] __FORCETOC__ | ||
− | With | + | 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">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>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 == | == Standard Buttons == | ||
− | {| class= | + | {| class="table table-bordered" |
! Markup !! Result | ! Markup !! Result | ||
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn>Simple Button</btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn>Simple Button</btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn size="lg">Large Button</btn> |
− | < | + | <btn size="sm">Small Button</btn> |
− | |||
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn size="lg">Large Button</btn> |
− | < | + | <btn size="sm">Small Button</btn> |
− | |||
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn> |
Grouped | Grouped | ||
Buttons | Buttons | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn> |
Grouped | Grouped | ||
Buttons | Buttons | ||
− | </ | + | </btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn> |
Button | Button | ||
Tool | Tool | ||
Bar | Bar | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn> |
Button | Button | ||
Tool | Tool | ||
Bar | Bar | ||
− | </ | + | </btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn class="btn-primary"> |
Classy | Classy | ||
Buttons | Buttons | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn class="btn-primary"> |
Classy | Classy | ||
Buttons | Buttons | ||
− | </ | + | </btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn class=""> |
+ | Button without any class | ||
+ | </btn> | ||
+ | </pre> | ||
+ | | | ||
+ | <btn class=""> | ||
+ | Button without any class | ||
+ | </btn> | ||
+ | |- | ||
+ | | | ||
+ | <pre> | ||
+ | <btn> | ||
Classy||btn-primary | Classy||btn-primary | ||
Non-classy | Non-classy | ||
Very Classy||btn-success | Very Classy||btn-success | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn> |
Classy||btn-primary | Classy||btn-primary | ||
Non-classy | Non-classy | ||
Very Classy||btn-success | Very Classy||btn-success | ||
− | </ | + | </btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn> |
Standard Button | Standard Button | ||
− | + | Some Page Title|Internal Target | |
− | + | http://some.where|External Target | |
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn> |
Standard Button | Standard Button | ||
− | + | Some Page Title|Internal Target | |
− | + | http://some.where|External Target | |
− | </ | + | </btn> |
|} | |} | ||
== Dropdown Buttons == | == Dropdown Buttons == | ||
− | {| class= | + | {| class="table table-bordered" |
! Markup !! Result | ! Markup !! Result | ||
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn> |
Dropdown-Menu | Dropdown-Menu | ||
* Some Menu Item | * Some Menu Item | ||
− | |||
* | * | ||
+ | *: Some Heading | ||
* Some Other Menu Item | * Some Other Menu Item | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn> |
Dropdown-Menu | Dropdown-Menu | ||
* Some Menu Item | * Some Menu Item | ||
− | |||
* | * | ||
+ | *: Some Heading | ||
* Some Other Menu Item | * Some Other Menu Item | ||
− | </ | + | </btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn> |
− | Split Dropdown | + | Target|Split Dropdown |
* Some Menu Item | * Some Menu Item | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn> |
− | Split Dropdown | + | Target|Split Dropdown |
* Some Menu Item | * Some Menu Item | ||
− | </ | + | </btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn class=""> |
Non-Button Dropdown | Non-Button Dropdown | ||
* Some Menu Item | * Some Menu Item | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn class=""> |
Non-Button Dropdown | Non-Button Dropdown | ||
* Some Menu Item | * Some Menu Item | ||
− | </ | + | </btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn> |
Semantic Dropdown | Semantic Dropdown | ||
* {{#ask:[[Category:Components]]}} | * {{#ask:[[Category:Components]]}} | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
+ | <small>'''Note:''' this only works with the [https://www.semantic-mediawiki.org/wiki/Semantic_MediaWiki Semantic MediaWiki] extension installed. | ||
| | | | ||
− | < | + | <btn> |
Semantic Dropdown | Semantic Dropdown | ||
* {{#ask:[[Category:Components]]}} | * {{#ask:[[Category:Components]]}} | ||
− | </ | + | </btn> |
|} | |} | ||
== Wrappers == | == Wrappers == | ||
− | {| class= | + | {| class="table table-bordered" |
! Markup !! Result | ! Markup !! Result | ||
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn wrapperclass="btn-group dropup"> |
Dropup | Dropup | ||
* Some Menu Item | * Some Menu Item | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn wrapperclass="btn-group dropup"> |
Dropup | Dropup | ||
* Some Menu Item | * Some Menu Item | ||
− | </ | + | </btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn wrapperclass="btn-group-vertical"> |
Explicit | Explicit | ||
Wrapper | Wrapper | ||
Setting | Setting | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn wrapperclass="btn-group-vertical"> |
Explicit | Explicit | ||
Wrapper | Wrapper | ||
Setting | Setting | ||
− | </ | + | </btn> |
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
− | < | + | <btn wrapper=""> |
Explicit | Explicit | ||
Wrapper | Wrapper | ||
Unsetting | Unsetting | ||
− | </ | + | </btn> |
</pre> | </pre> | ||
| | | | ||
− | < | + | <btn wrapper=""> |
Explicit | Explicit | ||
Wrapper | Wrapper | ||
Unsetting | 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="fa fa-cog"></span> icon with span | ||
+ | </btn> | ||
+ | </pre> | ||
+ | | | ||
+ | <btn> | ||
+ | Target|<span class="fa fa-cog"></span> icon with span | ||
+ | </btn> | ||
+ | |- | ||
+ | | | ||
+ | <pre> | ||
+ | <btn icon="cog"> | ||
+ | icon attribute | ||
+ | </btn> | ||
+ | </pre> | ||
+ | | | ||
+ | <btn icon="cog"> | ||
+ | icon 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> | ||
+ | |- | ||
+ | | | ||
+ | <pre> | ||
+ | <btn> | ||
+ | &­shy;mainpage | ||
+ | </btn> | ||
+ | </pre> | ||
+ | <small><b>Info</b>: you can avoid this behaviour by adding an HTML entity that doesn't consume screen space like <code>&shy;</code>. It will be invisible in the title and filtered out for the URL.<br>Alternatively, create a new message and use that.</small> | ||
+ | | | ||
+ | <btn> | ||
+ | ­mainpage | ||
+ | </btn> | ||
|} | |} | ||
Latest revision as of 12:04, 30 December 2021
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.
Caveat: 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.
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> |
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="fa fa-cog"></span> icon with span </btn> |
|
<btn icon="cog"> icon 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 |
|
<btn> ­mainpage </btn> Info: you can avoid this behaviour by adding an HTML entity that doesn't consume screen space like |
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.
- 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.