Semantic UI
ctrl+k
Enter a search term above to see results...
Semantic UI Your First Component
This lesson introduces your first UI component. We’ll create a simple time display that updates every second. You’ll learn the basics of component definition, templates, and reactivity.
Key Concepts
-
Component Definition: The
defineComponentfunction creates a web component with a specified tag name. -
Template: The template contains HTML with expressions in curly braces
{}that display reactive data. -
State: The
defaultStateobject defines reactive properties that automatically update the UI when changed. -
Lifecycle: The
onCreatedfunction runs when the component is initialized -
Reactivity: Using
state.time.now()updates the time and automatically refreshes the display.
Understanding the Code
Looking at component.js, notice how:
- We use
defineComponentto create a new web component with html tagtagName defaultStatespecifies our internal state, in this example we tracktime- The template uses an expression
{formatDate time "h:mm:ss a"}to display formatted time with the time fromstate - We use
css variablesin our component styling to inherit from our page theme. onCreatedsets up a timer that updates every second
Using the Component
We use page.html to show how you might use your new component in a page. You can now use <hello-world></hello-world> anywhere you write code on the front end.
Try It Yourself
Modify the component to include your name in the greeting and add the current date alongside the time.
Hint: You’ll need to:
- Add a new state property for your name
- Add a date display using the formatDate helper
- Update the CSS to style the new elements
Test