65 lines
1.8 KiB
Markdown
65 lines
1.8 KiB
Markdown
# Systems >> Overlays >> Form Integrations ||60
|
||
|
||
```js script
|
||
import { html } from '@mdjs/mdjs-preview';
|
||
import '@lion/input-datepicker/define';
|
||
import '@lion/listbox/define';
|
||
import '@lion/listbox/define';
|
||
import '@lion/select-rich/define';
|
||
import './assets/demo-overlay-system.js';
|
||
import './assets/applyDemoOverlayStyles.js';
|
||
```
|
||
|
||
## Select Rich
|
||
|
||
Opening a Rich Select inside a dialog.
|
||
|
||
```js preview-story
|
||
export const selectRich = () => html`
|
||
<demo-overlay-system>
|
||
<button slot="invoker">Open Dialog</button>
|
||
<div slot="content" class="demo-overlay">
|
||
<h1>Select Rick example</h1>
|
||
<lion-select-rich name="favoriteColor" label="Favorite color">
|
||
<lion-option .choiceValue=${'red'}>Red</lion-option>
|
||
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
|
||
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
|
||
</lion-select-rich>
|
||
<p>
|
||
You can close this dialog here:
|
||
<button
|
||
class="close-button"
|
||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
||
>
|
||
⨯
|
||
</button>
|
||
</p>
|
||
</div>
|
||
</demo-overlay-system>
|
||
`;
|
||
```
|
||
|
||
## Input Datepicker
|
||
|
||
Opening an Input Datepicker inside a dialog.
|
||
|
||
```js preview-story
|
||
export const inputDatepicker = () => html`
|
||
<demo-overlay-system>
|
||
<button slot="invoker">Open Dialog</button>
|
||
<div slot="content" class="demo-overlay">
|
||
<h1>Input Datepicker example</h1>
|
||
<lion-input-datepicker name="date" label="Date"></lion-input-datepicker>
|
||
<p>
|
||
You can close this dialog here:
|
||
<button
|
||
class="close-button"
|
||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
||
>
|
||
⨯
|
||
</button>
|
||
</p>
|
||
</div>
|
||
</demo-overlay-system>
|
||
`;
|
||
```
|