Template:Calculator/Tutorial/Buttons

Field types

Buttons

Using with CSS

In this chapter, we will talk about creating buttons, which when pressed can set the value of a calculator widget.

Buttons

A button can be used to set the value of a field. It takes a parameter for and a parameter formula. When pressed it evaluates the formula and sets the field in for to whatever value that is. For example:

{{calculator button
  |contents=Click to double it
  |for=x
  |formula=x*2
  |type=plain}}
Current value = {{calculator|type=plain|id=x|default=1}}

Click to double it Current value = 1

You can also set multiple fields at once by separating the for and formula parameters with a semi-colon.

Consider this Fibonacci counter:

{{calculator button
  |contents=Next Fibonacci number
  |for=f0;f1;f2
  |formula=f1;f2;f0+f1
}}  {{calculator|type=plain|id=f2|default=1}} = {{calculator|type=plain|id=f1|default=1}} + {{calculator|type=plain|id=f0|default=0}}

Next Fibonacci number 1 = 1 + 0

Disabled buttons

You can set a formula in the disabled parameter to disable a button if it is no longer applicable.

For example, you can only click the following button 3 times.

{{calculator button
  |contents={{calculator|formula=countdown|type=plain|default=3}} clicks left
  |formula=countdown-1
  |for=countdown
  |disabled=ifless(countdown, 1, 1, 0)
}}
{{calculator|type=hidden|default=3|id=countdown}}

3 clicks left3

Codex buttons

Instead of plain buttons, you can also style buttons using codex styles. Codex defines three types of buttons. progressive which is used when you want the user to progress (i.e. a main action or to continue to the next step). destructive is used for when you are cancelling or deleting something. default is for any other type of button.

Codex also defines a weight parameter to control how emphasized a button is. It takes choices primary, normal and quiet.

Type	primary	normal	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

Repeating buttons

It is possible to make buttons repeat an action at a regular interval

{{calculator button
  |contents=Start countdown! 🚀
  |for=rocket
  |type=normal
  |weight=primary
  |formula=ifless(rocket-1,0,9,rocket-1)
  |max iterations=10
  |delay=1
  |disabled=timer()
}}
Launch in T-{{calculator|type=plain|default=10|id=rocket}} seconds!

Start countdown! 🚀 Launch in T-10 seconds!

Repeating buttons work by setting a delay parameter, which is number of seconds between iterations (minimum 0.5). You can also set either a max iterations parameter with the max number of times to trigger the button or an until parameter to stop when some formula is true. There is also a timer() function which is true when a repeating button is currently in operation. See Template:Calculator button for additional parameters.

If you want to do complex animations, it is better to use CSS animations and not a repeating button.

For an example of a repeating button see the play button on w:Template:Chess_viewer.

Field types

Buttons

Using with CSS