dl-notificator
Version:
Componente contruido en js para mostrarle informacion al usuario mediante notificaciones temporales
229 lines (223 loc) • 6.49 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Notificador</title>
<meta name="description" content="componente hecho en JS para mostrar notificaciones. Generalmente usado para indicar errores, éxito, información o advertencias">
<meta name="author" content="https://github.com/JoseJuan81">
<style>
:root {
--button-color: #3772FF;
--background-page: rgba(245, 245, 245, 0.25);
}
body {
margin: 0;
background-color: var(--background-page);
}
.notification-btn {
background-color: var(--button-color);
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
padding: 0.75rem 1rem;
transition-duration: 120ms;
}
.notification-btn:focus {
outline: none;
}
.notification-btn:hover {
transform: scale(1.025);
}
.notification-example {
align-items: center;
display: flex;
flex-direction: column;
justify-content: start;
margin-bottom: 2rem
}
.container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: start;
margin: auto;
max-width: 300px;
padding-top: 3rem;
}
.code-container {
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 1rem;
border-radius: 3px;
margin-top: 1rem;
}
pre {
margin: 0;
}
.indent-1 {
margin-left: 1rem;
}
.instance {
color: cyan;
}
.variable {
color: greenyellow;
}
.object-prop {
color: peru;
}
@media (min-width: 640px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 668px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 924px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1180px;
}
}
</style>
</head>
<body>
<div class="container">
<section class="notification-example">
<div class="">
<button
class="notification-btn"
style="background-color: #2EDC76"
id="success-right-default"
type="button"
>
Êxito 1 ->
</button>
</div>
<div class="code-container">
<code>
<pre><span class="instance">notification</span>.<span class="variable">success</span>({</pre>
<pre class="indent-1"><span class="object-prop">message</span>: 'Notificación de éxito con tiempo y color por defecto (4 segundos)'</pre>
<pre class="indent-1"><span class="object-prop">closeBtn</span>: true</pre>
<pre>}, () => {</pre>
<pre class="indent-1">console.log('fin de: successRightDefault');</pre>
<pre>})</pre>
</code>
</div>
</section>
<section class="notification-example">
<div class="">
<button
class="notification-btn"
style="background-color: #5FAD56"
id="success-right-time-color"
type="button"
>
Éxito 2 ->
</button>
</div>
<div class="code-container">
<code>
<pre><span class="instance">notification</span>.<span class="variable">success</span>({</pre>
<pre class="indent-1"><span class="object-prop">message</span>: 'Notificación de éxito con tiempo de 2 segundos y color personalizado',</pre>
<pre class="indent-1"><span class="object-prop">duration</span>: 2000,</pre>
<pre class="indent-1"><span class="object-prop">backgroundColor:</span>: '#5FAD56',</pre>
<pre>})</pre>
</code>
</div>
</section>
<section class="notification-example">
<div>
<button
class="notification-btn"
style="background-color: #06f"
id="info-right-color"
type="button"
>
Información ->
</button>
</div>
<div class="code-container">
<code>
<pre><span class="instance">notification</span>.<span class="variable">info</span>({</pre>
<pre class="indent-1"><span class="object-prop">message</span>: 'Notificación de información con tiempo por defecto y otro color',</pre>
<pre class="indent-1"><span class="object-prop">color:</span>: '#F5EE9E',</pre>
<pre>})</pre>
</code>
</div>
</section>
<section class="notification-example">
<div>
<button
class="notification-btn"
style="background-color: #EC0B43"
id="error-left-time-color"
type="button"
>
<- Error
</button>
</div>
<div class="code-container">
<code>
<pre><span class="instance">notification</span>.<span class="variable">error</span>({</pre>
<pre class="indent-1"><span class="object-prop">backgroundColor</span>: '#D00000',</pre>
<pre class="indent-1"><span class="object-prop">message:</span>: 'Notificación de error con tiempo de 2.6 seg y otro color',</pre>
<pre class="indent-1"><span class="object-prop">duration:</span>: 2600,</pre>
<pre>})</pre>
</code>
</div>
</section>
<section class="notification-example">
<div>
<button
class="notification-btn"
style="background-color: #FFBC42"
id="warning-left-time-color"
type="button"
>
<- advertencia
</button>
</div>
<div class="code-container">
<code>
<pre><span class="instance">notification</span>.<span class="variable">warning</span>('Notificación de advertencia')</pre>
</code>
</div>
</section>
<section class="notification-example">
<div>
<button
class="notification-btn"
style="color: #FF6542;background-color:#D7D9D7"
id="info-config"
type="button"
>
<- info
</button>
</div>
<div class="code-container">
<code>
<pre><span class="instance">notification</span>.<span class="variable">info</span>({</pre>
<pre class="indent-1"><span class="object-prop">backgroundColor</span>: '#D7D9D7',</pre>
<pre class="indent-1"><span class="object-prop">closeBtn:</span>: true,</pre>
<pre class="indent-1"><span class="object-prop">color:</span>: '#FF6542',</pre>
<pre class="indent-1"><span class="object-prop">message:</span>: 'Notificación con colores personalizado',</pre>
<pre class="indent-1"><span class="object-prop">duration:</span>: 7500,</pre>
<pre>})</pre>
</code>
</div>
</section>
</div>
<script src="public/js/main.bundle.js"></script>
</body>
</html>