Difference between revisions of "Buttons"
Line 335: | Line 335: | ||
</btn> | </btn> | ||
</pre> | </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.</small> | + | <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> | <btn> |
Revision as of 08:47, 26 March 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.
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> Note: the icon attribute is just a synonym for 'fa'. |
|
<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 |
|
<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.