Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

@patternfly/pfe-toast

Package Overview
Dependencies
1
Maintainers
16
Versions
52
Issues
File Explorer

Advanced tools

@patternfly/pfe-toast

Toast element for PatternFly Elements

    1.12.3latest
    Github

Version published
Maintainers
16
Weekly downloads
319
increased by30.74%

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 01 Feb 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • 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