Empujar y tirar de la cuadrícula de React Suite

Una suite de React es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre React Suite Grid Push and Pull. El empujar y tirar de la cuadrícula se utilizan para cambiar el orden de las columnas de la cuadrícula hacia la izquierda o hacia la derecha para dispositivos de pantalla grande.

Accesorios de cuadrícula:

• as : se utiliza para agregar un tipo de elemento personalizado para este componente.
• fluido : se utiliza para el diseño fluido.

Accesorios de fila:

• as : se utiliza para agregar un tipo de elemento personalizado para este componente.
• gutter : Denota el espaciado de las rejillas.

Accesorios de columna:

• as: se utiliza para agregar un tipo de elemento personalizado para este componente.
• xxl : se utiliza para indicar el número de columnas que desea abarcar para dispositivos de escritorio de gran tamaño con un tamaño de pantalla ≥ 1400 píxeles.
• xxlHidden : se utiliza para ocultar las columnas en los escritorios de dispositivos grandes.
• xxlOffset : se utiliza para mover columnas a la derecha para dispositivos medianos de escritorio.
• xxlPull : se utiliza para cambiar el orden de las columnas de la cuadrícula a la izquierda para los escritorios de dispositivos grandes.
• xxlPush : se utiliza para cambiar el orden de las columnas de la cuadrícula a la derecha para los escritorios de dispositivos grandes.
• xl : se utiliza para indicar el número de columnas que desea abarcar para dispositivos de escritorio de gran tamaño con un tamaño de pantalla ≥ 1200 píxeles.
• xlHidden : se utiliza para ocultar las columnas en los escritorios de dispositivos grandes.
• xlOffset : se utiliza para mover columnas a la derecha para dispositivos medianos de escritorio.
• xlPull : se utiliza para cambiar el orden de las columnas de la cuadrícula a la izquierda para los escritorios de dispositivos grandes.
• xlPush : se utiliza para cambiar el orden de las columnas de la cuadrícula a la derecha para los escritorios de dispositivos grandes.
• lg : se utiliza para indicar el número de columnas que desea abarcar para dispositivos de escritorio de gran tamaño con un tamaño de pantalla ≥ 992 píxeles.
• lgHidden : se utiliza para ocultar las columnas en los escritorios de dispositivos grandes.
• lgOffset : se utiliza para mover columnas a la derecha para dispositivos medianos de escritorio.
• lgPull : se utiliza para cambiar el orden de las columnas de la cuadrícula a la izquierda para los escritorios de dispositivos grandes.
• lgPush : se utiliza para cambiar el orden de las columnas de la cuadrícula a la derecha para los escritorios de dispositivos grandes.
• md : se utiliza para indicar el número de columnas que desea abarcar para dispositivos medianos de escritorio con un tamaño de pantalla ≥ 768 píxeles.
• mdHidden : se utiliza para ocultar las columnas en los escritorios de dispositivos medianos.
• mdOffset : se utiliza para mover columnas a la derecha para dispositivos medianos de escritorio.
• mdPull : se utiliza para cambiar el orden de las columnas de la cuadrícula a la izquierda para los dispositivos medianos de escritorio.
• mdPush : se utiliza para cambiar el orden de las columnas de la cuadrícula a la derecha para los escritorios de dispositivos medianos.
• sm : se utiliza para indicar el número de columnas que desea abarcar para dispositivos pequeños Tabletas con un tamaño de pantalla ≥ 576 píxeles.
• smHidden : se utiliza para ocultar la columna en tabletas de dispositivos pequeños.
• smOffset : se utiliza para mover columnas a la derecha para tabletas de dispositivos pequeños.
• smPull : se utiliza para cambiar el orden de las columnas de la cuadrícula a la izquierda para las tabletas de dispositivos pequeños.
• smPush : se utiliza para cambiar el orden de las columnas de la cuadrícula a la derecha para tabletas de dispositivos pequeños.
• xs : se utiliza para indicar el número de columnas que desea abarcar para dispositivos extrapequeños Teléfonos con un tamaño de pantalla <576 píxeles.
• xsHidden : se utiliza para ocultar la columna en los teléfonos de dispositivos extra pequeños.
• xsOffset : se utiliza para mover las columnas a la derecha para teléfonos de dispositivos extra pequeños.
• xsPull : se utiliza para cambiar el orden de las columnas de la cuadrícula a la izquierda para los teléfonos de dispositivos extrapequeños.
• xsPush : se utiliza para cambiar el orden de las columnas de la cuadrícula a la derecha para dispositivos extrapequeños Teléfonos

Sintaxis:

<Grid>
    <Row className="show-grid">
      <Col xs={12} xsPush={12}>
          ...
      </Col>
      <Col xs={12} xsPull={12}>
          ...
      </Col>
    </Row>
</Grid>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2 : después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Ejemplo 1: El siguiente ejemplo demuestra la cuadrícula básica con empujar y tirar.

import "rsuite/dist/rsuite.min.css";
import { Grid, Row, Col } from "rsuite/";
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Grid Push and Pull</h4>
  
                <div style={{ margin: 20, }}>
                    <Grid fluid>
                        <Row className="show-grid">
                            <Col xs={10} xsPush={10} 
                                style={{ backgroundColor: 'lightgreen' }}>
                                xs=10 and xsPush=10 `Left`
                            </Col>
                            <Col xs={10} xsPull={10} 
                                style={{ backgroundColor: 'lightblue' }}>
                                xs=10 and xsPull=10 `Right`
                            </Col>
                        </Row>
                    </Grid>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: el siguiente ejemplo demuestra la cuadrícula receptiva con empujar y tirar.

import "rsuite/dist/rsuite.min.css";
import { Grid, Row, Col } from "rsuite/";
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Grid Push and Pull</h4>
  
                <div style={{ margin: 20, }}>
                    <Grid fluid>
                        <Row className="show-grid">
                            <Col xs={6} sm={12} xsPush={12} 
                                style={{ backgroundColor: 'orange' }}>
                                Responsive xs=6 sm=12 and xsPush=12 `Left`
                            </Col>
                            <Col sm={6} md={12} xsPull={12} 
                                style={{ backgroundColor: 'red', color: 'white' }}>
                                Responsive sm=6 md=12 and xsPull=12 `Right`
                            </Col>
                        </Row>
                    </Grid>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/grid/#push-and-pull