Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, aprenderemos sobre las alertas CSS de Primer con Dismiss.
Primer CSS Alerts with Dismiss agrega un ícono de cierre a la derecha del mensaje flash que permite a los usuarios descartar el mensaje flash
flash-color-class: estas clases se utilizan para proporcionar diferentes colores a las alertas como:
- flash-warn: Esta clase se usa para cambiar el color a amarillo.
- flash: Esta clase se usa para cambiar el color a azul.
- flash-error: Esta clase se usa para cambiar el color a rojo.
- flash-success: Esta clase se usa para cambiar el color a verde.
Sintaxis:
<div class="flash {flash-color-class}>
<button class=" flash-close js-flash-close"
type="button" aria-label="Close">
{Icon}
</button>
</div>
Ícono: para proporcionar íconos de descarte, podemos usar cualquier ícono SVG, CSS, etc.
Aprendamos más sobre esto con ejemplos.
Ejemplo 1: En este ejemplo, usaremos íconos SVG para crear alertas. Luego, estos íconos SVG se escriben debajo de la etiqueta <button>. Al hacer clic en este botón, activaremos la función para cerrar la alerta:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3> Alert With Dismiss</h3>
<div class="flash" id="f-info" style="width:50%">
Hi Geeks ! I am an Informative Alert
<button class="flash-close js-flash-close"
type="button" aria-label="Close"
onclick="closeAlert()">
<!-- <%= octicon "x" %> -->
<svg class="octicon octicon-x"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" width="16"
height="16">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8
6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555
3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703
3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948
4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715
12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264
12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555
12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782
12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882
11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125
3.57955 3.86063 3.72 3.72Z">
</path>
</svg>
</button>
</div>
<div class="flash mt-3 flash-warn" id="f-warn"
style="width:50%">
Hi Geeks ! I am an Warning Alert
<button class="flash-close js-flash-close"
type="button" aria-label="Close"
onclick="closeWarningAlert()">
<!-- <%= octicon "x" %> -->
<svg class="octicon octicon-x"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" width="16"
height="16">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887
3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496
3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382
12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537
11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264
12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168
11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117
12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72
4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z">
</path>
</svg>
</button>
</div>
<script>
function closeAlert() {
document.getElementById("f-info").style.display = "none";
}
function closeWarningAlert() {
document.getElementById("f-warn").style.display = "none";
}
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usaremos íconos CSS para descartar el cuadro de Alertas.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3> Alert With Dismiss</h3>
<div class="flash flash-success"
style="width:50%" id="f-success">
Hi Geek!! I am a Success Alert
<button class="flash-close js-flash-close"
type="button" aria-label="Close"
onclick="closeSuccessAlert()">
<i class="glyphicon glyphicon-remove"
style="color: red;"></i>
</button>
</div>
<div class="flash flash-error"
style="width:50%" id="f-error">
Hi Geek!! I am an Error Alert
<button class="flash-close js-flash-close"
type="button" aria-label="Close"
onclick="closeErrorAlert()">
<i class="glyphicon glyphicon-remove"
style="color: red;"></i>
</button>
</div>
<script>
function closeSuccessAlert() {
document.getElementById("f-success")
.style.display = "none";
}
function closeErrorAlert() {
document.getElementById("f-error")
.style.display = "none";
}
</script>
</body>
</html>
Producción:
Referencias: https://primer.style/css/components/alerts#with-dismiss
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA