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 varios elementos de etiquetas de Primer CSS. Primer CSS ofrece etiquetas que proporcionan algunos metadatos al usuario o indican el estado de un elemento. Hay 3 tipos de etiquetas, Etiquetas para indicar metadatos, Estados para mostrar el estado y Contadores para indicar el recuento de una cantidad de elementos.
Elementos básicos de las etiquetas CSS:
- Etiquetas : esta clase se utiliza para definir una etiqueta base.
- Etiquetas de problemas : esta clase se usa para crear una etiqueta de problema que se usa para agregar etiquetas para requests de extracción o cualquier problema.
- Estados : esta clase se utiliza para definir una etiqueta de estado que informa al usuario sobre el estado de un elemento.
- Contadores : esta clase se utiliza para definir un componente de contador en las etiquetas que se utilizan para adjuntar el recuento a los elementos o botones de navegación.
- Diffstat: esta clase se usa para crear un elemento de tipos de diffstat que se puede usar para mostrar el número total de conteos de adición o eliminación que contiene una diferencia en particular.
Nota: Consulte los enlaces de los elementos de etiquetas Primer CSS mencionados anteriormente para conocer el tipo respectivo de elemento de etiqueta seguido de los códigos para una mejor comprensión. A continuación se proporcionan algunos programas de ejemplo.
Sintaxis:
<span class="<label-element-classes> ..."> .... </span>
Ejemplo 1: el siguiente código demuestra las etiquetas de problema y las etiquetas de diffstat.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width= device-width, initial-scale = 1">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">
</head>
<style>
body{
background-color:lightgrey;
text-align:center;
}
span{
background-color:lightblue;
}
</style>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Primer CSS Issue Label</h3>
<span class="IssueLabel color-bg-accent-emphasis
color-fg-on-emphasis mr-2">
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-2">
Practice and Remarks
</span><br><br>
<h3>Primer CSS Diffstat</h3>
<span class="diffstat tooltipped tooltipped-w"
aria-label="10 changes: 7 additions, 3 deletions">10
<span class="diffstat-block-added"></span>
<span class="diffstat-block-deleted"></span>
<span class="diffstat-block-neutral"></span>
</span>
</body>
</html>
Producción:
Ejemplo 2: el código siguiente muestra las etiquetas de contador y estado.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width= device-width, initial-scale = 1">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">
</head>
<style>
body{
background-color:lightgrey;
text-align:center;
}
span{
background-color:lightblue;
}
</style>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3> Primer CSS Counters Labels </h3>
<span class="Counter mr-1 mt-3 Counter--primary">
99
</span>
<a href="#" class="tabnav-tab" aria-current="page">
Tutorials
<span class="Counter">
66
</span>
</a>
<br><br>
<h3>Primer CSS States</h3>
<span class="State State--draft mr-2 mt-3">
Default State
</span>
<span class="State State--open mr-2 mt-3">
Open State
</span>
<span class="State State--merged mr-2 mt-3">
Merged State
</span>
<span class="State State--closed mr-2 mt-3">
Close State
</span>
</body>
</html>
Producción:
Referencia: https://primer.style/css/components/labels
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA