Alert
<sc-alert></sc-alert>
This component let users add alert message.
- Preview
- Code
<sc-alert open type="success">Click Me!</sc-alert>
Component Codex
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| closable | Makes the alert closable. | boolean | false |
| duration | The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. | number | Infinity |
| noIcon | No icon | boolean | |
| open | Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. | boolean | false |
| scrollMargin | Scroll margin | string | '0px' |
| scrollOnOpen | Scroll into view. | boolean | |
| title | The title. | string | |
| type | The type of alert. | "danger" | "info" | "primary" | "success" | "warning" | 'primary' |
Events
| Event | Description | Type |
|---|---|---|
scHide | When alert is hidden | CustomEvent<void> |
scShow | When alert is shown | CustomEvent<void> |
Methods
hide() => Promise<void>
Hides the alert
show() => Promise<void>
Shows the alert.
Shadow Parts
| Part | Description |
|---|---|
base | The elements base wrapper. |
close | The close icon. |
icon | The alert icon. |
message | The alert message. |
text | The alert text. |
title | The alert title. |
Used By
- sc-cart-form
- sc-checkout
- sc-checkout-form-errors
- sc-checkout-mollie-payment
- sc-checkout-test-complete
- sc-coupon-form
- sc-custom-order-price-input
- sc-dashboard-module
- sc-error
- sc-login-form
- sc-login-provider
- sc-order-confirm-provider
- sc-order-confirmation
- sc-order-manual-instructions
- sc-password-nag
- sc-payment
- sc-payment-methods-list
- sc-paypal-add-method
- sc-paystack-add-method
- sc-price-choice
- sc-product-buy-button
- sc-product-item-list
- sc-product-price-modal
- sc-stripe-add-method
- sc-stripe-payment-request
- sc-subscription-reactivate
- sc-subscription-switch
- sc-upcoming-invoice
- sc-upsell