Template:Button: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
(Hey! It works :-)
(Copy from http://en.wikipedia.org/wiki/Template:Button, with a slight changes.)
Line 1: Line 1:
<span style="border: {{{w|1}}}px solid {{{b|black}}}; padding: 1px 3px; background: {{{c|white}}}; font-family: inherit; color: {{{t|black}}}; font-size: 0.85em; white-space: nowrap;">{{{1|Text}}}</span><noinclude>
<span class="nowrap" title="This is not a clickable button; it illustrates the button one should find." style="padding:{{{padTB|.1em}}} {{{padLR|.4em}}}; border:1px solid; border-color:#AAA #555 #555 #AAA; {{border-radius|3px}} background-color: {{{bgcolor|#F2F2F2}}}; {{linear-gradient|top|#FCFCFC, #E0E0E0}} {{{style|}}}">{{{1|Button}}}</span><noinclude>{{Informative template|1=
{{Informative template|1=
__NOTOC__
__NOTOC__
== Goal ==
== Goal ==
This template is used in running text to illustrate button presses and lit indicators. It allows the use of alternate colours and border widths.
This template provides a "button" formatting style for text.
 
{{inote|This button is '''not''' clickable.}}


== Usage ==
== Usage ==
  <nowiki>{{</nowiki>'''button'''<nowiki>|</nowiki>text<nowiki>|</nowiki>''t=black''<nowiki>|</nowiki>''c=white''<nowiki>|</nowiki>''b=black''<nowiki>|</nowiki>''w=1''<nowiki>}}</nowiki>
  <nowiki>{{</nowiki>'''button'''{{!}}''text''{{!}}''padTB=''{{!}}''padLR=''{{!}}''style=''<nowiki>}}</nowiki>


The only mandatory parameter is '''text'''.
All parameters are optional.


; text:  Button text
; text: Text to display on the button. Defaults to <code>Button</code>.


; t<u>T</u>ext colour, defaults to <tt>black</tt>
; padTB: Amount of padding above and below the text. Defaults to <code>.1em</code>.


; cButton <u>c</u>ap colour, defaults to <tt>white</tt>
; padLR: Amount of padding either side of the text. Defaults to <code>.4em</code>.


; b: <u>B</u>order colour, defaults to <tt>black</tt>
; style: Any additional styling you may want to add.


; w: Border <u>w</u>idth in pixels, defaults to <tt>1</tt>
== Examples ==
  <nowiki>Press the {{button|Next}} button.</nowiki>


=== Colours ===
Press the {{button|Next}} button.
The template uses cascading style sheet (CSS) colours, and there are five ways to define the colours:
# Through colour keywords (either of aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white or yellow);
# as three hexadecimal values <tt>#rgb</tt>, like <tt>#F00</tt> for red,
# as six hexadecimal values <tt>#rrggbb</tt>, like <tt>#00FF00</tt> for green,
# as three integers 0-255 <tt>rgb(r,g,b)</tt>, like <tt>rgb(0,255,255)</tt> for yellow
# as three percentages <tt>rgb(r, g, b)</tt>, like <tt>rgb(100%, 0%, 0%)</tt> for red


In other words <tt>F = FF = 255 = 100%</tt>.
<nowiki>{{button|[[File:Tick_32px.png]]|padTB=.4em|padLR=.4em}}</nowiki>


== Examples ==
{{button|[[File:Tick_32px.png|16px]]|padTB=.4em|padLR=.4em}}
<nowiki>{{button|HDG}}</nowiki>
{{button|HDG}}


  <nowiki>{{button|'''ALT'''|t=black|c=#AFA|b=gray|w=2}}</nowiki>
  <nowiki>{{button|Bold button|style=font-weight: bold}}</nowiki>
{{button|'''ALT'''|t=black|c=#AFA|b=gray|w=2}}


<nowiki>{{button|'''ILS'''|t=#AFA|c=gray|b=black|w=2}}</nowiki>
{{button|Bold button|style=font-weight: bold}}
{{button|'''ILS'''|t=#AFA|c=black|b=gray|w=2}}


== Known issues ==
== See also ==
* In some cases workarounds will be required. One of them is for example text containing a pipe character ({{!}}) which would require you to insert <code><nowiki>{{!}}</nowiki></code> instead of <code>{{!}}</code>, since using a "{{!}}" inside a template will break it.
* {{tl|key press}} – ''Used to illustrate keystrokes.''


* If a line breaks right before the template the left border will stay on the previous line.
}}


[[Category:Templates]]
[[Category:Templates]]
}}
 
</noinclude>
</noinclude>

Revision as of 11:39, 10 March 2015

Button

The following template description is not displayed when the template is inserted in an article.

Goal

This template provides a "button" formatting style for text.

Note This button is not clickable.

Usage

{{button|text|padTB=|padLR=|style=}}

All parameters are optional.

text
Text to display on the button. Defaults to Button.
padTB
Amount of padding above and below the text. Defaults to .1em.
padLR
Amount of padding either side of the text. Defaults to .4em.
style
Any additional styling you may want to add.

Examples

Press the {{button|Next}} button.

Press the Next button.

{{button|[[File:Tick_32px.png]]|padTB=.4em|padLR=.4em}}

Tick 32px.png

{{button|Bold button|style=font-weight: bold}}

Bold button

See also

  • {{key press}} – Used to illustrate keystrokes.