Clases de visibilidad de fregaderos de cocina Foundation CSS

Posted on by Rudeus Greyrat

Fundación CSSes un marco de front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que hace que sea muy fácil diseñar hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.

The Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. La clase de visibilidad es una base integrada de clase que puede agregar directamente a su código HTML que le permitirá controlar qué componentes se muestran en la página según el tamaño de la pantalla o la orientación del dispositivo. Las clases de visibilidad usan ‘ !important ‘ para asegurarse de que no sean anuladas por selectores más específicos. Para usar la clase de visibilidad del fregadero de la cocina, simplemente agregue la clase de visibilidad al elemento que debe mostrarse condicionalmente.

Clases de visibilidad de fregaderos de cocina Foundation CSS:

  • show-for-*: esta clase se utiliza para mostrar los elementos, según el tamaño de la pantalla, es decir, para dispositivos de pantalla pequeña, mediana y grande.
  • hide-for-*: esta clase se utiliza para ocultar los elementos de la representación, en función del tamaño de la pantalla, es decir, para dispositivos de tamaño de pantalla pequeño, mediano y grande.
  • show-for-landscape: esta clase se usa para mostrar el elemento si la orientación del dispositivo es horizontal.
  • show-for-retrato: Esta clase se usa para mostrar el elemento si la orientación del dispositivo es vertical.
  • hide-for-landscape: esta clase se usa para ocultar el elemento si la orientación del dispositivo es horizontal.
  • ocultar-para-retrato: esta clase se utiliza para ocultar el elemento si la orientación del dispositivo es vertical.
  • show-for-sr: permite que los elementos permanezcan legibles/visibles solo para los lectores de pantalla.
  • invisible : esta clase se puede usar para hacer que el contenido sea invisible mientras se procesa el contenido.
  • aria-hidden: Hace que los elementos permanezcan invisibles/ocultos de los Lectores de Pantalla.
  • show-on-focus: esta clase se usa para ocultar el contenido y el atributo tabindex = «0» para hacer que un elemento sea enfocable.

Sintaxis :

<p class="Visibility Class Name"> Content </p>

Nota:

  • No hay una clase específica para la clase .hide-for-small , porque simplemente ocultaría el elemento de forma permanente. Para eso, puede usar la clase .hide simple y antigua en su lugar.
  • Estas clases ocultan automáticamente el elemento en tamaños de pantalla por debajo de lo especificado en la clase. Por ejemplo, si la clase dada es .show-for-medium, entonces el elemento será visible en dispositivos con un tamaño de pantalla mediano o más grande y permanecerá oculto para un tamaño de pantalla pequeño. Sin embargo, si el usuario desea mostrar el elemento solo para un tamaño de pantalla específico, puede agregar -solo al final del nombre de la clase. (Por ejemplo: .show-for-medium-only )

Ejemplo : este ejemplo describe la clase de visibilidad del fregadero de la cocina en Foundation CSS. Cuando se aumenta el tamaño de la pestaña, es decir, el tamaño cambia de pequeño a mediano, los mensajes respectivos serán visibles, dependiendo del tamaño de la pantalla.

HTML

<!DOCTYPE html>
<html>
 
<head>
     
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
</head>
 
<body style="padding-top: 2rem;">
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>Foundation CSS Kitchen Sink Visibility Classes</h3>
        <p class="show-for-small">
            This line appears on small or larger screen
        </p>
 
 
        <p class="show-for-medium">
            This line appears on medium screen or larger.
        </p>
 
 
    </center>
</body>
</html>

Producción:

Fregadero de cocina Clase de visibilidad Tamaño de pantalla 

Ejemplo : este ejemplo describe la clase de visibilidad del fregadero de la cocina en Foundation CSS. Cuando la orientación de la pestaña se cambia de Potrait a Landscape, se muestran los mensajes respectivos.

HTML

<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
 
<head>
     
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
</head>
 
<body style="padding-top: 2rem;">
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>Foundation CSS Kitchen Sink Visibility Classes</h3>
        <p class="show-for-landscape">
            You are in landscape orientation.
        </p>
 
 
        <p class="show-for-portrait">
            You are in portrait orientation.
        </p>
 
    </center>
</body>
</html>

Salida :

Orientación de la clase de visibilidad del fregadero de la cocina

Ejemplo : el ejemplo ilustra el Show para lectores de pantalla en Foundation CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
     
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
     
      <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
 
<body style="padding-top: 2rem;">
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>Foundation CSS Kitchen Sink Visibility Classes</h3>
        <p class="show-for-sr">
            This text can only be read by a screen reader.
        </p>
 
 
         
<p>
            There's a line of text above this one,
            you just can't see it.
        </p>
 
    </center>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Salida :

Clase de visibilidad del fregadero de la cocina Accesibilidad

Referencia : https://get.foundation/sites/docs/kitchen-sink.html#visibility-classes

Publicación traducida automáticamente

Artículo escrito por vividhpandey13 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 *