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 un componente Contador que se usa para adjuntar el conteo a los elementos o botones de navegación. Generalmente, el contador tiene tres formas, es decir , contador, contador primario y contador secundario. Tenga en cuenta que la visibilidad del contador se oculta cuando está vacío.
Contadores básicos de CSS:
- Contador: esta clase se utiliza para definir un componente de contador en las etiquetas.
- Counter–primary: esta clase se utiliza para definir el componente de contador que tiene un color de fondo más fuerte.
- Contrasecundario: esta clase se utiliza para definir el componente de contador que tiene un color de texto más sutil.
Sintaxis:
<span class="Counter mr-1 Counter--primary">
...
</span>
Ejemplo 1: El siguiente ejemplo demuestra el uso de contadores Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Counters 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 Counters Labels </h3> <span class="Counter mr-1 mt-3"> 77 </span> <span class="Counter mr-1 mt-3 Counter--primary"> 88 </span> <span class="Counter mr-1 mt-3 Counter--secondary"> 66 </span> </center> </body> </html>
Producción:
Contadores básicos de CSS
Ejemplo 2: El siguiente ejemplo demuestra el uso de Primer CSS Counters en pestañas.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Counters Labels </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body style="width: 650px"> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Counters Labels </h3> <div class="tabnav"> <nav class="tabnav-tabs" aria-label="Foo bar"> <a href="#" class="tabnav-tab" aria-current="page"> Tutorials <span class="Counter">12</span> </a> <a href="#" class="tabnav-tab">Jobs</a> </nav> </div> </center> </body> </html>
Producción:
Contadores básicos de CSS
Referencia: https://primer.style/css/components/labels#counters
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