Socket
Socket
Sign inDemoInstall

@patternfly/pfe-toast

Package Overview
Dependencies
1
Maintainers
15
Versions
52
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@patternfly/pfe-toast

Toast element for PatternFly Elements


Version published
Maintainers
15
Weekly downloads
18
decreased by-66.04%

Weekly downloads

Readme

Source

PFElements Toast Element

Overview

pfe-toast is a self-contained alert that is hidden on page load and slides in/out of the view when programmatically opened/closed.

Usage

<pfe-toast>
    <p>You've been successfully toasted!</p>
</pfe-toast>

Slots

Default slot

The default slot can contain any type of content.

Attributes

  • auto-dismiss: This is an optional attribute string that you can provide to automatically dismiss the alert. The auto-dismiss delay value can be provided in seconds or in milliseconds. For example, auto-dismiss="3s" and auto-dismiss="3000ms" will dismiss the toast alert after three seconds. If no delay value is provided, it will default to eight seconds.
  • close-label: This is an optional attribute string that you can provide that sets the aria-label on the close button in the shadow DOM. The aria-label attribute will default to "Close".

Variables

  • Max width: Allows you to specify the maximum width of the component. Variable name: --pfe-toast--MaxWidth.
  • Min width: Allows you to specify the minimum width of the component. Variable name: --pfe-toast--MinWidth.
  • Top: Allows you to customize the distance between the component and the top of its container. Variable name: --pfe-toast--Top.
  • Right: Allows you to customize the distance between the component and the right of its container. Variable name: --pfe-toast--Right.

API

open

Manually opens a toast. Return the toast that has been opened.

document.querySelector("pfe-toast").open();

close

Manually closes a toast. Returns the toast that has been closed.

document.querySelector("pfe-toast").close();

toggle

Manually toggles a toast. Returns the toast that has been toggled.

document.querySelector("pfe-toast").toggle();

Events

pfe-toast:open

Fires when a toast is manually openned.

pfe-toast:close

Fires when a toast is manually closed.

Test

npm run test

Build

npm run build

Demo

From the PFElements root directory, run:

npm start

Code style

Toast (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.

Keywords

FAQs

Last updated on 16 Nov 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc