Template:Calculator button/sandbox

Template documentation[view] [edit] [history] [purge]

Creates a button for use with {{Calculator}} widgets. Requires the calculator gadget to be enabled.

Usage

Upon clicking a button, the button evaluates its formula parameter and inserts the results into the field identified by the for parameter.

For example:

{{calculator button|contents=Add 1|for=x|formula=x+1|type=plain}}. X = {{calculator|type=plain|id=x|default=0}}

Creates

Add 1. X = 0

The contents of a button should only contain non-interactive phrasing content (No links, no <div>)

Types of buttons

There are many different types of buttons you can make. For codex style buttons, see [1] for best practice on how to use them. Note, the value default refers to the codex "default" styles, it is not the default option. The style of plain buttons may vary between different skins and operating systems.

type	normal	primary	quiet	disabled
plain (non-codex)	Click me			Click me
default	Click me	Click me	Click me	Click me
progressive	Click me	Click me	Click me	Click me
destructive	Click me	Click me	Click me	Click me

There is also support for size parameter that takes "medium" or "large". Medium is recommended unless the button is only a small icon. There is an alt parameter to provide alt text for screen readers. However you should only use it if the text contents of the button don't explain its purpose. Most of the time it is better to just make the button contents descriptive.

Template data

Create a button element that can affect a widget from Template:Calculator

Template parameters[Edit template data]

Parameter		Description	Type	Status
for	for	id of Calculator field that is the target of this button	String	required
formula	formula	Formula to set the field from the for parameter to Example x+1	String	required
contents	contents 1	Contents of the button Example Click here	Content	required
type	type	Style of button. Default is "plain". The value of "default" means a codex default button, which is not the default of this template Suggested values plain default progressive desctructive Default plain Example progressive	String	suggested
alt	alt	Alt text of button for screen readers. Only use if the text content of the button would not be clear to a screen reader	String	optional
class	class	Extra CSS classes to add to the button. If you want this styled like a button even when the gadget is disabled add "cdx-button cdx-button--fake-button cdx-button--fake-button--enabled"	String	optional
class-live	class-live	Extra CSS classes that are only added if the calculator gadget is enabled	String	optional
disabled	disabled	Mark button as disabled.	Boolean	optional
id	id	id of button element	String	optional
size	size	Size of button. medium is default Suggested values medium large Default medium	String	optional
style	style	Extra CSS for button	String	optional
title	title	Tooltip for button	String	optional
weight	weight	Weight of button (Ignored for plain buttons) Suggested values normal primary quiet Default normal Example primary	String	optional

The above documentation is transcluded from Template:Calculator button/doc. (edit | history)
Editors can experiment in this template's sandbox (edit | diff) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.