usos de bulma Hablar con descaro a mezclas a la CSS productos y se utilizan principalmente en el contexto del marco Bulma.
En este artículo, lo sabremos. Mezclas de control de forma de Bulma. Bulma Form Control Mixins son mixins que ayudan a los usuarios a crear botones y controles de formulario en Bulma. Son una de las partes esenciales de cualquier marco. Incluyen lo siguiente:
- .botón
- .aporte
- .elegir
- .archivo-{fl} -> {fl}={nombre, cta}
- .pagination-{pl} -> {pl}={anterior, siguiente, enlace, puntos suspensivos}
el es control() Un mixin garantiza la coherencia al proporcionar un conjunto de estilos que se comparten entre los controles de formulario definidos anteriormente.
En cuanto al uso de mixins, Bulma no ha dado ninguna clase específica, pero creamos nuestras propias clases y las diseñamos con mixins SASS.
Sintaxis:
.bulma-control-mixin {
@include control;
}Características de la mezcla de control de forma:
1. Tamaños: Los controles también son 3 tamaños más grandes de lo normal y son:
@ incluir control-pequeño;
@incluye medio de control;
@ agregar control-grande;
Sintaxis:
.bulma-control-mixin {
&.is-small {
@include control-small;
}
&.is-medium {
@include control-medium;
}
&.is-large {
@include control-large;
}
}2. Titular de un lugar de control: También hay una regulación como s Marcador de posiciónr (% control)
Sintaxis:
.bulma-control-extend {
@extend %control;
}Nota: Debe estar familiarizado con la implementación de SASS mixin para los ejemplos a continuación. mira el requisito previo dado en el enlace y luego aplicar el siguiente código.
Ejemplo 1: El siguiente ejemplo muestra las mezclas de control de Bulma Form.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <script src= </script> <link rel="stylesheet" href="css/gfgstyles.css"></head> <body class="content container has-text-centered"> <div> <p class="title is-1 has-text-success"> GeekforGeeks </p> <p class="subtitle is-3"> Bulma Form Control Mixins </p> </div> <div> <button class="bulma-control-mixin"> Button Form Control </button> </div></body> </html> |
CSS
$control-radius: 10px;$control-border-width: 1px; $control-height: 2.5em;$control-line-height: 1.5; $control-padding-vertical: calc(0.5em - #{$control-border-width});$control-padding-horizontal: calc(0.75em - #{$control-border-width}); @mixin control() { -moz-appearance: none; -webkit-appearance: none; align-items: center; border: $control-border-width solid transparent; border-radius: $control-radius; box-shadow: none; display: inline-flex; font-size: 18px; height: $control-height; justify-content: flex-start; line-height: $control-line-height; padding-bottom: $control-padding-vertical; padding-left: $control-padding-horizontal; padding-right: $control-padding-horizontal; padding-top: $control-padding-vertical; position: relative; vertical-align: top; margin: 10px;} .bulma-control-mixin { @include control; background: darkgreen; color: white;} |
Producción:
Ejemplo 2: El siguiente ejemplo muestra las mezclas de control de Bulma Form.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <script src= </script> <link rel="stylesheet" href="css/gfgstyles.css"></head> <body class="content container has-text-centered"> <div> <p class="title is-1 text-success"> GeekforGeeks </p> <p class="subtitle is-3"> Bulma Form Control Mixins </p> </div> <div> <button class="bulma-control-mixin is-small"> Form Control Small </button> <button class="bulma-control-mixin"> Form Control Normal </button> <button class="bulma-control-mixin is-medium"> Form Control Medium </button> <button class="bulma-control-mixin is-large"> Form Control Large </button> </div></body> </html> |
CSS
.text-success { color: darkgreen;} $control-radius: 10px;$control-border-width: 1px; $control-height: 2.5em;$control-line-height: 1.5; $control-padding-vertical: calc(0.5em - #{$control-border-width});$control-padding-horizontal: calc(0.75em - #{$control-border-width}); @mixin control() { -moz-appearance: none; -webkit-appearance: none; align-items: center; border: $control-border-width solid transparent; border-radius: $control-radius; box-shadow: none; display: inline-flex; font-size: 18px; height: $control-height; justify-content: flex-start; line-height: $control-line-height; padding-bottom: $control-padding-vertical; padding-left: $control-padding-horizontal; padding-right: $control-padding-horizontal; padding-top: $control-padding-vertical; position: relative; vertical-align: top; margin: 10px;} @mixin control-small() { border-radius: 7px; font-size: 14px;} @mixin control-medium() { font-size: 22px;} @mixin control-large() { font-size: 28px;} .bulma-control-mixin { @include control; background: darkgreen; color: white;} .bulma-control-mixin { &.is-small { @include control-small; } &.is-medium { @include control-medium; } &.is-large { @include control-large; }} |
Producción:
Referencia: https://bulma.io/documentation/utilities/control-mixins/