Buttons: Difference between revisions
From Tweeki
No edit summary |
No edit summary |
||
| Line 10: | Line 10: | ||
| | | | ||
<pre> | <pre> | ||
< | <btn>Simple Button</btn> | ||
</pre> | </pre> | ||
| | | | ||
< | <btn>Simple Button</btn> | ||
|- | |- | ||
| | | | ||
<pre> | <pre> | ||
< | <btn size="large">Large Button</btn> | ||
< | <btn size="small">Small Button</btn> | ||
< | <btn size="mini">Mini Button</btn> | ||
</pre> | </pre> | ||
| | | | ||
<div class="btn-toolbar">< | <div class="btn-toolbar"><btn size="large">Large Button</btn> | ||
< | <btn size="small">Small Button</btn> | ||
< | <btn size="mini">Mini Button</btn></div> | ||
|- | |- | ||
| | | | ||
<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> | ||
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> | ||
|} | |} | ||
| Line 107: | Line 107: | ||
| | | | ||
<pre> | <pre> | ||
< | <btn> | ||
Dropdown-Menu | Dropdown-Menu | ||
* Some Menu Item | * Some Menu Item | ||
| Line 113: | Line 113: | ||
* | * | ||
* Some Other Menu Item | * Some Other Menu Item | ||
</ | </btn> | ||
</pre> | </pre> | ||
| | | | ||
< | <btn> | ||
Dropdown-Menu | Dropdown-Menu | ||
* Some Menu Item | * Some Menu Item | ||
| Line 122: | Line 122: | ||
* | * | ||
* 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> | ||
| | | | ||
< | <btn> | ||
Semantic Dropdown | Semantic Dropdown | ||
* {{#ask:[[Category:Components]]}} | * {{#ask:[[Category:Components]]}} | ||
</ | </btn> | ||
|} | |} | ||
| Line 171: | Line 171: | ||
| | | | ||
<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 btn-group-vertical"> | ||
Explicit | Explicit | ||
Wrapper | Wrapper | ||
Setting | Setting | ||
</ | </btn> | ||
</pre> | </pre> | ||
| | | | ||
< | <btn wrapperclass="btn-group 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> | ||
|} | |} | ||
Revision as of 20:25, 16 February 2015
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.
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="large">Large Button</btn> <btn size="small">Small Button</btn> <btn size="mini">Mini Button</btn> |
|
<btn> Grouped Buttons </btn> |
|
<btn> Button Tool Bar </btn> |
|
<btn class="btn-primary"> Classy Buttons </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 ** Submenu * * 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>
|
Wrappers
| Markup | Result |
|---|---|
<btn wrapperclass="btn-group dropup"> Dropup * Some Menu Item </btn> |
|
<btn wrapperclass="btn-group btn-group-vertical"> Explicit Wrapper Setting </btn> |
|
<btn wrapper=""> Explicit Wrapper Unsetting </btn> |
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.