Ecualizador de fregadero de cocina Foundation CSS

Posted on by Rudeus Greyrat

Foundation CSS es uno de los marcos front-end más populares. Ayuda a los desarrolladores a agregar componentes complejos a sus sitios web con mucha facilidad. Nos permite agregar varios componentes avanzados como acordeones, migas de pan, botones y muchos más al sitio web. Por lo tanto, hacer que el sitio web sea más profesional y también fácil de usar.

Kitchen Sink es una página en Foundation CSS en la que se enumeran todos los componentes principales con sus códigos. Contiene todas las plantillas básicas de cada componente con su código. En este artículo, aprenderemos sobre el componente Equalizer presente en la página Kitchen Sink de Foundation CSS. El componente Ecualizador es muy útil en sitios web modernos donde necesitamos hacer que diferentes componentes tengan la misma altura cuando se organizan en orden vertical u horizontal en el sitio web.

Atributos de datos del ecualizador CSS básico:

  • ecualizador de datos: este atributo se agrega al componente contenedor principal que contiene los elementos secundarios que se igualarán.
  • data-equalize-on: este atributo contiene el valor del tamaño de pantalla para el cual se igualarán los elementos. Puede tener valores como pequeño, grande y mediano respectivamente. Se agrega al componente padre.
  • data-equalizer-watch: este atributo se agrega a los elementos secundarios. Contiene el valor de la identificación del ecualizador principal.
  • data-equalize-by-row: Este atributo es muy útil para distribuir elementos en filas.
  • data-equalize-on-stack: este atributo permite la ecualización de la altura de los elementos cuando se apilan en una fila.

Nota: El componente Ecualizador no requiere ninguna clase específica.

Sintaxis:

<div class="grid-x grid-margin-x"
     data-equalizer="equalize1"
     data-equalize-on="medium">
    <div class="cell medium-3">
        <div data-equalizer-watch="equalize1">
            ...
        </div>
    </div>
    ...
</div>

Ejemplo 1: En este ejemplo, tenemos 4 columnas de imágenes y textos de diferentes tamaños y queremos que tengan la misma altura cuando se colocan horizontalmente en el sitio web.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink Equalizer</title>
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
</head>
  
<body>
    <h1>Foundation CSS Equalizer</h1>
    <h2 style="color: green;">GeeksForGeeks</h2>
    <div class="grid-x grid-margin-x"
         data-equalizer 
         data-equalize-on="medium"
         id="test-eq">
        <div class="cell medium-3">
            <div class="callout"
                 data-equalizer-watch>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220305173028/starts-300x218.png">
            </div>
        </div>
        <div class="cell medium-3">
            <div class="callout"
                 data-equalizer-watch>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220305173028/starts-300x218.png">
            </div>
        </div>
        <div class="cell medium-3">
            <div class="callout"
                 data-equalizer-watch>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220302090848/star5.png">
                <p>This article in on the Equalizer
                   Component of Foundation CSS. It 
                   is published in GeeksforGeeks
                   Platform.</p>
  
            </div>
        </div>
        <div class="cell medium-3">
            <div class="callout" data-equalizer-watch>
                <p>This article in on the Equalizer
                   Component of Foundation CSS. It is
                   published in GeeksforGeeks
                   Platform.</p>
  
            </div>
        </div>
    </div>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js">
    </script>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Foundation CSS Kitchen Sink Equalizer

Ejemplo 2: en este ejemplo, tenemos 2 filas en las que la primera columna tiene 3 filas y la segunda columna tiene 4 filas respectivamente y las hemos apilado en la misma altura usando los atributos del ecualizador del fregadero de la cocina.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink Equalizer</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
</head>
  
<body>
    <h1>Foundation CSS Equalizer</h1>
    <h2 style="color: green;">GeeksForGeeks</h2>
    <div class="grid-container">
        <div class="grid-x grid-margin-x" 
             data-equalize-on="medium" 
             data-equalizer="eq1">
            <div class="cell medium-4">
                <div class="callout"
                     data-equalizer-watch="eq1"
                     data-equalizer="eq1.1" 
                     data-equalize-on-stack="true">
                    <h3>First Column</h3>
                    <div class="callout"
                         data-equalizer-watch="eq1.1">
                        <p>This article in on the Equalizer Component 
                            of Foundation CSS. It is published in
                            GeeksforGeeks Platform.This article in
                            on the Equalizer Component of Foundation CSS.
                            It is published in GeeksforGeeks Platform
                        </p>
  
                    </div>
                    <div class="callout" data-equalizer-watch="eq1.1">
                        <p>This article in on the Equalizer Component of
                           Foundation CSS. It is published in GeeksforGeeks 
                           Platform
                        </p>
  
                    </div>
                </div>
            </div>
            <div class="cell medium-4">
                <div class="callout"
                     data-equalizer-watch="eq1"
                     data-equalizer="eq1.2" 
                     data-equalize-on-stack="true">
                    <h3>Second Column</h3>
                    <div class="callout"
                         data-equalizer-watch="eq1.2">
                        <p>This article in on the Equalizer Component
                           of Foundation CSS. It is published in
                           GeeksforGeeks Platform.This article in on 
                           the Equalizer Component of Foundation CSS.
                           It is published in GeeksforGeeks Platform
                        </p>
  
                    </div>
                    <div class="callout" data-equalizer-watch="eq1.2">
                        <p>This article in on the Equalizer Component of
                           Foundation CSS. It is published in
                           GeeksforGeeks Platform
                        </p>
  
                    </div>
                    <div class="callout" data-equalizer-watch="eq1.2">
                        <p>This article in on the Equalizer Component
                           of Foundation CSS. It is published in
                           GeeksforGeeks Platform
                        </p>
  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js">
    </script>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Foundation CSS Kitchen Sink Equalizer

Ecualizador de fregadero de cocina Foundation CSS

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

Publicación traducida automáticamente

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