mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(notification): add examples "Prevent default close behavior" (#1380)

Browse source 
Follow-up to #1379
This commit is contained in:
metonym 2022-06-29 10:14:22 -07:00 • committed by GitHub
commit 04f18ae5e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,6 +11,21 @@ source: Notification/InlineNotification.svelte
<InlineNotification title="Error:" subtitle="An internal server error occurred." />
### Prevent default close behavior
`InlineNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
Svelte version 3.48.0 or greater is required.
</div>
</InlineNotification>
<InlineNotification title="Error" subtitle="An internal server error occurred." on:close={(e) => {
e.preventDefault();
// custom close logic (e.g., transitions)
}} />
### Slottable title, subtitle
<InlineNotification>

17
docs/src/pages/components/ToastNotification.svx
View file

@ -3,7 +3,7 @@ source: Notification/ToastNotification.svelte
---
<script>
import { ToastNotification } from "carbon-components-svelte";
import { ToastNotification, InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -11,6 +11,21 @@ source: Notification/ToastNotification.svelte
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
### Prevent default close behavior
`ToastNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
Svelte version 3.48.0 or greater is required.
</div>
</InlineNotification>
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" on:close={(e) => {
e.preventDefault();
// custom close logic (e.g., transitions)
}} />
### Slottable title, subtitle, caption
<ToastNotification>