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 FlexboxGrid Responsive se puede crear combinándolo con el componente <Col>.
Nota: estamos pasando Col como valor de accesorios de FlexboxGrid.Item para que derive los caracteres del componente Col que toma estos accesorios xxl, xl, lg, md, sm y xs.
Para la capacidad de respuesta, pasamos los siguientes accesorios:
- xxl: Toma como valor un número. El número de columnas que uno desea ocupar para los escritorios de dispositivos extragrandes (≥ 1400 px).
- xl: Toma como valor un número. El número de columnas que uno desea ocupar para los escritorios de dispositivos extragrandes (≥ 1200 px).
- lg: Toma un número como valor. El número de columnas que uno desea ocupar para los escritorios de dispositivos grandes (≥ 992 px).
- md: Toma como valor un número. El número de columnas que uno desea ocupar para dispositivos de escritorio medianos (≥ 768 px).
- sm: Toma como valor un número. El número de columnas que uno desea ocupar para tabletas de dispositivos pequeños (≥ 576 px).
- xs: Toma como valor un número. El número de columnas que uno desea ocupar para dispositivos Extra pequeños Teléfonos (< 576px)
Sintaxis:
<FlexboxGrid>
<FlexboxGrid.Item as={Col} xs={ } sm={ } md={ }
lg={ } xl={ } xxl={ } > </FlexboxGrid.Item>
</FlexboxGrid>
Requisito previo:
- Introducción e instalación reactJS
- React Suite FlexboxGrid
- React Suite FlexboxGrid.Item
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 los componentes FlexboxGrid y Col de «rsuite», y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css».
Estamos agregando los componentes FlexboxGrid, dentro de él, estamos agregando <FlexboxGrid.Item> con te como accesorio como componente Col y estamos pasando diferentes valores a xs, sm y md.
App.js
import { FlexboxGrid, Col } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
const style = {
border: "2px solid green",
textAlign: "center",
};
return (
<div className="App">
<h4>React Suite FlexboxGrid Responsive</h4>
<FlexboxGrid>
<FlexboxGrid.Item as={Col} xs={8}
sm={12} md={8} style={style}>
1
</FlexboxGrid.Item>
<FlexboxGrid.Item as={Col} xs={8}
sm={12} md={8} style={style}>
2
</FlexboxGrid.Item>
<FlexboxGrid.Item as={Col} xs={8}
sm={12} md={8} style={style}>
3
</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: estamos importando los componentes FlexboxGrid y Col desde «rsuite», y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css».
Estamos agregando dos componentes FlexboxGrid. Dentro de él, estamos agregando <FlexboxGrid.Item> con como prop igual a Col Component y estamos pasando diferentes valores a xs, sm, md y lg.
App.js
import { FlexboxGrid, Col } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
return (
<div className="App">
<h4>React Suite FlexboxGrid Responsive</h4>
<h5 style={{ textAlign: "center" }}>Row -1</h5>
<FlexboxGrid>
<FlexboxGrid.Item
xs={24}
sm={12}
md={3}
lg={12}
style={{ backgroundColor: "#A0F962" }}
as={Col}
>
1
</FlexboxGrid.Item>
<FlexboxGrid.Item
xs={24}
sm={12}
md={3}
lg={4}
style={{ backgroundColor: "#D97BFC" }}
as={Col}
>
2
</FlexboxGrid.Item>
<FlexboxGrid.Item
xs={24}
sm={12}
md={3}
lg={4}
style={{ backgroundColor: "#96FEF2" }}
as={Col}
>
3
</FlexboxGrid.Item>
<FlexboxGrid.Item
xs={24}
sm={12}
md={3}
lg={4}
style={{ backgroundColor: "#FC7B96" }}
as={Col}
>
4
</FlexboxGrid.Item>
</FlexboxGrid>
<h5 style={{ textAlign: "center" }}>Row -2</h5>
<FlexboxGrid>
<FlexboxGrid.Item
xs={24}
sm={6}
md={6}
lg={12}
style={{ backgroundColor: "#FEAF96" }}
as={Col}
>
1
</FlexboxGrid.Item>
<FlexboxGrid.Item
xs={24}
sm={6}
md={6}
lg={12}
style={{ backgroundColor: "#CAFF83" }}
as={Col}
>
2
</FlexboxGrid.Item>
<FlexboxGrid.Item
xs={24}
sm={6}
md={6}
lg={12}
style={{ backgroundColor: "#FEED96 " }}
as={Col}
>
3
</FlexboxGrid.Item>
<FlexboxGrid.Item
xs={24}
sm={6}
md={6}
lg={12}
as={Col}
style={{ backgroundColor: "#D6D8FF" }}
>
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/#responsive