Accesorios de React Suite <Cuadrícula>

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.

Los dos accesorios disponibles de <Grid> son:

• as: Denota el tipo de elemento del componente. Es ‘div’ por defecto, pero se puede personalizar el elemento para este componente.
• fluido: Es un valor booleano. Define que el diseño cubre el 100 % del ancho del componente principal. Es cierto por defecto,

Sintaxis:

 <Grid> </Grid>

Requisito previo: Introducción e instalación de reactJS

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 Grid 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 elementos de intervalo con nombres de ‘elementos’ del 1 al 5 y agregamos algunos estilos a los elementos. En este ejemplo, examinaremos el as prop. Al accesorio del componente Grid le estamos pasando diferentes tipos de elementos como ‘h3’ y ‘button’.

import { Grid } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    border: "2px solid lightgreen",
    margin: "5px",
    padding: "1px 5px",
  };
  return (
    <div className="App">
      <h4 style={{ textAlign: "center" }}> 
        React Suite <Grid> Prop
      </h4>
      <div>
        <p style={{ textAlign: "center", 
          marginBottom: "12px" }}>
          Grid as ='div'
        </p>
  
        <Grid>
          <span style={style}> item1</span>
          <span style={style}> item2</span>
          <span style={style}> item3</span>
          <span style={style}> item4</span>
          <span style={style}> item5</span>
          <span style={style}> item6</span>
        </Grid>
        <hr />
        <p style={{ textAlign: "center", 
          marginBottom: "12px" }}>
          Grid as ='h3'
        </p>
  
        <Grid as="h3">
          <span style={style}> item1</span>
          <span style={style}> item2</span>
          <span style={style}> item3</span>
          <span style={style}> item4</span>
          <span style={style}> item5</span>
          <span style={style}> item6</span>
        </Grid>
        <hr />
        <p style={{ textAlign: "center", 
          marginBottom: "12px" }}>
          Grid as ='button'
        </p>
  
        <Grid as="button">
          <span style={style}> item1</span>
          <span style={style}> item2</span>
          <span style={style}> item3</span>
          <span style={style}> item4</span>
          <span style={style}> item5</span>
          <span style={style}> item6</span>
        </Grid>
      </div>
    </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

Producción:

 

Ejemplo 2: En este ejemplo, estamos analizando la propiedad fluida del componente Grid. En un componente de Grid, no estamos pasando el apoyo fluido y en otro, lo estamos pasando.

import { Grid } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    border: "2px solid lightgreen",
    margin: "5px",
    padding: "1px 5px",
  };
  return (
    <div className="App">
      <h4> React Suite <Grid> Prop</h4>
      <div style={{ border: "4px solid green", width: "16%" }}>
        <p style={{ textAlign: "center", marginBottom: "12px" }}>
          Without Using fluid
        </p>
  
        <Grid>
          <span style={style}> item1</span>
          <span style={style}> item2</span>
          <span style={style}> item3</span>
          <span style={style}> item4</span>
          <span style={style}> item5</span>
          <span style={style}> item6</span>
        </Grid>
        <hr />
        <p style={{ textAlign: "center", marginBottom: "12px" }}>
          Using fluid
        </p>
  
        <Grid fluid>
          <span style={style}> item1</span>
          <span style={style}> item2</span>
          <span style={style}> item3</span>
          <span style={style}> item4</span>
          <span style={style}> item5</span>
          <span style={style}> item6</span>
        </Grid>
      </div>
    </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

Producción:

 

Podemos ver que el contenido del componente Grid en la parte superior sale del borde verde, pero el contenido del segundo componente Grid está envuelto dentro de los bordes del div.

Referencia: https://rsuitejs.com/components/grid/#code-lt-grid-gt-code