Primer CSS Visibilidad de diseño

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.

El diseño se utiliza para mostrar el contenido con un estilo particular. Por ejemplo, podemos cambiar el diseño del documento usando visualización, flotación, alineación y otras utilidades.

Primer CSS Visibility Layout se usa para ajustar la visibilidad de un elemento usando las clases .v-hidden y .v-visible.

Clases usadas:

  • .v-hidden: esta clase se usa para establecer la visibilidad oculta de un elemento.
  • .v-visible: esta clase se utiliza para establecer la visibilidad como visible de un elemento.

Sintaxis:

<div class="v-*> Content... </div>

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Layout Visibility</title>
  
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>
  
        <h3>Primer CSS Layout Visibility</h3>
  
        <h3>Visibility Hidden</h3>
        <div class="v-hidden">
            GeeksforGeeks Hidden
        </div>
  
        <h3>Visibility Visible</h3>
        <div class="v-visible">
            GeeksforGeeks Visible
        </div>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Layout Visibility</title>
  
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet" />
</head>
  
<body>
    <h1 class="color-fg-open">
        GeeksforGeeks
    </h1>
  
    <h3>Primer CSS Layout Visibility</h3>
  
    <h3>Visibility Hidden</h3>
    <div class="d-table v-hidden">
        <div class="d-table-cell color-bg-success-emphasis">
            Display Table Cell
        </div>
        <div class="d-table-cell color-bg-accent-emphasis">
            Display Table Cell
        </div>
        <div class="d-table-cell color-bg-success-emphasis">
            Display Table Cell
        </div>
    </div>
  
    <h3>Visibility Visible</h3>
    <div class="d-table v-visible">
        <div class="d-table-cell color-bg-success-emphasis">
            Display Table Cell
        </div>
        <div class="d-table-cell color-bg-accent-emphasis">
            Display Table Cell
        </div>
        <div class="d-table-cell color-bg-success-emphasis">
            Display Table Cell
        </div>
    </div>
</body>
  
</html>

Producción:

 

Referencia: https://primer.style/css/utilities/layout#visibility

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *