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 orientados 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, discutiremos las alertas de Primer CSS con íconos. Primer CSS Alertas con el ícono para agregar un ícono a la izquierda del mensaje flash. Da atención fresca funky.
Ejemplo 1: En este ejemplo, usaremos íconos SVG con alertas. Crearemos diferentes íconos SVG como una advertencia.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h3> Alert With Icons</h3> <div class="flash"> <!-- <%= octicon "info" %> --> <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"> </path> </svg> Hi Geek!! I am an informative Alert </div> <div class="flash flash-warn"> <!-- <%= octicon "alert" %> --> <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"> </path> </svg> Hi Geek!! I am an warning Alert </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos íconos CSS como íconos en las alertas. Mostraremos dos tipos de alertas con iconos, es decir, error y éxito
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> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Alert With Icons</h3> </div> <div class="flash flash-success"> <i class="glyphicon glyphicon-thumbs-up"></i> Hi Geek!! I am an Success Alert </div> <div class="flash flash-error"> <i class="glyphicon glyphicon-remove" style="color:red;"> </i> Hi Geek!! I am an Error Alert </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/alerts#with-icon
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA