<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link href="css/prism.css" rel="stylesheet" />
	<link id="pagestyle" href="../css/fusioncss.blue.pink.css" rel="stylesheet">
	<link href="css/docs.css" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
	<script type="text/javascript" src="../js/fusionCSS.js"></script>
	<script type="text/javascript" src="js/docs.js"></script>
	<script src="js/prism.js"></script>
</head>
<body>

<div class="page-wrapper">

<nav class="appbar fixed">
	<ul class="pull-left">
		<li>
			<div id="viewSlideInMenu"><i class="fa fa-bars"></i><span class="sr-only">MENU</span></div>
		</li>
		<li id="style-select">
			<div class="styleSel">Style</div>
			<ul class="hide" id="cssoption"></ul>
		</li>
	</ul>
	<ul class="pull-right">
		<li><a href="https://github.com/paularlott/fusionCSS"><i class="fa fa-github"></i><span class="sr-only">GitHub</span></a></li>
		<li><a href="http://fusioncss.com/"><i class="fa fa-home"></i><span class="sr-only">fusioncss.com</span></a></li>
	</ul>
</nav>

<div class="container">

	<div class="row">
		<div class="span-t12">

<h1>Toast</h1>

<p>To use the toast popup functionality the fusionCSS.js library needs to be included.</p>

<section class="card accent">
	<div class="content">
		<div class="button primary" id="testToast">Toast With Timeout</div>
		<div class="button accent" id="testToast2">Toast With Click to Hide</div>
		<div class="button accent" id="testToast3">Toast With Click &amp; Timeout</div>

		<pre><code class="language-markup">&lt;div class="button primary" id="testToast">Toast With Timeout&lt;/div>
&lt;div class="button accent" id="testToast2">Toast With Click to Hide&lt;/div>
&lt;div class="button accent" id="testToast3">Toast With Click &amp; Timeout&lt;/div></code></pre>

		<pre><code class="language-javascript">$('#testToast').bind('click', function (e) {
	$.toastShow('', 'This massage will be dismissed automatically<br>' + (new Date()));
	e.preventDefault();
});

$('#testToast2').bind('click', function (e) {
	$.toastShow('success', 'Click dismiss to remove this message<br>' + (new Date()), 'Dismiss', function () {
		alert('Dismiss was clicked');
	});
	e.preventDefault();
});

$('#testToast3').bind('click', function (e) {
	$.toastShow('success', 'Click dismiss or wait to remove this message<br>' + (new Date()), 'Dismiss', null, true);
	e.preventDefault();
});</code></pre>

		<p><strong>Parameters</strong></p>
		<pre><code class="language-javascript">$.toastShow(
	The state to show 'success', 'error', 'warning', 'primary', 'accent' or '' for the default,
	The message to show,
	Optional action label,
	Optional function to call when the action is clicked,
	Optional bool to force with/without dismiss on timeout
);</code></pre>
	</div>
</section>

<section class="card accent">
	<div class="content">
		<div class="button primary toastTest" data-type="success">Success</div>
		<div class="button primary toastTest" data-type="error">Error</div>
		<div class="button primary toastTest" data-type="warning">Warning</div>
		<div class="button primary toastTest" data-type="primary">Primary</div>
		<div class="button primary toastTest" data-type="accent">Accent</div>
		<div class="button primary toastTest" data-type="">Default</div>
	</div>
</section>

<script type="text/javascript">
	$('#testToast').bind('click', function (e) {
		$.toastShow('', 'This massage will be dismissed automatically<br>' + (new Date()));
		e.preventDefault();
	});
	$('#testToast2').bind('click', function (e) {
		$.toastShow('success', 'Click dismiss to remove this message<br>' + (new Date()), 'Dismiss', function () {
			alert('Dismiss was clicked');
		});
		e.preventDefault();
	});
	$('#testToast3').bind('click', function (e) {
		$.toastShow('success', 'Click dismiss or wait to remove this message<br>' + (new Date()), 'Dismiss', null, true);
		e.preventDefault();
	});
	$('.toastTest').bind('click', function (e) {
		$.toastShow($(e.target).attr('data-type'), 'Click dismiss to remove this message<br>' + (new Date()), 'Dismiss');
		e.preventDefault();
	});
</script>


		</div>
	</div>

	<footer class="row">
		<div class="span-s12 text-center">
			Copyright &copy; 2013 - 2019 <a href="http://fusioncss.com/">fusionCSS</a>. All rights reserved.
		</div>
	</footer>

</div>

</div>

<nav id="slideInMenu">
	<ul>
		<li class="logo">
			<a href="http://fusioncss.com/"><img src="logo.png" alt="fusionCSS" /></a>
		</li>
		<li ><a href="index.html">Getting Started</a></li>
		<li ><a href="typography.html">Typography</a></li>
		<li ><a href="colors.html">Colors</a></li>
		<li ><a href="grid.html">Grid</a></li>
		<li ><a href="visibility.html">Visibility</a></li>
		<li ><a href="navigation.html">Navigation</a></li>
		<li ><a href="tables.html">Tables</a></li>
		<li ><a href="alerts.html">Alerts</a></li>
		<li ><a href="forms.html">Forms</a></li>
		<li ><a href="images.html">Images</a></li>
		<li ><a href="buttons.html">Buttons</a></li>
		<li ><a href="shadows.html">Shadows</a></li>
		<li ><a href="chips.html">Chips</a></li>
		<li ><a href="cards.html">Cards</a></li>
		<li ><a href="appbar.html">Appbar</a></li>
		<li ><a href="misc.html">Miscellaneous</a></li>
	</ul>

	<ul>
		<li ><a href="fam.html">Floating Action Menu</a></li>
		<li ><a href="tabs.html">Tabs</a></li>
		<li  class="active"><a href="toast.html">Toast</a></li>
		<li ><a href="tags.html">Tag Input</a></li>
	</ul>
</nav>

<div id="scrollToTop" class="hide">Top</div>

</body>
</html>
