Semantic UI
ctrl+k
Enter a search term above to see results...
Semantic UI State and Reactivity
Reactivity is the heart of Semantic UI components. This lesson introduces you to reactive state management using signals - automatically updating your UI when data changes.
Understanding State
The defaultState object defines your component’s reactive properties. When these values change, your template automatically updates to reflect the new data.
Reactive Properties
Looking at component.js, you’ll notice:
defaultStateinitializes a counter and toggle property- We use
.set()to update values in event handlers - We use
.get()to access values in JavaScript code - The template updates automatically when state changes
State Operators
The framework provides special methods for common state operations:
.increment()and.decrement()for numbers.toggle()for booleans.now()for dates (updates to current time)- Array methods like
.push(),.removeIndex(),.setIndex()
Template Access
In the component.html template:
- State is accessed directly without using
.get():{count} - The UI automatically updates when state changes
- Methods can be called from templates:
{isEven(count)}
Try It Yourself
Enhance the counter component to include:
- A reset button that sets the counter back to zero
- A “step” feature that increments by a configurable amount
- Visual indicators when reaching milestone numbers (like 10, 20, etc.)
Hint: You’ll need to add a new state property and method, and update the template to use them.
Test