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.
Primer CSS ofrece etiquetas de problemas que se utilizan para agregar etiquetas para requests de extracción o cualquier problema. Las etiquetas de problemas también admiten emojis. En este artículo, discutiremos las etiquetas de problemas junto con ejemplos.
Primer CSS Clases de etiquetas de problemas:
- IssueLabel: esta clase se utiliza para crear una etiqueta de problema.
- IssueLabel–big: esta clase se usa para crear una etiqueta de problema que tiene algo de relleno adicional.
Sintaxis:
<span class="IssueLabel color-bg-success-emphasis
color-fg-on-emphasis mr-1">
...
</span>
Ejemplo 1: a continuación se muestra el código que demuestra el uso de las etiquetas Primer CSS Issue.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Issue Labels </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet"/> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Issue Labels </h3> <span class="IssueLabel color-bg-success-emphasis color-fg-on-emphasis mr-1 mt-3"> GeeksforGeeks <svg width="16" height="16" fill="currentColor" class="bi bi-laptop" viewBox="0 0 16 16"> <path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"/> </svg> </span> <span class="IssueLabel color-bg-danger-emphasis color-fg-on-emphasis mr-1 mt-3"> Computer Science portal. </span> </center> </body> </html>
Producción:
Etiquetas de emisión de CSS de Primer
Ejemplo 2: a continuación hay otro código que demuestra el uso de las etiquetas de emisión de Primer CSS usando la clase IssueLabel–big .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Issue Labels </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet"/> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Issue Labels </h3> <span class="IssueLabel IssueLabel--big color-bg-danger-emphasis color-fg-on-emphasis mr-1"> GeeksforGeeks <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-laptop" viewBox="0 0 16 16"> <path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"/> </svg> </span> <span class="IssueLabel IssueLabel--big color-bg-success-emphasis color-fg-on-emphasis mr-1"> Computer Science portal. </span> </center> </body> </html>
Producción:
Etiquetas de emisión de CSS de Primer
Referencia: https://primer.style/css/components/labels#issue-labels
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA