Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox . Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo. Otra ventaja con Bulma es que simplemente necesita tener conocimientos de HTML y CSS para implementar este marco (aunque saber JavaScript puede ayudar a las funciones existentes según sus necesidades). Bulma también nos permite agregar nuestro propio estilo CSS, pero se recomienda usar una hoja de estilo externa sobre el estilo en línea.
El elemento del panel es simplemente un contenedor para controles compactos. Podemos usar esto en muchos lugares en el diseño del proyecto. Proporciona una interfaz de usuario interactiva para el proyecto. El componente del panel incluye varios otros componentes que tenemos que agregar exclusivamente para diseñar bien nuestro contenido.
Componentes utilizados:
- encabezado del panel: es el primer elemento secundario del panel y es responsable del estilo del encabezado del panel.
- panel-tabs: Se encarga de crear las pestañas del panel.
- panel-block: Panel-block es un tipo de contenedor que puede contener otros elementos como controles de entrada, botones , íconos, formularios , etc.
Sintaxis:
$variable-name: property-value;
La tabla de variables con su tipo, valor, valor calculado y tipo calculado se enumeran a continuación:
| Nombre | Descripción | Escribe | Valor | Valor calculado | Tipo calculado |
|---|---|---|---|---|---|
| $panel-margen | Esta variable se utiliza para proporcionar espaciado. | variable | $bloque-espaciado | 1,5 rem | Talla |
| $panel-elemento-borde | Esta variable se utiliza para definir el borde alrededor de un elemento. | Talla | 1px sólido $borde-luz | ||
| $panel-radio | Esta variable se utiliza para definir el radio alrededor del elemento. | variable | $radio-grande | 6 píxeles | Talla |
| $panel-sombra | Esta variable se utiliza para definir la sombra alrededor del elemento. | variable | $sombra | 0 0.5em 1em -0.125em rgba($esquema-invertir, 0.1), 0 0px 0 1px rgba($esquema-invertir, 0.02) | sombra |
| $panel-encabezado-fondo-color | Esta variable se utiliza para definir el color de fondo del encabezado. | variable | $borde-luz | hsl(0, 0%, 93%) | color |
| $panel-heading-color | Esta variable se utiliza para definir el color de fondo del encabezado. | variable | $texto fuerte | hsl(0, 0%, 21%) | color |
| $panel-heading-line-height | Esta variable se utiliza para definir la altura de la línea. | sin unidades | 1.25 | ||
| $panel-encabezado-relleno | Esta variable se utiliza para proporcionar espacio dentro del elemento. | Talla | 0.75em 1em | ||
| $panel-heading-radius | Esta variable se utiliza para definir el radio alrededor del encabezado. | variable | $radio | 4px | Talla |
| $panel-heading-size | Esta variable se utiliza para definir el tamaño del elemento. | Talla | 1,25 em | ||
| $panel-heading-weight | Esta variable se utiliza para definir el peso del encabezado. | variable | $peso-negrita | 700 | peso de fuente |
| $panel-tabs-font-size | Esta variable se utiliza para definir el tamaño de la fuente. | Talla | 0.875em | ||
| $panel-tab-border-bottom | Esta variable se utiliza para definir el borde en la parte inferior de la pestaña. | Talla | 1px borde $sólido | ||
| $panel-tab-active-border-bottom-color | Esta variable se utiliza para definir el borde en un estado activo. | variable | $enlace-borde-activo | hsl(0, 0%, 29%) | color |
| $panel-tab-color-activo | Esta variable se utiliza para definir el color de la pestaña. | variable | $enlace-activo | hsl(0, 0%, 21%) | color |
| $panel-list-item-color | Esta variable se utiliza para definir el color del artículo. | variable | $texto | hsl(0, 0%, 29%) | color |
| $panel-list-item-hover-color | Esta variable se usa para definir el color cuando pasamos el cursor sobre el elemento. | variable | $enlace | hsl(229, 53%, 53%) | color |
| $panel-block-color | Esta variable se utiliza para definir el color del bloque. | variable | $texto fuerte | hsl(0, 0%, 21%) | color |
| $panel-block-hover-background-color | Esta variable se usa para definir el color de fondo al pasar el mouse. | variable | $fondo | hsl(0, 0%, 96%) | color |
| $panel-block-active-border-left-color | Esta variable se usa para definir el color en el lado izquierdo del borde. | variable | $enlace | hsl(229, 53%, 53%) | color |
| $panel-bloque-color-activo | Esta variable se utiliza para definir el color del bloque con un estado activo. | variable | $enlace-activo | hsl(0, 0%, 21%) | color |
| $panel-block-icono-activo-color | Esta variable se utiliza para proporcionar iconos al panel. | variable | $enlace | hsl(229, 53%, 53%) | color |
| $panel-icono-color | Esta variable se utiliza para definir el color del panel. | variable | $texto-luz | hsl(0, 0%, 48%) | color |
| $panel-colores | Esta variable se utiliza para definir el color del panel. | variable | $colores | colores bulma | mapa |
Ejemplo 1: en el siguiente código, utilizaremos las variables anteriores para demostrar el uso del panel en la página web. La variable utilizada en este caso es $panel-block-active-color.
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> <section> <div> <h1 class="title has-text-centered has-text-success"> GeeksforGeeks </h1> <h2>A computer science portal for geeks</h2> </div> </section> <br> <div class='container'> <div class="columns is-centered"> <div class="column is-5"> <nav class="panel"> <p class="panel-heading"> <span class='title is-4'>Movies</span> </p> <div class="panel-block"> <p class="control has-icons-left"> <input class="input" type="text" placeholder="Search"> <span class="icon is-left"> <i class="fas fa-search" aria-hidden="true"></i> </span> </p> </div> <p class="panel-tabs"> <a class="is-active">All</a> <a>Romentic</a> <a>Comedy</a> <a>Action</a> <a>Drama</a> </p> <a class="panel-block is-active"> M.S.Dhoni The Untold story </a> <a class="panel-block"> Rabta </a> <a class="panel-block"> Kabir Singh </a> <a class="panel-block"> URI The Surgical Strike </a> <a class="panel-block"> P.K. </a> <a class="panel-block"> Raja Babu </a> <a class="panel-block"> Kai Po Che </a> </nav> </div> </div> </div> </center> </body> </html>
Código SCSS:
$panel-block-active-color:green;
.panel-heading {
background-color:$panel-block-active-color;
}
Código CSS compilado:
.panel-heading {
background-color: green;
}
Producción:
Ejemplo 2: en el siguiente código, utilizaremos las variables anteriores para demostrar el uso del panel en la página web. La variable utilizada en este caso es $panel-list-item-color .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<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>
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<center>
<section>
<div>
<h1 class="title has-text-centered has-text-success">
GeeksforGeeks
</h1>
<h2>A computer science portal for geeks</h2>
</div>
</section>
<br>
<div class='container'>
<div class="columns is-centered">
<div class="column is-5">
<nav class="panel">
<p class="panel-heading">
<span class='title is-4'>Series</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Education</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
Aspirants
</a>
<a class="panel-block">
Gullak
</a>
<a class="panel-block">
Panchayat
</a>
<a class="panel-block">
Kota Factory
</a>
</nav>
</div>
</div>
</div>
</center>
</body>
</html>
Código SCSS:
$panel-list-item-color:hsl(0, 0%, 29%);
.panel-block{
background-color:$panel-list-item-color;
}
Código CSS compilado:
.panel-block {
background-color: #4a4a4a;
}
Producción:
Referencia: https://bulma.io/documentation/components/panel/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA