chore(form-integrations): add input-datepicker to dialog demo
Co-authored-by: jorenbroekema <Joren.Broekema@ing.com>
This commit is contained in:
parent
9b9db3dde4
commit
03100f6b1e
2 changed files with 29 additions and 8 deletions
|
|
@ -5,8 +5,8 @@
|
|||
```js script
|
||||
import { html } from 'lit-html';
|
||||
import '@lion/dialog/lion-dialog.js';
|
||||
import '@lion/input-datepicker';
|
||||
import '@lion/select-rich/lion-select-rich.js';
|
||||
import '@lion/listbox/lion-options.js';
|
||||
import '@lion/listbox/lion-option.js';
|
||||
|
||||
export default {
|
||||
|
|
@ -14,19 +14,19 @@ export default {
|
|||
};
|
||||
```
|
||||
|
||||
## Select Rich
|
||||
|
||||
Opening a Rich Select inside a dialog
|
||||
|
||||
```js story
|
||||
export const main = () => html`
|
||||
export const selectRich = () => html`
|
||||
<lion-dialog>
|
||||
<button slot="invoker">Open Dialog</button>
|
||||
<div slot="content">
|
||||
<lion-select-rich name="favoriteColor" label="Favorite color">
|
||||
<lion-options slot="input">
|
||||
<lion-option .choiceValue=${'red'}>Red</lion-option>
|
||||
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
|
||||
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
|
||||
</lion-options>
|
||||
</lion-select-rich>
|
||||
<button
|
||||
class="close-button"
|
||||
|
|
@ -38,3 +38,24 @@ export const main = () => html`
|
|||
</lion-dialog>
|
||||
`;
|
||||
```
|
||||
|
||||
## Input Datepicker
|
||||
|
||||
Opening a Input Datepicker inside a dialog
|
||||
|
||||
```js story
|
||||
export const inputDatepicker = () => html`
|
||||
<lion-dialog>
|
||||
<button slot="invoker">Open Dialog</button>
|
||||
<div slot="content">
|
||||
<lion-input-datepicker></lion-input-datepicker>
|
||||
<button
|
||||
class="close-button"
|
||||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
||||
>
|
||||
⨯
|
||||
</button>
|
||||
</div>
|
||||
</lion-dialog>
|
||||
`;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ export class LionSelectInvoker extends LionButton {
|
|||
css`
|
||||
:host {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in a new issue