mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Update docs (#965)
* chore(docs): run "npx browserslist@latest --update-db" * chore(docs): upgrade carbon-icons-svelte to latest * refactor(docs): re-use styles from css/all.scss * chore(docs): add pnpm install command * chore(docs): upgrade prettier, prettier-plugin-svelte * docs(date-picker): improve "DatePicker in a modal" example * fix(docs): restore "scripts-markup-styles" svelte sort order * chore(docs): upgrade mdsvex * chore(deps-dev): bump prettier, prettier-plugin-svelte, svelte * refactor(docs): use svelte:fragment where applicable * fix(docs): include missing "options" in svelteSortOrder prettier config
This commit is contained in:
parent
1bc04c5b42
commit
dce2dda72a
27 changed files with 119 additions and 190 deletions
|
@ -23,7 +23,7 @@
|
|||
</script>
|
||||
|
||||
<DataTable sortable headers="{headers}" rows="{rows}">
|
||||
<span slot="cell" let:cell>
|
||||
<svelte:fragment slot="cell" let:cell>
|
||||
{#if cell.key === "overflow"}
|
||||
<OverflowMenu flipped>
|
||||
<OverflowMenuItem text="Restart" />
|
||||
|
@ -34,5 +34,5 @@
|
|||
<OverflowMenuItem danger text="Stop" />
|
||||
</OverflowMenu>
|
||||
{:else}{cell.value}{/if}
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
</DataTable>
|
||||
|
|
|
@ -60,9 +60,9 @@
|
|||
]}"
|
||||
rows="{rows}"
|
||||
>
|
||||
<div slot="expanded-row" let:row>
|
||||
<svelte:fragment slot="expanded-row" let:row>
|
||||
<pre>
|
||||
{JSON.stringify(row, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</DataTable>
|
||||
|
|
|
@ -2,7 +2,12 @@
|
|||
import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal open modalHeading="DatePicker">
|
||||
<Modal
|
||||
open
|
||||
modalHeading="Meeting date"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
>
|
||||
<DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
|
||||
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
|
|
@ -18,9 +18,9 @@
|
|||
</Button>
|
||||
|
||||
<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
|
||||
<div slot="error">
|
||||
<svelte:fragment slot="error">
|
||||
<Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
|
||||
Error. Try again
|
||||
</Button>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</ImageLoader>
|
||||
|
|
|
@ -8,11 +8,11 @@
|
|||
<Tab label="Tab label 1" />
|
||||
<Tab label="Tab label 2" />
|
||||
<Tab label="Tab label 3" />
|
||||
<div slot="content">
|
||||
<svelte:fragment slot="content">
|
||||
<TabContent>Content 1</TabContent>
|
||||
<TabContent>Content 2</TabContent>
|
||||
<TabContent>Content 3</TabContent>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Tabs>
|
||||
|
||||
<div>
|
||||
|
|
|
@ -15,10 +15,9 @@
|
|||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
<div slot="skip-to-content">
|
||||
<svelte:fragment slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
|
||||
</svelte:fragment>
|
||||
<HeaderNav>
|
||||
<HeaderNavItem href="/" text="Link 1" />
|
||||
<HeaderNavItem href="/" text="Link 2" />
|
||||
|
|
|
@ -21,10 +21,9 @@
|
|||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
<div slot="skip-to-content">
|
||||
<svelte:fragment slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
|
||||
</svelte:fragment>
|
||||
<HeaderNav>
|
||||
<HeaderNavItem href="/" text="Link 1" />
|
||||
<HeaderNavItem href="/" text="Link 2" />
|
||||
|
|
|
@ -22,10 +22,9 @@
|
|||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
<div slot="skip-to-content">
|
||||
<svelte:fragment slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
|
||||
</svelte:fragment>
|
||||
<HeaderNav>
|
||||
<HeaderNavItem href="/" text="Link 1" />
|
||||
<HeaderNavItem href="/" text="Link 2" />
|
||||
|
|
|
@ -66,9 +66,9 @@
|
|||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte">
|
||||
<div slot="skip-to-content">
|
||||
<svelte:fragment slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<HeaderUtilities>
|
||||
<HeaderSearch
|
||||
bind:ref
|
||||
|
|
|
@ -41,9 +41,9 @@
|
|||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
<div slot="skip-to-content">
|
||||
<svelte:fragment slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<HeaderUtilities>
|
||||
<HeaderAction bind:isOpen transition="{transitions[selected].value}">
|
||||
<HeaderPanelLinks>
|
||||
|
|
|
@ -27,9 +27,9 @@
|
|||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
<div slot="skip-to-content">
|
||||
<svelte:fragment slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<HeaderUtilities>
|
||||
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
|
||||
<HeaderAction
|
||||
|
|
|
@ -25,10 +25,9 @@
|
|||
platformName="Carbon Svelte"
|
||||
bind:isSideNavOpen
|
||||
>
|
||||
<div slot="skip-to-content">
|
||||
<svelte:fragment slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
|
||||
</svelte:fragment>
|
||||
<HeaderNav>
|
||||
<HeaderNavItem href="/" text="Link 1" />
|
||||
<HeaderNavItem href="/" text="Link 2" />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue