Components An overview of component features package Guide

Components

Creating Components

Semantic UI is a reactive framework to make it easier to build websites with web components by providing a robust set of tools that help avoid the common pitfalls that people experience when trying to leave front end frameworks like React, or Vue and “go native” with web components.

Getting Started - It’s recommended to check out our interactive tutorial to introduce yourself to the features of Semantic UI before digging into the tech guides.

Core features of Semantic UI

Minimal Example

The following is a minimal example to get you familiar with how components are defined.

Developer Experience

Components provides everything you’d expect from other modern front end frameworks, but is developed specifically for web components.

UI component can attach themselves to an html tags that can be used immediately in your site, or be used as partials inside other components.

Web Components vs Frameworks (Svelte/React/Vue) - Web components can render without compilation in the browser making them extremely potent and portable. All major frameworks support web components making them accessible and portable if you choose to write part or all of your stack using a major framework.

Key Features

Portable

Components are defined using defineComponent which exports a web components which can be used natively in the browser, or in React, Vue, Svelte and other frameworks.

defineComponent({
tagName: 'my-component',
template: '...',
css: '...',
state: { ... },
settings: { ... },
createComponent: () => ({ ... }),
onCreated: () => { ... },
onRendered: () => { ... },
onDestroyed: () => { ... },
});

Robust Templating

Components use a built-in templating system that supports expressions, slots, conditionals, snippets, loops, and more.

{#each user in users}
<div class="user">
{#if user}
<h2>{user.name}</h2>
<p>{user.email}</p>
{else}
<p>No info provided.</p>
{/if}
</div>
{/each}

Design System

Components provides an integrated design system powered by css layers and variables with native encapsulation provided by the Shadow DOM.

/* expose theming variables for your component
inherited from design system
*/
:host {
--counter-padding: var(--padding);
--counter-value-color: var(--primary-text-color);
}
.counter {
padding: var(--counter-padding);
.value {
color: var(--counter-color);
}
}

Events & Keybindings

Components include a built in event management built around native DOM events, making it easy to dispatch events

const createComponent = ({state, dispatchEvent}) => ({
increment(amount) {
// update internal counter
state.counter.increment(amount);
// dispatches a dom event 'increment' from this web component
dispatchEvent('increment', {
counter: state.counter.value,
amount
});
},
decrement(amount) {
// update internal counter
state.counter.decrement(amount);
// dispatches a dom event 'decrement' from this web component
dispatchEvent('decrement', {
counter: state.counter.value,
amount
});
}
});

Listen to events and trigger functionality.

const events = {
'click .increment': ({ self }) => self.increment(),
'click .decrement': ({ self }) => self.decrement(),
};

Or bind keybindings scoped to your component.

const keys = {
'up': ({ self }) => self.decrement(),
'down': ({ self }) => self.increment(),
'shift + up': ({ self }) => self.decrement(10),
'shift + down': ({ self }) => self.increment(10),
};