mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 12:23:02 +00:00
docs(date-picker): do not open modal by default to prevent stealing focusing
This commit is contained in:
parent
4aa09eeef8
commit
33d10cd887
1 changed files with 12 additions and 2 deletions
|
@ -1,12 +1,22 @@
|
||||||
<script>
|
<script>
|
||||||
import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
|
import {
|
||||||
|
Button,
|
||||||
|
Modal,
|
||||||
|
DatePicker,
|
||||||
|
DatePickerInput,
|
||||||
|
} from "carbon-components-svelte";
|
||||||
|
|
||||||
|
let open = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<Button on:click="{() => (open = true)}">Select date</Button>
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
open
|
bind:open
|
||||||
modalHeading="Meeting date"
|
modalHeading="Meeting date"
|
||||||
primaryButtonText="Confirm"
|
primaryButtonText="Confirm"
|
||||||
secondaryButtonText="Cancel"
|
secondaryButtonText="Cancel"
|
||||||
|
on:click:button--secondary="{() => (open = false)}"
|
||||||
>
|
>
|
||||||
<DatePicker datePickerType="single" style="min-height: 420px">
|
<DatePicker datePickerType="single" style="min-height: 420px">
|
||||||
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
|
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue