mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

move to frame

Browse source
This commit is contained in:
Nicco 2021-11-04 23:51:57 +00:00 • committed by GitHub
commit db520b99dc
2 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

15
docs/src/pages/components/DatePicker.svx
View file

@ -3,19 +3,10 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
--- ---
<script> <script>
import { DatePicker, DatePickerSkeleton, DatePickerInput, InlineNotification, CodeSnippet } from "carbon-components-svelte"; import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
const modalCodeSnippet = `<DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
<DatePickerInput />
</DatePicker>"/>`
</script> </script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<span class="body-short-01">If you are using the DatePicker inside of a Modal you might need to add <code>static</code> to the <code>flatpickrProps</code> as shown below to correct the positioning.</span>
</InlineNotification>
<CodeSnippet type="multi" code={modalCodeSnippet}/>
### Default (simple) ### Default (simple)
<DatePicker> <DatePicker>
@ -78,6 +69,10 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
<FileSource src="/framed/DatePicker/DatePickerRange" /> <FileSource src="/framed/DatePicker/DatePickerRange" />
### DatePicker in a modal
<FileSource src="/framed/DatePicker/DatePickerModal" />
### Skeleton ### Skeleton
<DatePickerSkeleton /> <DatePickerSkeleton />

9
docs/src/pages/framed/DatePicker/DatePickerModal.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<Modal>
<DatePicker flatpickrProps="{{ static: true }}">
<DatePickerInput />
</DatePicker>"/>
</Modal>