En este artículo, veremos sobre Bulma Arrow . Arrow es un mixin en Bulma que se crea con la ayuda de mixins SASS. El marco de Bulma utiliza mixins SASS para crear la salida CSS personalizada. El arrow() es un mixin que crea un ícono de flecha o figuras con la ayuda de CSS.
Prerrequisito: Preprocesador CSS SASS
Clase Bulma Arrow: No se menciona ninguna clase específica en los documentos oficiales de Bulma, sino que podemos crear nuestra propia clase y usarla para diseñar el elemento con la ayuda de SASS mixins.
Sintaxis:
<span class="arrow-mixin"></span>
.arrow-mixin {
@include arrow();
}
Nota: la salida solo se puede mostrar si sabe cómo ejecutar una mezcla SASS como un archivo CSS (porque SASS no funciona en los navegadores). Verifique antes de continuar para ver los ejemplos.
Ejemplo 1: El siguiente ejemplo ilustra el Arrow Mixin de Bulma
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container content "> <h1 class="title">Bulma Arrow</h1> <span class="arrow-mixin mt-6"></span> </div> </body> </html>
CSS
@mixin arrow() {
border: 4px solid green;
border-radius: 2px;
border-right: 0;
border-top: 0;
display: block;
height: 2em;
pointer-events: none;
position: absolute;
top: 50%;
transform: rotate(-45deg);
transform-origin: center;
width: 2em;
}
.arrow-mixin {
@include arrow();
}
Producción:
Flecha Bulma
Ejemplo 2: Otro ejemplo que ilustra Arrow Mixin
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container content "> <h1 class="title">Bulma Arrow</h1> <span class="arrow-mixin mt-6"></span> </div> </body> </html>
CSS
@mixin arrow() {
border: 6px solid blue;
border-radius: 2px;
border-right: 0;
border-top: 0;
display: block;
height: 1em;
pointer-events: none;
position: absolute;
top: 50%;
transform: rotate(135deg);
transform-origin: center;
width: 1em;
}
.arrow-mixin {
@include arrow();
}
Producción:
Flecha Bulma
Referencia: https://bulma.io/documentation/utilities/mixins/#arrow
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA