Template:InlineKey: Difference between revisions

Latest revision as of 19:33, September 16, 2021

	This page is a candidate for deletion!
	Reason: "This was never picked up and used. We have the <kbd> tag can we can style, which could do the same thing. TechAngel85"
	If you disagree with the deletion of this page, please explain why on the discussion page. Admins please check what links here and the page history before deleting.

Purpose & Usage

This template is used to create an inline keyboard button, for coolness, swagginess, and awesomeness of "press this key to do this" instructions.

parameter 1 is the content of the key. It works with characters / strings / html code and a set of predefined buttons.

Available predefined keys :

Left arrow : arrowLeft
Right arrow : arrowRight
Up arrow : arrowUp
Down arrow : arrowDown
Enter : enter
Backspace : backspace
Shift : shift
Caps Lock : capsLock
Tabulation : tab

(optional) paddingRight parameter define the space between the content of the key and the end of the visual. (don't work for pre-defined keys)
(optional) paddingLeft parameter define the space between the content of the key and the beginning of the visual. (don't work for pre-defined keys)

NOTE:

To behave 100% nicely, a blank space is required before the template

Examples

Code:

People with {{InlineKey|A}} {{InlineKey|Z}} {{InlineKey|E}} {{InlineKey|R}} {{InlineKey|T}} {{InlineKey|Y}} keyboards are nice.

Result: People with A Z E R T Y keyboards are nice.

Code:

List of all available predefined key : {{InlineKey|arrowLeft}} ; {{InlineKey|arrowRight}} ; {{InlineKey|arrowUp}} ; {{InlineKey|arrowDown}} ; {{InlineKey|enter}} ; {{InlineKey|backspace}} ; {{InlineKey|shift}} ; {{InlineKey|capsLock}} ; {{InlineKey|tab}}

Result: List of all available predefined key : ← ; → ; ↑ ; ↓ ; Enter ↲ ; ←─ ; ⇧ ; 🔒 ; ↹

Code:

Pressing {{InlineKey|Alt|paddingRight=1.2em}}+ {{InlineKey|F4}} will close your browser, don't do it if you still need to read this ;)

Result: Pressing Alt + F4 will close your browser, don't do it if you still need to read this ;)

Related Templates

None

@@ Line 1: / Line 1: @@
-<includeonly><span style="background-color:#999; background:linear-gradient(#999, #444); cursor:default; border:1px solid #111; border-radius:3px; color:#DDD;">
+<includeonly><span title="{{{1}}}" style="background-color:#999; background:linear-gradient(#888, #333); cursor:default; border:1px solid #111; border-radius:3px; color:#DDD;">
 {{#switch: {{{1}}}
-| arrowLeft = <span style="padding: .0em .2em .1em .2em;">'''&#8592;'''</span>
+| arrowLeft = <span title="left arrow" style="padding:0 .05em .1em .25em;">'''&#8592;'''</span>
-| arrowRight = <span style="padding: .0em .2em .1em .2em;">'''&#8594;'''</span>
+| arrowRight = <span title="right arrow" style="padding:0 .05em .1em .25em;">'''&#8594;'''</span>
-| arrowUp = <span style="padding: .0em .4em .1em .4em;">'''&#8593;'''</span>
+| arrowUp = <span title="up arrow" style="padding:0 .2em .1em .4em;">'''&#8593;'''</span>
-| arrowDown = <span style="padding: .0em .4em .1em .4em;">'''&#8595;'''</span>
+| arrowDown = <span title="down arrow" style="padding:0 .2em .1em .4em;">'''&#8595;'''</span>
-| enter = <span style="padding: .1em .2em .2em .2em;">'''Enter &#8626;'''</span>
+| enter = <span style="padding:.1em .2em .2em .2em;">'''Enter &#8626;'''</span>
-| backspace = <span style="padding: .0em 1.2em .1em .4em;">'''&#8592;&#9472;'''</span>
+| backspace = <span style="padding:0 1.2em .1em .4em;">'''&#8592;&#9472;'''</span>
-| shift = <span style="padding: .0em 1.2em .1em .4em;">&#8679;</span>
+| shift = <span style="padding:0 1.2em .1em .4em;">&#8679;</span>
-| capsLock = <span style="padding: .0em 1.2em .1em .4em;">&#128274;</span>
+| capsLock = <span title="caps lock" style="padding:0 1.2em .1em .4em;">&#128274;</span>
-| tab = <span style="padding: .0em 1.2em .1em .4em;">&#8633;</span>
+| tab = <span style="padding:0 1.2em .1em .5em;">&#8633;</span>
-| <span style="padding: .0em {{paddingRight|.2em}} .1em {{paddingLeft|.2em}};">'''{{{1}}}'''</span>
+| #default = <span style="padding:0 {{{paddingRight|.1em}}} .1em {{{paddingLeft|.4em}}};">'''{{{1}}}'''</span>
 }}
-</span></includeonly><noinclude>__NOTOC__
+</span>&nbsp;</includeonly><noinclude>__NOTOC__ [[Category:Deprecated Templates]]
+{{delete|reason=This was never picked up and used. We have the <nowiki><kbd></nowiki> tag can we can style, which could do the same thing.<br>[[File:TechAngel85Avatar.png|22px|alt=TechAngel Avatar|class=rounded-circle]] [[User:TechAngel85|TechAngel85]]}}
 == Purpose & Usage ==
+This template is used to create an inline keyboard button, for coolness, swagginess, and awesomeness of "press this key to do this" instructions.
 *''parameter 1'' is the content of the key. It works with characters / strings / html code and a set of predefined buttons.
@@ Line 27: / Line 30: @@
 :*Caps Lock : capsLock
 :*Tabulation : tab
-*(optional) ''paddingRight''  parameter define the space between the content of the key and the beginning of the visual. (don't work for pre-defined keys)
+*(optional) ''paddingRight''  parameter define the space between the content of the key and the end of the visual. (don't work for pre-defined keys)
-*(optional) ''paddingLeft'' parameter define the space between the content of the key and the end of the visual. (don't work for pre-defined keys)
+*(optional) ''paddingLeft'' parameter define the space between the content of the key and the beginning of the visual. (don't work for pre-defined keys)
-This template is used to create an inline keyboard button, for coolness, swagginess, and awesomeness of "press this key to do this" instructions.
+{{AlertSmall‏‎|type=notice|text=To behave 100% nicely, a blank space is required before the template}}
 == Examples ==
 '''Code:'''
-<pre>{{InlineKey|test}} and {{InlineKey|arrowLeft}}, and even {{InlineKey|arrowRight}}</pre>
+<pre>People with {{InlineKey|A}} {{InlineKey|Z}} {{InlineKey|E}} {{InlineKey|R}} {{InlineKey|T}} {{InlineKey|Y}} keyboards are nice.</pre>
+'''Result:'''
+People with {{InlineKey|A}} {{InlineKey|Z}} {{InlineKey|E}} {{InlineKey|R}} {{InlineKey|T}} {{InlineKey|Y}} keyboards are nice.
+'''Code:'''
+<pre>List of all available predefined key : {{InlineKey|arrowLeft}} ; {{InlineKey|arrowRight}} ; {{InlineKey|arrowUp}} ; {{InlineKey|arrowDown}} ; {{InlineKey|enter}} ; {{InlineKey|backspace}} ; {{InlineKey|shift}} ; {{InlineKey|capsLock}} ; {{InlineKey|tab}}</pre>
+'''Result:'''
+List of all available predefined key : {{InlineKey|arrowLeft}} ; {{InlineKey|arrowRight}} ; {{InlineKey|arrowUp}} ; {{InlineKey|arrowDown}} ; {{InlineKey|enter}} ; {{InlineKey|backspace}} ; {{InlineKey|shift}} ; {{InlineKey|capsLock}} ; {{InlineKey|tab}}
+'''Code:'''
+<pre>Pressing {{InlineKey|Alt|paddingRight=1.2em}}+ {{InlineKey|F4}} will close your browser, don't do it if you still need to read this ;)</pre>
 '''Result:'''
-{{InlineKey|test}} and {{InlineKey|arrowLeft}}, and even {{InlineKey|arrowRight}}
+Pressing {{InlineKey|Alt|paddingRight=1.2em}}+ {{InlineKey|F4}} will close your browser, don't do it if you still need to read this ;)
-== See Also ==
+== Related Templates ==
-[[:RELATED TEMPLATE NAME AND ARGUMENTS]]
+None
 </noinclude>