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.
Las Alertas son alertas o mensajes flash para informarnos sobre el estado de las acciones. Las alertas con botón de acción se utilizan para crear el mensaje flash con un botón de acción.
Primer CSS Alertas con clase de botón de acción:
- flush: Esta clase permite vaciar la información o notificar el estado de las acciones.
- flash-action: este atributo se utiliza para crear la acción activa.
- flash-warn : este atributo se utiliza para crear o notificar la acción de advertencia
- flash-error : este atributo se utiliza para crear o notificar la acción de peligro.
- flash-success : este atributo se utiliza para crear o notificar la finalización de una acción.
Sintaxis:
<div class="flash">
.....
<button type="submit" class="btn btn-sm flash-action">
....
</button>
</div>
Ejemplo 1: Este ejemplo demuestra el uso de Alertas CSS de Primer con botón de acción.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Alerts With Action Button </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Alerts With Action Button </h3> </div> <br> <div class="flash"> GeeksforGeeks Alert <button type="submit" class="btn btn-sm flash-action"> Action Button </button> </div> </body> </html>
Producción:
Primer CSS Alertas con botón de acción
Ejemplo 2: Este ejemplo demuestra el uso de Alertas CSS de Primer con botón de acción con el ícono SVG .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Alerts With Action Button </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Alerts With Action Button </h3> </div> <br> <div class="flash"> GeeksforGeeks Alert 1 <button type="submit" class="btn btn-sm flash-action"> <svg class="octicon" viewBox="0 0 16 16" width="18" height="18"> <path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"> </path> </svg> Action Button 1 </button> </div> <div class="flash mt-4 flash-success"> GeeksforGeeks Alert 2 <button type="submit" class="btn btn-sm flash-action"> <svg class="octicon" viewBox="0 0 16 16" width="18" height="18"> <path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> Action Button 2 </button> </div> </body> </html>
Producción:
Primer CSS Alerts With Action Button con el ícono SVG
Referencia: https://primer.style/css/components/alerts#with-action-button
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA