spectre.css-js
Version:
JavaScript code base for Spectre.css
26 lines (24 loc) • 4.62 kB
HTML
<html lang="en"><head><meta charset="utf-8"><title>Spectre.js App</title><link rel="stylesheet" href="assets/style.css"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/default.min.css"></head><body><div class="container"><div class="columns"><div class="col-2 bg-gray p-fixed ui-menu"><ul class="nav"><li class="nav-item active"><a href="index.html">Home</a></li><li class="nav-item"><a>Examples</a><ul class="nav"><li class="nav-item"><a href="chips.html">Chips</a></li><li class="nav-item"><a href="tabs.html">Tabs</a></li><li class="nav-item"><a href="toasts.html">Toasts</a></li><li class="nav-item"><a href="auto-complete.html">Auto-complete</a></li></ul></li></ul></div><div class="col-10 col-ml-auto px-2"><div class="p-4"><h1 class="text-center mb-4">Toasts</h1><h3>Description</h3><p></p>This widget allows to <code>close</code> toast by click on the button
and show notification by <code>.info()</code>, <code>.error()</code> etc methods<h3 class="mt-5">Simple alert</h3><p>To create <code>toast</code> widget just paste following code as is</p><pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast toast-primary"</span> <span class="hljs-attr">data-toast</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre><h5>Result</h5><div class="toast toast-primary" data-toast><button class="btn btn-clear float-right"></button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><h3 class="mt-5">Show notifications</h3><p>If you want to show notification you may use the following code example in your JS file</p><pre class="code" data-lang="JavaScript"><code>Spectre.Toast.info(<span class="hljs-string">'Content of the toast'</span>);
Spectre.Toast.info(<span class="hljs-string">'Content of the toast'</span>, <span class="hljs-string">'Toast title'</span>);
</code></pre><div class="btn-group"><button class="btn btn-primary" onclick="Spectre.Toast.info('Content of the toast')">Demo</button><button class="btn btn-primary" onclick="Spectre.Toast.info('Content of the toast', 'Toast title')">Demo</button></div><p class="mt-3">Also, you may use custom types of notification</p><pre class="code" data-lang="JavaScript"><code>Spectre.Toast.error(<span class="hljs-string">'Some error'</span>)
Spectre.Toast.success(<span class="hljs-string">'All <em>is</em> fine'</span>)
Spectre.Toast.warning(<span class="hljs-string">'Warning content'</span>)
</code></pre><div class="btn-group"><button class="btn btn-error" onclick="Spectre.Toast.error('Some error')">Error</button><button class="btn btn-success" onclick="Spectre.Toast.success('All <em>is</em> fine')">Success</button><button class="btn btn-primary" onclick="Spectre.Toast.warning('Warning content')">Warning</button></div><h3 class="mt-5">Configuration</h3><p>All toasts supports custom parameters in methods and you can change the following values</p><pre class="code" data-lang="JavaScript"><code>Spectre.Toast.show({
<span class="hljs-attr">title</span>: <span class="hljs-string">'Test toast'</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">'Simple toast text message'</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'primary'</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span>,
<span class="hljs-attr">autoClose</span>: <span class="hljs-literal">true</span>,
});
<span class="hljs-comment">// or</span>
Spectre.Toast.error(
<span class="hljs-string">'Error message'</span>,
<span class="hljs-string">'Error title'</span>,
{<span class="hljs-attr">autoClose</span>: <span class="hljs-literal">false</span>}
);
</code></pre><div class="btn-group"><button class="btn btn-primary" onclick="Spectre.Toast.show({title: 'Test toast',message: 'Simple toast text message',type: 'primary',timeout: 3000,autoClose: true,});">Show</button><button class="btn btn-error" onclick="Spectre.Toast.error('Error message','Error title',{autoClose: false});">Error</button></div><div class="hero"></div></div></div></div></div><script src="assets/docs.js"></script></body></html>