Skip to content

RetroRabbit/omni-components

 
 

Repository files navigation


Logo

Omni Components

@capitec/omni-components

Modern UI component library for mobile and web


Downloads per week NPM Version GitHub Build MIT License

Docs


[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 NameDescription

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.


Contributors

Made possible by these fantastic people. 💖

See the CONTRIBUTING.md guide to get involved.

chromaticWaster
chromaticWaster
BOTLANNER
BOTLANNER
stefan505
stefan505
jn42lm1
jn42lm1
capitec-oss
capitec-oss
Makhubedu
Makhubedu

License

Licensed under MIT.







Capitec Logo

We are hiring 🤝 Join us! 🇿🇦

https://www.capitecbank.co.za/about-us/careers



Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 88.8%
  • JavaScript 5.6%
  • CSS 3.0%
  • Nunjucks 2.6%