89b835a799
Co-authored-by: Joren Broekema <Joren.Broekema@ing.com> Co-authored-by: Alex Ghiu <Alex.Ghiu@ing.com> Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>
35 lines
2 KiB
Text
35 lines
2 KiB
Text
import { Story, Meta, html } from '@open-wc/demoing-storybook';
|
|
|
|
<Meta title="Overlays/Intro" />
|
|
|
|
# Overlay System
|
|
|
|
The overlay system allows to create different types of overlays like dialogs, toasts, tooltips, dropdown, etc.
|
|
It's designed to be highly flexible, while still delivering sensible defaults.
|
|
On top of this, the system was built having accessibility in mind.
|
|
|
|
## Features
|
|
|
|
- local rendering (at dom location)
|
|
- positioning with popper.js
|
|
- global rendering (at body level)
|
|
- fully accessible
|
|
- flexible to build multiple overlay components
|
|
|
|
## Content
|
|
|
|
The Overlays System offers the following features.
|
|
|
|
| Package | Version | Description |
|
|
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
|
|
| [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 |
|
|
|
|
## How to use
|
|
|
|
### Installation
|
|
|
|
```sh
|
|
npm i --save @lion/overlays
|
|
```
|