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 sobre Primer CSS Diffstat junto con ejemplos.
El Diffstat se puede usar para mostrar el número total de conteos de adición o eliminación que contiene una diferencia en particular. Tiene filas de 5 bloques que tienen un color como rojo para eliminar y verde para agregar.
Primer CSS Diffstat Clase:
- diffstat: esta clase se utiliza para crear un elemento de tipo diffstat.
- diffstat-block-added: esta clase se usa para crear un cuadro de color verde para indicar la adición de cualquier línea.
- diffstat-block-deleted: esta clase se utiliza para crear un cuadro de color rojo para indicar la eliminación de cualquier línea.
- diffstat-block-neutral: esta clase se usa para crear un cuadro de color blanco para indicar que la línea no tiene cambios.
Sintaxis:
<div class="diffstat tooltipped tooltipped-s"
aria-label="some changes made">
.......
<span class="diffstat-block-added></span>
</div>
Ejemplo 1: Este
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Diffstat </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Diffstat </h3> <span class="diffstat tooltipped tooltipped-w" aria-label="11 changes: 8 additions & 3 deletions">11 <span class="diffstat-block-added"></span> <span class="diffstat-block-deleted"></span> <span class="diffstat-block-deleted"></span> <span class="diffstat-block-neutral"></span> <span class="diffstat-block-neutral"></span> </span> </center> </body> </html>
Producción:
Primer CSS Diffstat
Ejemplo 2: El siguiente ejemplo ilustra el uso de Primer CSS diffstat usando utilidades de color.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Diffstat </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Diffstat </h3> <div class="diffstat"> <span class="color-fg-success">8</span> <span class="color-fg-danger">−3</span> <span class="tooltipped tooltipped-s " aria-label="11 lines altered"> <span class="diffstat-block-added"></span> <span class="diffstat-block-added"></span> <span class="diffstat-block-deleted"></span> <span class="diffstat-block-deleted"></span> <span class="diffstat-block-neutral"></span> </span> </div> </center> </body> </html>
Producción:
Primer CSS Diffstat
Referencia: https://primer.style/css/components/labels#diffstat
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA