Componente React Suite FlexboxGrid

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente FlexboxGrid permite al usuario utilizar 24 cuadrículas, ya que es un componente de diseño de cuadrícula que se implementa a través de CSS Flexbox. Podemos usar el siguiente enfoque en ReactJS para usar el componente React Suite FlexboxGrid.

Accesorios FlexboxGrid:

• align: Se utiliza para la alineación.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• Justificar: Se utiliza para la disposición horizontal.

Accesorios FlexboxGrid.Item:

• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• colspan: se utiliza para indicar el espacio entre cuadrículas.
• orden: se utiliza para indicar los órdenes de cuadrícula para la clasificación.
• componentClass: se puede utilizar para el elemento personalizado de este componente.

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

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

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

Aplicación.js

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { FlexboxGrid } from 'rsuite'

export default function App() {

  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React Suite FlexboxGrid Component</h4>
      <FlexboxGrid>
        <FlexboxGrid.Item style={{ backgroundColor: 'red' }} 
                          colspan={1}>
          colspan={1}</FlexboxGrid.Item>
        <FlexboxGrid.Item style={{ backgroundColor: 'yellow' }} 
                          colspan={2}>
          colspan={2}</FlexboxGrid.Item>
        <FlexboxGrid.Item style={{ backgroundColor: 'green' }} 
                          colspan={3}>
          colspan={3}</FlexboxGrid.Item>
        <FlexboxGrid.Item style={{ backgroundColor: 'lightblue' }}
                          colspan={4}>
          colspan={4}</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}