Onsen UI CSS Component Material Brindis

Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.

En este artículo, vamos a implementar el componente Toast Material del componente CSS de la interfaz de usuario de Onsen . Los brindis son componentes que se utilizan para notificar a los usuarios y tomar alguna acción inmediata sobre ellos. Toast contiene un mensaje y botones de acción. Los brindis de materiales tienen cajas de esquinas afiladas y no tienen ningún margen.

Onsen UI CSS Component Material Toast clases:

  • brindis: esta clase se utiliza para crear un brindis.
  • tostado–material: Esta clase denota el tipo de tostado de material.
  • brindis__mensaje: El contenedor con esta clase contiene el mensaje.
  • brindis–material__mensaje: esta clase indica que el contenedor que contiene el mensaje es de tipo material.
  • brindis__botón: Esto se usa para crear un botón para el brindis.
  • brindis–botón__material: esta clase indica que el botón brindis es de tipo material.

Sintaxis: Cree un brindis material en la interfaz de usuario onsen de la siguiente manera:

<div class="toast toast--material">
    <div class="toast__message toast--material__message">
        Welcome to GeeksforGeeks
    </div>
    <button class="toast__button 
        toast--material__button">Close</button>
</div>

Ejemplo 1: En este ejemplo, tenemos un brindis material con un mensaje.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsenui.css" />
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js">
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
  
    <style>
        #heading {
            color: green;
        }
  
        #title {
            font-style: bold;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 id="heading">GeeksforGeeks</h1>
        <strong id="title">
            Onsen UI CSS Component Material Toast
        </strong>
    </center>
  
    <div class="toast toast--material">
        <div class="toast__message toast--material__message">
            Welcome to GeeksforGeeks
        </div>
        <button class="toast__button 
            toast--material__button">Close</button>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 2: En este ejemplo, vamos a mostrar y ocultar el brindis usando los botones.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
        "https://unpkg.com/onsenui/css/onsenui.css" />
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js">
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
  
    <style>
        #heading {
            color: green;
        }
  
        #title {
            font-style: bold;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 id="heading">GeeksforGeeks</h1>
        <strong id="title">
            Onsen UI CSS Component Material Toast
        </strong>
  
        <button class="button" onclick="showToast()">
            Show Toast
        </button>
    </center>
  
    <div id="toast" class="toast toast--material">
        <div class="toast__message toast--material__message">
            Welcome to GeeksforGeeks
        </div>
        <button onclick="closeToast()" class=
            "toast__button toast--material__button">
            Close
        </button>
    </div>
  
    <script>
        function closeToast() {
            $('#toast').hide()
        }
        function showToast() {
            $('#toast').show()
        }
    </script>
</body>
  
</html>

Producción

 

Referencia: https://onsen.io/v2/api/css.html#toast-category

Publicación traducida automáticamente

Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *