Using Components in HTML

Adding UI Components

Components can be used in your html like regular tags

  <head>
    <link rel="stylesheet" href="https://unpkg.com/@semantic-ui/core/dist/themes/button.css">
    <script type="module" src="https://unpkg.com/@semantic-ui/core/components/button"></script>
  </head>

<ui-menu>
  <menu-item>Home</menu-item>
  <menu-item>2</menu-item>
  <menu-item>3</menu-item>
</ui-menu>

Web components can be quickly identified because they are required by spec to have a - dash in their names so <ui-button> but not <button>.

Using UI Components

Modifiers

Semantic UI components that have a specification like button, label, or menu all support three ways to pass in descriptive modifiers to the components. These are designed to give your team flexibility and choice in how their codebase is structured.

Syntax Types

Standard - Standard syntax allows you to use modifiers directly without specifying their grouping. This is the most similar to natural language.
Technical - Technical syntax includes groupings and is the most similar to normal html components.
Classic - Classic syntax uses the class attribute to specify styling modifiers.

<ui-button large primary>Primary</ui-button>

<ui-button size="large" emphasis="primary">Primary</ui-button>

<ui-button class="large primary">Primary</ui-button>

Passing in Data

Web components allow you to pass in a variety of information outside of styling modifiers, these can include callback functions, events, and structured data like objects or arrays.

Arrays and Objects

When using vanilla HTML array or object data must be serialized when specified as an attribute. This can be simplified when using a modern UI framework.

<ui-menu items='[{"label":"One","value":"1"},{"label":"Two","value":"2"},{"label":"Three","value":"3"}]'></ui-menu>

If you are authoring a SUI template serialization will be handled for you automatically.

<ui-menu items={menuItems}></ui-menu>

Functions

Some components allow you to pass in callback functions, for instance <ui-panel> has a callback to determine the natural size of a panel getNaturalSize. Functions cannot be serialized as attributes so you must pass them in as properties after the component is defined.

Events

Events are dispatched using native custom events which means you can attach event handlers similar to any other event on the page.

const menu = document.querySelectorAll('ui-menu');
menu.addEventListener('change', (event) => {
  console.log(`new value is ${event.details.value}`);
});

Plurality

Some components support plurality, attributes assigned to the group pass through to the children. For instance in this example a button group is large so all child buttons are large, with one also being primary.

Large Primary

Large

<ui-buttons large>
  <ui-button primary>Large Primary</ui-button>
  <ui-button>Large</ui-button>
  <ui-button>Large</ui-button>
</ui-buttons>

<ui-buttons size="large">
  <ui-button emphasis="primary">Primary</ui-button>
  <ui-button>Large</ui-button>
  <ui-button>Large</ui-button>
</ui-buttons>

<ui-buttons class="large">
  <ui-button class="primary">Primary</ui-button>
  <ui-button>Large</ui-button>
  <ui-button>Large</ui-button>
</ui-buttons>

Theming

Semantic UI Web Components provides pre-defined themes that you can use out of the box. However, you can also customize the components by overriding their CSS variables.

All Instances

Scope your theme css to :root, this will ensure they apply across nested components.

:root {
  --button-primary-color: var(--red);
}

Specific Instances

Use any selector to scope css variables to a particular section of your page.

#sidebar {
  --button-primary-color: var(--red);
}