mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
feat(toast-notification): add fullWidth
prop (#1444)
* feat(toast-notification): add `fullWidth` prop * Run "yarn build:docs" * test(toast-notification): assert `fullWidth` prop * docs(toast-notification): add "Full width" example
This commit is contained in:
parent
b04a281939
commit
8fea168ffd
6 changed files with 45 additions and 12 deletions
|
@ -33,6 +33,12 @@
|
|||
/** Set to `true` to hide the close button */
|
||||
export let hideCloseButton = false;
|
||||
|
||||
/**
|
||||
* Set to `true` for the notification to span
|
||||
* the full width of its containing element.
|
||||
*/
|
||||
export let fullWidth = false;
|
||||
|
||||
import { createEventDispatcher, onMount } from "svelte";
|
||||
import NotificationButton from "./NotificationButton.svelte";
|
||||
import NotificationIcon from "./NotificationIcon.svelte";
|
||||
|
@ -78,6 +84,7 @@
|
|||
class:bx--toast-notification--warning="{kind === 'warning'}"
|
||||
class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}"
|
||||
{...$$restProps}
|
||||
style="{fullWidth && 'width: 100%;'}{$$restProps.style}"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue