Diseño de React Suite FlexboxGrid

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente React Suite FlexboxGrid permite al usuario utilizar 24 cuadrículas, ya que es un componente de diseño de cuadrícula.

El apoyo de justificación define la disposición horizontal del componente FlexboxGrid. Puede configurarse como «centro», «inicio», «final», «espacio alrededor» o «espacio intermedio».

Sintaxis:

<FlexboxGrid justify=""></FlexboxGrid>

Requisito previo:

• Introducción e instalación reactJS
• Componente React Suite FlexboxGrid

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 instálelo 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 FlexboxGrid de rsuite y, para aplicar los estilos predeterminados de los componentes, estamos importando «rsuite/dist/rsuite.min.css». Dentro del componente FlexboxGrid, estamos agregando el componente FlexboxGrid.Item con algunos números y agregando algunos estilos que hemos definido en el estilo. Al Componente FlexboxGrid, le hemos mencionado la justificación de prop a “inicio”, “centro” y “final”, que muestra los resultados respectivos.

import { FlexboxGrid } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    width: 30,
    display: "block",
    border: "2px solid green",
    textAlign: "center",
  };
  return (
    <div className="App">
      <h4> React Suite FlexboxGrid Layout </h4>
      <p style={{ textAlign: "center" }}>justify="start"</p>
  
      <FlexboxGrid justify="start">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
      <hr />
      <p style={{ textAlign: "center" }}>justify="end"</p>
  
      <FlexboxGrid justify="end">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
      <hr />
      <p style={{ textAlign: "center" }}>justify="center"</p>
  
      <FlexboxGrid justify="center">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
    </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 configurando el accesorio de justificación en «espacio entre» y «espacio alrededor».

import { FlexboxGrid } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    width: 30,
    display: "block",
    border: "2px solid green",
    textAlign: "center",
  };
  return (
    <div className="App">
      <h4> React Suite FlexboxGrid Layout </h4>
      <p style={{ textAlign: "center" }}>justify="space-around"</p>
  
      <FlexboxGrid justify="space-around">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
      <hr />
      <p style={{ textAlign: "center" }}>justify= space-between</p>
  
      <FlexboxGrid justify="space-between">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
    </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:

 

Referencia:- https://rsuitejs.com/components/flexbox-grid/#layout