Variables modales de Bulma

Posted on by Rudeus Greyrat

Bulma es un framework CSS gratuito y de código abierto basado en Flexbox . Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.

El modal es una superposición clásica en la que se puede incluir cualquier contenido. El componente modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de la página actual una vez que se hace clic en el botón de activación. El componente ‘modal’ incluye varios otros componentes que se pueden agregar para diseñar el contenido. 

Estos componentes se enumeran a continuación:

  • modal-background: es la superposición transparente que actúa como un destino de clic para cerrar el modal.
  • modal-content: Es el contenedor con un ancho máximo de ‘640px’. Este contenedor muestra el contenido de la clase modal.
  • modal-close: es la ‘cruz’ ubicada en la esquina superior derecha que se usa para cerrar el modal. 

Variable utilizada:

Nombre Descripción Escribe Valor Valor calculado Tipo calculado
$modal-z Esta variable se utiliza para posicionar el elemento en diferentes niveles. cuerda 40    
$modal-fondo-color-de-fondo Esta variable se utiliza para definir el color de fondo del modal. compuesto bulmaRgba($scheme-invert, 0.86)    
$modal-contenido-ancho Esta variable se utiliza para definir el ancho del contenido. Talla 640px    
$modal-contenido-margen-móvil Esta variable se utiliza para definir el margen del contenido. Talla 20px    
$modal-contenido-espaciado-móvil Esta variable se utiliza para definir el espaciado del contenido para la variación del tamaño del móvil. Talla 160px    
$modal-content-spacing-tablet Esta variable se utiliza para definir el espaciado del contenido para la variación del tamaño de la tableta. Talla 40px    
$modal-close-dimensiones  Esta variable se utiliza para definir las dimensiones del contenido. Talla 40px    
$modal-cerrar-derecha Esta variable se utiliza para proporcionar un icono de cierre en la posición correcta. Talla 20px    
$modal-close-top Esta variable se utiliza para proporcionar un icono de cierre en la posición superior. Talla 20px    
$modal-tarjeta-espaciado Esta variable se utiliza para proporcionar espacio alrededor de la tarjeta. Talla 40px    
$modal-card-head-background-color Esta variable se utiliza para proporcionar color de fondo a la tarjeta. variable $fondo hsl(0, 0%, 96%) color
$modal-card-head-border-bottom Esta variable se utiliza para proporcionar un borde en la parte inferior de la tarjeta. Talla 1px borde $sólido    
$modal-card-head-padding  Esta variable se usa para definir el relleno alrededor de la cabeza de la tarjeta del modal. Talla 20px    
$modal-card-head-radius Esta variable se utiliza para definir el radio de la cabeza de la tarjeta del modal. variable $radio-grande 6px Talla
$modal-card-title-color Esta variable se utiliza para definir el color del título. variable $texto fuerte hsl(0, 0%, 21%) color
$modal-card-title-line-height Esta variable se utiliza para definir la altura de la línea del título. cuerda 1    
$modal-tarjeta-título-tamaño Esta variable se utiliza para definir el tamaño del título. variable $talla-4 1,5 rem Talla
$modal-tarjeta-pie-radio  Esta variable se utiliza para definir el radio del pie. variable $radio-grande 6px Talla
$modal-card-foot-border-top Esta variable se utiliza para definir el borde del pie. Talla 1px borde $sólido    
$modal-tarjeta-cuerpo-fondo-color Esta variable se utiliza para definir el color de fondo de la tarjeta. variable $esquema-principal hsl(0, 0%, 100%) color
$modal-card-body-padding Esta variable se utiliza para definir el relleno alrededor de la tarjeta. Talla 20px    
$modal-punto de interrupción Esta variable se utiliza para definir el punto de interrupción del modal. variable $tableta 769px Talla

Ejemplo 1: en el siguiente código, haremos uso de la variable anterior para modificar el modal.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">        
     <!-- font-awesome cdn -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>    
</head>
  
