increment()

Adds a step to a number or dimension state. In an :on() rule it is the mutation --count: increment(1).

Syntax

--<state>: increment(<step>?);

registry syntax: increment(--state [, step] [, closest(selector)])

Parameters

stepnumber, dimension or typed expressionoptional

Default 1, in the state’s unit. In :on() it can be an expression: increment(var(--step)), increment(event(movement-x)).

Effect

No value.

Example

.counter {  --count: state(0);}.counter .inc:on(click) {  --count: increment(1);}.counter .dec:on(click) {  --count: decrement(1);}/* DOM text: the output's text node follows the state. */.counter .value {  content: var(--count);}/* A real disabled attribute while the count is 0. */.counter .dec {  --attr-disabled: when(--count <= 0);}

Behavior

• A mutation of the state on the left. In an :on() rule, --x: increment(1) changes the nearest --x owner of the element the rule matched. set(), toggle(), increment(), decrement() and cycle() share one model: one winner per state through the cascade, and one transaction per event, read against the values from before it.
• Conceptually, --count: increment(1) is --count: set(calc(var(--count) + 1)): both read the value from before the event and write once. One difference: a unitless step is taken in the state’s unit, so increment(1) adds 1px to a px state.
• increment(40px) adds 40px to a dimension state.

Supported contexts

• As a mutation in an :on() rule.

Limitations

• No minimum or maximum. Clamp in the mutation: --qty: set(min(var(--qty) + 1, 10)).

Examples

• Counter · API examples, runs the real runtime

Related