Brindis básico del componente CSS de la interfaz de usuario de Onsen

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 básico 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. Las tostadas básicas tienen recuadros de esquinas redondeadas con márgenes.

Onsen UI CSS Component Clases tostadas básicas:

  • brindis: esta clase se utiliza para crear un brindis.
  • brindis__mensaje: El contenedor con esta clase contiene el mensaje.
  • brindis__botón: Esto se usa para crear un botón para el brindis.

Sintaxis: cree un brindis básico en la interfaz de usuario onsen de la siguiente manera:

<div class="toast">
    <div class="toast__message">
        Welcome to GeeksforGeeks
    </div>
    <button class="toast__button">Close</button>
</div>

Ejemplo 1: En este ejemplo, estamos creando un brindis básico 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 Basic Toast
        </strong>
    </center>
  
    <div class="toast">
        <div class="toast__message">
            Welcome to GeeksforGeeks
        </div>
        <button class="toast__button">Close</button>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 2: En este ejemplo, vamos a mostrar y ocultar el brindis básico 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 Basic Toast
        </strong>
  
        <button class="button" onclick="showToast()">
            Show Toast
        </button>
    </center>
  
    <div id="toast" class="toast">
        <div class="toast__message">
            Welcome to GeeksforGeeks
        </div>
        <button onclick="closeToast()" 
            class="toast__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 *