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. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Las alertas se utilizan para transmitir un mensaje importante al usuario. Alerta al usuario relacionado con algunos elementos pendientes o nuevas funciones en la página web. Los usuarios son informados previamente a través de alertas antes de que interactúen con la página web. Hay diferentes formas de definir una alerta.
- Predeterminado : Esto se usa para definir un destello redondeado azul simple usando un destello de clase .
- Con colores : Esto se usa para dar diferentes colores al flash usando las clases flash-warn , flash-error y flash-success .
- Con icono : Esto se usa para agregar iconos a las alertas.
- Con descartar : Esto se usa para agregar un ícono de cierre a las alertas usando la clase flash-close .
- Con botón de acción : Esto se usa para agregar botones de acción a las alertas usando la clase flash-action .
- Flash de ancho completo : Esto genera una alerta sin borde de ancho completo utilizando la clase flash-full .
- Flash banner : Esto hace que la alerta se fije en la parte superior de la página usando la clase flash-banner .
Sintaxis:
<div class="flash">
...
</div>
Ejemplo 1: este ejemplo demuestra los diferentes tipos de alertas de Primer CSS utilizando la clase flash .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Alerts</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="flash flash-banner"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h4>Flash banner defined</h4> </div> <div style="margin:150px;"> <div class="flash"> Default Flash defined. </div> <div class="flash mt-3 flash-warn"> Warning Flash defined. </div> <div class="flash flash-full mt-3 flash-error"> Error Full width flash defined. </div> <div class="flash mt-3 flash-success"> Success Flash with action defined. <button type="submit" class="btn btn-sm flash-action"> Click to perform an action </button> </div> </div> </body> </html>
Producción:
Primer CSS Alertas
Ejemplo 2: este ejemplo demuestra los diferentes tipos de alertas de Primer CSS utilizando la clase flash.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Alerts</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<style>
h1{
color:green;
}
body{
background-color:lightgrey;
}
</style>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div class="flash">
Flash message with action here.
<button type="submit" class="btn btn-sm flash-action">Complete action</button>
</div>
<div class="flash mt-3 flash-warn">
Flash message with action here.
<button class="btn btn-sm flash-action" type="submit">Complete action</button>
</div>
<div class="flash mt-3 flash-error">
Flash message with action here.
<button class="btn btn-sm flash-action" type="submit">
<svg class="octicon" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" width="16" height="16">
<path fill-rule="evenodd"
d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5
0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784
0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0
10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681
1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0
01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z">
</path>
</svg>
Complete action
</button>
</div>
<div class="flash mt-3 flash-success">
<svg class="octicon" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" width="16" height="16">
<path d="M5.75 7.5a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5
0v-1.5a.75.75 0 01.75-.75zm5.25.75a.75.75 0 00-1.5
0v1.5a.75.75 0 001.5 0v-1.5z">
</path>
<path fill-rule="evenodd" d="M6.25 0a.75.75 0 000
1.5H7.5v2H3.75A2.25 2.25 0 001.5 5.75V8H.75a.75.75 0 000
1.5h.75v2.75a2.25 2.25 0 002.25 2.25h8.5a2.25 2.25 0
002.25-2.25V9.5h.75a.75.75 0 000-1.5h-.75V5.75a2.25 2.25
0 00-2.25-2.25H9V.75A.75.75 0 008.25 0h-2zM3 5.75A.75.75
0 013.75 5h8.5a.75.75 0 01.75.75v6.5a.75.75 0
01-.75.75h-8.5a.75.75 0 01-.75-.75v-6.5z">
</path>
</svg>
Flash message with action here.
<button class="btn btn-sm flash-action" type="submit">
<svg class="octicon" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" width="16" height="16">
<path fill-rule="evenodd" d="M2 2.75C2 1.784 2.784 1
3.75 1h2.5a.75.75 0 010
1.5h-2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75
0 010 1.5h-2.5A1.75 1.75 0 012 13.25V2.75zm10.44 4.5H6.75a.75.75
0 000 1.5h5.69l-1.97 1.97a.75.75 0 101.06
1.06l3.25-3.25a.75.75 0 000-1.06l-3.25-3.25a.75.75 0
10-1.06 1.06l1.97 1.97z">
</path>
</svg>
Complete action
</button>
</div>
</center>
</body>
</html>
Producción:
Primer CSS Alertas
Referencia: https://primer.style/css/components/alerts
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA