@capitec/omni-components

Omni Components

@capitec/omni-components

Modern UI component library for mobile and web

[Introduction] [Usage] [API Reference] [Contributors] [License]

🚩 View our interactive documentation for more info on component usage and live previews.

Introduction

Omni Components is a collection UI components for mobile and web that enable you to build omni-channel user experience that look great on every size of screen.

Core features of the library include:

Framework Agnostic - Components are delivered as standard HTML web components, that can be used in VanillaJS or within any framework, e.g. Lit, React, Vue, Angular, etc.
Theming - Components can be styled globally and individually using CSS properties.
Responsive - The components adapt responsively to the device that they render on to provide contextual user experiences.
Mobile Optimized - We develop for mobile first, and scale up to larger screen sizes from there.
Lightweight - The library is small, tree-shakes well, and comes with minimal dependencies, minimizing bloat to your project.

Usage

1️⃣ Install Omni Components in your project.

npm install '@capitec/omni-components'

2️⃣ Import the components you require. See INSTALLATION.md for more detail.

// JS import
import '@capitec/omni-components/button';

// or HTML import
<script type="module" src="/node_modules/omni-components/dist/button/button.js" ></script>

3️⃣ Use the component tag in your web page.

<omni-button type="primary" label="Button"></omni-button>

💡 Example

This example shows how to import and use a few common components. Omni Components can be combined with 3rd party libraries, e.g. here we embed a Google Material Icons as a slotted element within a <omni-button>.

CodePen

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">

        <title>Omni Components Demo</title>

        <base href="/">
      
        <!-- Import Google Material icons library -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!-- Import Omni Components -->
        <script type="module">
          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/button/index.js";
          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/icon/index.js";
          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/check/index.js";
          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/radio/index.js";
          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/switch/index.js";
          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/text-field/index.js";
          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/number-field/index.js";
          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/password-field/index.js";
          import "https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/select/index.js";

          document.querySelector('omni-select').items = [
            {"id":"1", "label":"Peter Parker"},
            {"id":"2","label":"James Howlett"},
            {"id":"3", "label":"Tony Stark"},
            {"id":"4","label":"Steve Rodgers"},
            {"id":"5", "label":"Bruce Banner"},
            {"id":"6","label":"Wanda Maximoff"},
            {"id":"7", "label":"TChalla"},
            {"id":"8","label":"Henry P. McCoy"},
            {"id":"9", "label":"Carl Lucas"},
            {"id":"10","label":"Frank Castle"}
          ];
        </script>

      <style>
        :root {
          --omni-theme-primary-color: #005AE0;
          --omni-theme-primary-hover-color: #0052D8;
          --omni-theme-primary-active-color: #004BD1;
        }
        
        body {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          gap: 20px;
        }
        
        omni-text-field, omni-number-field, omni-password-field, omni-select {
          width: 300px;
        }
      </style>
    </head>

    <body>
        <omni-button type="primary" label="Button" slot-position="left">
          <omni-icon icon="@material/thumb_up"></omni-icon>
        </omni-button>

        <omni-check label="Check" error="Required"></omni-check>

        <omni-radio label="Radio"></omni-radio>

        <omni-switch label="Switch"></omni-switch>

        <omni-text-field label="Text Field"></omni-text-field>

        <omni-number-field label="Number Field"></omni-number-field>

        <omni-password-field label="Password Field"></omni-password-field>

        <omni-select label="Select" display-field="label" idfield="id"></omni-select>
    </body>
</html>

API Reference

Tag Name	Description
omni-loading-icon	Loading icon component.
omni-render-element	Element that defers content rendering to a provided function / promise.
omni-modal	Control to display modal content with optional header and footer content.
omni-button	Control that allows an action to be executed.
omni-alert	Component that displays an alert.
omni-clear-icon	Clear icon component.
omni-search-icon	Search icon component.
omni-search-field	Search input control.
omni-chevron-down-icon	Chevron down icon component.
omni-more-icon	More icon component.
omni-select	Control to get / set a value within a list of options.
omni-icon	Component that displays an icon.
omni-color-field	Color input control.
omni-text-field	Control to input text.
omni-label	Label component that renders styled text.
omni-switch	Control to switch a value on or off.
omni-chevron-left-icon	Chevron left icon component.
omni-chevron-right-icon	Chevron right icon component.
omni-calendar	Calendar component to set specific date.
omni-indeterminate-icon	Indeterminate icon component.
omni-check-icon	Check icon component.
omni-check	Control that allows a selection to be made.
omni-close-icon	Close icon component.
omni-chip	Control that can be used for input, setting attributes, or performing actions.
omni-arrow-right-icon	Arrow right icon component.
omni-backspace-icon	Backspace icon component.
omni-caps-off-icon	Caps off icon component.
omni-caps-on-icon	Caps on icon component.
omni-caps-lock-icon	Caps lock icon component.
omni-next-icon	Next icon component.
omni-previous-icon	Previous icon component.
omni-send-icon	Send icon component.
omni-keyboard-button	An internal keyboard button control used in the keyboard component.
omni-keyboard	A responsive on-screen keyboard control component.
omni-currency-field	Control to enter a formatted currency value.
omni-calendar-icon	A calendar icon component.
omni-date-picker	Control to get / set a specific date using a calendar.
omni-email-field	Email input control, used in forms for input validation and to display correct virtual keyboard on mobile.
omni-expander	Component that groups together content in an expanded box.
omni-expander-group	Layout container that groups expanders.
omni-hyperlink	Control to indicate an action to be executed. Typically used for navigational purposes.
omni-eye-hidden-icon	Hidden eye icon component
omni-eye-visible-icon	Visible eye icon component.
omni-lock-closed-icon	Closed lock icon component.
omni-lock-open-icon	Open lock icon component.
omni-minus-icon	Minus icon component.
omni-plus-icon	Plus icon component.
omni-number-field	Input control to enter a single line of numbers.
omni-password-field	Password input control.
omni-pin-field	Input control to enter a masked numeric value.
omni-radio	Control to select a single value from a group of values.
omni-radio-group	Control to group radio components for single selection
omni-tab	Control that can be used to display slotted content, for use within an Tab Group component.
omni-tab-header	Control that can be used to display custom slotted content, for use within Tab Group component with associated Tab component.
omni-tab-group	Component that displays content in tabs.
omni-toast-stack	A toast container that animates in and stacks toast elements.
omni-toast	Component to visually notify a user of a message.