Canalón de rejilla de React Suite

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente React Suite Grid proporciona un diseño de cuadrícula que proporciona 24 cuadrículas, ayuda en la capacidad de respuesta.

El puntal de medianera del componente Grid ayuda a indicar el espaciado de las cuadrículas. Toma un número como valor.

Sintaxis:

<Grid> 
    <Row gutter={}></Row>
</Grid>

Requisito previo: 

• Introducción e instalación reactJS
• Componente de fila de React Suite

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

Paso 1: Cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app .

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Se verá así:

 

Ejemplo 1: estamos importando el componente de cuadrícula y fila desde » rsuite «, y para aplicar los estilos predeterminados de los componentes estamos importando » rsuite/dist/rsuite.min.css «.

Dentro de la etiqueta Grid, estamos agregando el componente <Row> y dentro de él, estamos agregando elementos de intervalo con contenido de 1 a 3 y agregamos algo de estilo a los elementos. En este ejemplo, estamos pasando diferentes valores a la medianera del componente Fila.

import { Grid, Row } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const style = {
        border: "2px solid lightgreen",
        margin: "50px 5px",
        padding: "1px 5px",
    };
    const labeStyle = {
        color: "red",
        margin: "8px",
    };
  
    return (
        <div className="App">
            <h4> React Suite Grid Gutter</h4>
            <Grid>
                <p style={labeStyle}>gutter=2</p>
  
                <Row gutter={2}>
                    <span style={style}> 1</span>
                    <span style={style}> 2</span>
                    <span style={style}> 3</span>
                </Row>
  
                <p style={labeStyle}>gutter=12</p>
  
                <Row gutter={12}>
                    <span style={style}> 1</span>
                    <span style={style}> 2</span>
                    <span style={style}> 3</span>
                </Row>
  
                <p style={labeStyle}>gutter=26</p>
  
                <Row gutter={26}>
                    <span style={style}> 1</span>
                    <span style={style}> 2</span>
                    <span style={style}> 3</span>
                </Row>
                  
                <p style={labeStyle}>gutter=50</p>
  
                <Row gutter={50}>
                    <span style={style}> 1</span>
                    <span style={style}> 2</span>
                    <span style={style}> 3</span>
                </Row>
            </Grid>
        </div>
    );
}
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Vaya a http://localhost:3000/ en su navegador para ver la salida.

 

Ejemplo 2: Dentro de la etiqueta <Grid> estamos agregando el componente <Row> y al prop de medianera pasando el número de estado, el estado num se crea usando el enlace useState de reacción inicializado con 1. A los elementos de intervalo dentro de la etiqueta de fila, algunos estilos está agregado.

Se crea un menú desplegable que toma ciertos valores cada vez que se realiza un cambio en el menú desplegable y se activa una función onChange que nombra onHandleChange que establece el valor de num y, en consecuencia, el valor de los cambios de puntal de medianera.

import { useState } from "react";
import { Grid, Row } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  
    const [num, setNum] = useState(1);
    const onHandleChange = (e) => {
        setNum(e.target.value);
    };
    const style = {
        margin: "5px",
        padding: "1px 5px",
        backgroundColor: "white",
    };
    const labeStyle = {
        margin: "8px",
    };
    const divStyle = {
        height: 50,
        width: 300,
        padding: 10,
        border: "2px solid green",
        backgroundColor: "green",
    };
  
    return (
        <div className="App">
            <h4> React Suite Grid Gutter</h4>
            <select
                name="gutter"
                id="gutter"
                style={{ marginLeft: 20 }}
                onChange={onHandleChange}
            >
                <option value="1">1</option>
                <option value="6">6</option>
                <option value="20">20</option>
            </select>
  
            <Grid>
                <p style={labeStyle}>
                    gutter=<b style={{ color: "red" }}>
                                {"" + num}
                            </b>
                </p>
  
                <div style={divStyle}>
                    <Row gutter={num}>
                        <span style={style}> 
                            1
                        </span>
                        <span style={style}> 
                            2
                        </span>
                        <span style={style}> 
                            3
                        </span>
                    </Row>
                </div>
            </Grid>
        </div>
    );
}
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/grid/#gutter