76 lines
12 KiB
Text
76 lines
12 KiB
Text
import { Story, Meta, html } from '@open-wc/demoing-storybook';
|
|
|
|
<Meta title="Intro/Lion Web Components" />
|
|
|
|
# Lion Web Components
|
|
|
|
Lion web components is a set of highly performant, accessible and flexible Web Components.
|
|
They provide an unopinionated, white label layer that can be extended to your own layer of components.
|
|
|
|
## Features
|
|
|
|
- pure es modules
|
|
- exposes functions/classes and web components
|
|
- provides pure functionality
|
|
- fully accessible
|
|
- built to be extended
|
|
|
|
> Note: These demos may look a little bland but that is on purpose. They only come with functional stylings.
|
|
> This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.
|
|
|
|
## Systems
|
|
|
|
Lion web components is logically organized in groups of systems.
|
|
|
|
| System | Description |
|
|
| ------- | ----------- |
|
|
| [Forms](?path=/docs/forms-intro--page) | A system that lets you make complex forms with ease. Add validation, translations and use a wide range of pre made form controls. |
|
|
| [Buttons](?path=/docs/buttons-intro--page) | Every application needs buttons to allow interactions. These web components bring common UX patterns while still full integrated with (native) forms. |
|
|
| [Overlays](?path=/docs/overlays-intro--page) | If something needs to overlay content this is your place. Dialogs, Tooltips and a full overlay system to build more if needed |
|
|
| [Navigation](?path=/docs/navigation-intro--page) | Components which are used to guide users |
|
|
| [Localize](?path=/docs/localize-intro--page) | Localize text, numbers, dates and a way to store/fetch these data within web components |
|
|
| [Icons](?path=/docs/icons-intro--page) | Loading and displaying icons |
|
|
| [Others](?path=/docs/others-intro--page) | Features not fitting any other category |
|
|
| [Helpers](?path=/docs/helpers-intro--page) | Helpers to make your and your life easier |
|
|
|
|
## Packages
|
|
|
|
If you need more details these are the actual npm packages we are publishing
|
|
|
|
| Package | Version | Description |
|
|
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
|
|
| **-- Forms --** | | |
|
|
| [form](?path=/docs/forms-form-overview--page) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements |
|
|
| [field](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/field) | Base Class for all inputs |
|
|
| [fieldset](?path=/docs/forms-fieldset-overview--page) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs |
|
|
| [validate](?path=/docs/form-system-validate-system--page) | [](https://www.npmjs.com/package/@lion/validate) | Validation for form components |
|
|
| [checkbox](?path=/docs/forms-checkbox--default-story) | [](https://www.npmjs.com/package/@lion/checkbox) | Checkbox form element |
|
|
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | [](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes |
|
|
| [input](?path=/docs/forms-input--default-story) | [](https://www.npmjs.com/package/@lion/input) | Input element for strings |
|
|
| [input-amount](?path=/docs/forms-input-amount--default-story) | [](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts |
|
|
| [input-date](?path=/docs/forms-input-date--default-story) | [](https://www.npmjs.com/package/@lion/input-date) | Input element for dates |
|
|
| [input-datepicker](?path=/docs/forms-input-datepicker--default-story) | [](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker |
|
|
| [input-email](?path=/docs/forms-input-email--default-story) | [](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails |
|
|
| [input-iban](?path=/docs/forms-input-iban--default-story) | [](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs |
|
|
| [input-range](?path=/docs/forms-input-range--default-story) | [](https://www.npmjs.com/package/@lion/input-range) | Input element for a range of values |
|
|
| [radio](?path=/docs/forms-radio--default-story) | [](https://www.npmjs.com/package/@lion/radio) | Radio from element |
|
|
| [radio-group](?path=/docs/forms-radio-group--default-story) | [](https://www.npmjs.com/package/@lion/radio-group) | Group of radios |
|
|
| [select](?path=/docs/forms-select--default-story) | [](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element |
|
|
| [textarea](?path=/docs/forms-textarea--default-story) | [](https://www.npmjs.com/package/@lion/textarea) | Multiline text input |
|
|
| **-- Buttons --** | | |
|
|
| [button](?path=/docs/buttons-button--default-story) | [](https://www.npmjs.com/package/@lion/button) | Button |
|
|
| [switch](?path=/docs/buttons-switch--default-off) | [](https://www.npmjs.com/package/@lion/switch) | Switch |
|
|
| **-- Overlays --** | | |
|
|
| [overlays](?path=/docs/overlays-system-overview--default-story) | [](https://www.npmjs.com/package/@lion/overlays) | Overlay System |
|
|
| [dialog](?path=/docs/overlays-dialog--default-story) | [](https://www.npmjs.com/package/@lion/dialog) | Dialog element |
|
|
| [tooltip](?path=/docs/overlays-tooltip--default-story) | [](https://www.npmjs.com/package/@lion/tooltip) | Tooltip element |
|
|
| **-- Icons --** | | |
|
|
| [icon](?path=/docs/icons-icon--default-story) | [](https://www.npmjs.com/package/@lion/icon) | Display our svg icons |
|
|
| **-- Navigation --** | | |
|
|
| [steps](?path=/docs/navigation-steps--default-story) | [](https://www.npmjs.com/package/@lion/steps) | Multi Step System |
|
|
| [tabs](?path=/docs/navigation-tabs--default-story) | [](https://www.npmjs.com/package/@lion/tabs) | Move between a small number of equally important views |
|
|
| **-- Others --** | | |
|
|
| [core](?path=/docs/deep-dives-core--page) | [](https://www.npmjs.com/package/@lion/core) | Core System (exports LitElement, lit-html) |
|
|
| [localize](?path=/docs/localize-localize--default-story) | [](https://www.npmjs.com/package/@lion/localize) | Localize and translate your application/components |
|
|
| [ajax](?path=/docs/others-ajax--default-story) | [](https://www.npmjs.com/package/@lion/ajax) | Fetching data via ajax request |
|
|
| [calendar](?path=/docs/calendar--default-story) | [](https://www.npmjs.com/package/@lion/calendar) | Standalone calendar |
|