Using Components in HTML An overview of using web components in your html codebase. code Guide

Using Components in HTML

Adding UI Components

Components can be used in your html like regular tags

Head
  <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>
Page
<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>

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 PrimaryLargeLarge 

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