Los diálogos en Materialise CSS brindan a los usuarios información adicional si la necesitan. Estos no son visibles directamente en la página web. Las transiciones de diálogo están relacionadas con la información que se requiere en ese momento. Materialise proporciona varios métodos para mostrar cuadros de diálogo.
Sintaxis:
Materialize.toast(string, time, styleClass,callback);
Parámetros:
- string: es la string que debe mostrarse en el cuadro de diálogo.
- hora: es la hora en que se mostraría la string de mensaje.
- clase de estilo: Esto es para agregar varios estilos.
- devolución de llamada: esta devolución de llamada es un método que se llamará una vez que se descargue el brindis.
Archivos vinculados: incluya materialise y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS y JavaScript.
<enlace rel = «hoja de estilo» href = «https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css»>
<script type = «text/javascript» src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>
<script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3 /js/materializar.min.js”></script>
Ejemplo: El siguiente ejemplo muestra la implementación de diálogos en Materialise CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
function Toast1(string, timeLength) {
Materialize.toast(
'<em>' + string + '</em>', timeLength
);
}
function Toast2(string, timeLength) {
Materialize.toast(
'<b>' + string + '</b>', timeLength, 'rounded'
);
}
function Toast3(string, timeLength) {
Materialize.toast(
'<u>' + string + '<u>', timeLength
);
}
</script>
</head>
<body>
<body class="container">
<h4>Toasts</h4>
<a class="btn" onclick=
"Toast1('Emphasized Alert!', 1500)">
Emphasized Alert!!
</a><br><br>
<a class="btn" onclick=
"Toast2('Bold N rounded Alert!', 1500)">
Bold N rounded Alert!!
</a><br><br>
<a class="btn" onclick=
"Toast3('Underlined Alert!', 1500)">
Underlined Alert!!
</a><br><br>
</body>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA