@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.
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.
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>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>.
<!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>| Tag Name | Description |
|---|---|
|
Loading icon component. | |
|
Element that defers content rendering to a provided function / promise. | |
|
Control to display modal content with optional header and footer content. | |
|
Control that allows an action to be executed. | |
|
Component that displays an alert. | |
|
Clear icon component. | |
|
Search icon component. | |
|
Search input control. | |
|
Chevron down icon component. | |
|
More icon component. | |
|
Control to get / set a value within a list of options. | |
|
Component that displays an icon. | |
|
Color input control. | |
|
Control to input text. | |
|
Label component that renders styled text. | |
|
Control to switch a value on or off. | |
|
Chevron left icon component. | |
|
Chevron right icon component. | |
|
Calendar component to set specific date. | |
|
Indeterminate icon component. | |
|
Check icon component. | |
|
Control that allows a selection to be made. | |
|
Close icon component. | |
|
Control that can be used for input, setting attributes, or performing actions. | |
|
Arrow right icon component. | |
|
Backspace icon component. | |
|
Caps off icon component. | |
|
Caps on icon component. | |
|
Caps lock icon component. | |
|
Next icon component. | |
|
Previous icon component. | |
|
Send icon component. | |
|
An internal keyboard button control used in the keyboard component. | |
|
A responsive on-screen keyboard control component. | |
|
Control to enter a formatted currency value. | |
|
A calendar icon component. | |
|
Control to get / set a specific date using a calendar. | |
|
Email input control, used in forms for input validation and to display correct virtual keyboard on mobile. | |
|
Component that groups together content in an expanded box. | |
|
Layout container that groups expanders. | |
|
Control to indicate an action to be executed. Typically used for navigational purposes. | |
|
Hidden eye icon component | |
|
Visible eye icon component. | |
|
Closed lock icon component. | |
|
Open lock icon component. | |
|
Minus icon component. | |
|
Plus icon component. | |
|
Input control to enter a single line of numbers. | |
|
Password input control. | |
|
Input control to enter a masked numeric value. | |
|
Control to select a single value from a group of values. | |
|
Control to group radio components for single selection | |
|
Control that can be used to display slotted content, for use within an Tab Group component. | |
|
Control that can be used to display custom slotted content, for use within Tab Group component with associated Tab component. | |
|
Component that displays content in tabs. | |
|
A toast container that animates in and stacks toast elements. | |
|
Component to visually notify a user of a message. |
Made possible by these fantastic people. 💖
See the CONTRIBUTING.md guide to get involved.
chromaticWaster |
BOTLANNER |
stefan505 |
jn42lm1 |
capitec-oss |
Makhubedu |
Licensed under MIT.
We are hiring 🤝 Join us! 🇿🇦
https://www.capitecbank.co.za/about-us/careers