Snackbar

The ty-snackbar component is a custom web component for displaying brief, temporary messages. Ideal for feedback messages, alerts, or quick information to users. Supports various styles and placements, and auto-hides after a specified duration.

Usage

To use ty-snackbar, include it in your HTML code and control its behavior with JavaScript.

<div>
  <ty-snackbar id="snackbar" placement="top"></ty-snackbar>
  <button onClick="showSnackbar()">Show snackbar</button>

  <script>
    function showSnackbar() {
      const snackbar = document.querySelector('#snackbar');
      snackbar.show('Success message', 'success');
    }
  </script>
</div>

API

Properties

Name	Description	Type	Default
message	The text message to be displayed.	String	''
placement	Placement of the snackbar ('top' or 'bottom').	String	'bottom'
variant	Style variant ('default', 'success', 'error', 'warning', 'info').	String	'default'
duration	Duration in milliseconds before auto-hide.	Number	3000

Methods

Method	Description
show(message, variant, duration)	Displays the snackbar with the specified message, style variant, and duration.
hide()	Hides the snackbar.