<body>
    <center>    
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>
          
        <div class='container'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-4'>
                    <div class='has-text-centered'>
                        <button class="button is-primary" id='btn'>
                            Login
                        </button>
                    </div>
                    <div class="modal">
                        <div class="modal-background"></div>
                        <div class="modal-content">
                            <div class="box">
                                <div>
                                    <h1 class='title has-text-centered'>
                                        Login
                                    </h1>
                                </div>
                                <form action='#' method='post'>
                                    <div class='field'>
                                        <label class='label' id='username'>
                                                Username:
                                        </label>
                                        <div class='control has-icons-left'>
                                            <input class='input' type='text' 
                                                   for='username' 
                                                   placeholder='Username'>
                                                <span class="icon is-small is-left">
                                                    <i class="fas fa-user"></i>
                                                </span>
                                        </div>
                                    </div>
                        
                                    <div class='field'>
                                        <label class='label' id='password'>
                                            Password:
                                        </label>
                                        <div class='control has-icons-left'>
                                            <input class='input' type='password'
                                                   for='password' 
                                                   placeholder='Password'>
                                            <span class="icon is-small is-left">
                                               <i class="fas fa-lock"></i>
                                            </span>
                                        </div><br>
                            
                                        <div class='buttons'>
                                            <button class='button is-link'>
                                              Login
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                       <button class="modal-close is-large" aria-label="close">
                         Modal
                      </button>
                    </div>
                </div>
            </div>
        </div>
            
        <script>
            
            //Bulma does not provide javaScript to close the model.
            const modal = document.querySelector('.modal');
            const btn = document.querySelector('#btn')
            const close = document.querySelector('.modal-close')
            
            btn.addEventListener('click', function () {
                modal.style.display = 'block'
            })
            
            close.addEventListener('click',function () {
                modal.style.display = 'none'
            })
            
            window.addEventListener('click',function (event) {
              if (event.target.className === 'modal-background') {
                modal.style.display = 'none'
              }
            })
        </script>
    </center>
</body>
</html>

Código SCSS:

$modal-background-background-color:grey;
.container {
   background-color:$modal-background-background-color;  
}

Código CSS compilado:

.container {
   background-color: grey;
}

Producción:

 

Ejemplo 2: en el siguiente código, haremos uso de la variable anterior para modificar el modal.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">        
     <!-- font-awesome cdn -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>    
</head>
  
<body>
    <center>    
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>        
        <div class='container has-text-centered'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-4'>
                    <button class="button is-primary" id='btn'>
                        Click to see modal
                    </button>
                    <div class="modal">
                        <div class="modal-content">                  
                            <div class='box'>
                                <h1 class='title' style='color:green'>
                                    Geek for Geeks
                                </h1>
                                <p class='is-family-monospace'>
                                    'GeeksforGeeks' is a computer 
                                    science portal.it was created with
                                    a goal in mind to provide well 
                                    written, well thought and
                                    well explained solutions for 
                                    selected questions. The core team
                                    of five super geeks constituting
                                    of technology lovers and
                                    computer science enthusiasts 
                                    have been constantly working
                                    in this direction .
                                </p>
  
                                <div class='buttons'>
                                    <button class='button is-fullwidth'>
                                      Know more about GfG
                                    </button>
                                </div>
                            </div> <!--end of box -->
                        </div> <!--end of modal content -->
                        <button class="modal-close is-large" aria-label="close">
                            Modal
                        </button>
                    </div> <!--end of modal -->
                </div><!--end of column is-4 -->
            </div>
        </div>
            
        <script>
            // Bulma does not have JavaScript included,
            // hence custom JavaScript has to be
            // written to open or close the modal
            const modal = document.querySelector('.modal');
            const btn = document.querySelector('#btn')
            const close = document.querySelector('.modal-close')
            
            btn.addEventListener('click', function () {
                modal.style.display = 'block'
            })
            
            close.addEventListener('click',function () {
                modal.style.display = 'none'
            })
            
            window.addEventListener('click',function (event) {
              if (event.target.className ===  'modal-background') {
                modal.style.display = 'none'
              }
            })
        </script>
    </center>
</body>
</html>

Producción:

 

Referencia: https://bulma.io/documentation/components/modal/

Publicación traducida automáticamente

Artículo escrito por bhaluram18 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 *