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.
Para la capacidad de respuesta, pasamos los siguientes accesorios al Componente Col:
- xxl: Toma como valor un número. El número de columnas que uno desea ocupar para dispositivos Extra grandes Escritorios (≥ 1400px)
- xl: Toma como valor un número. El número de columnas que uno desea ocupar para dispositivos Extra grandes Escritorios (≥ 1200px)
- lg: Toma un número como valor. El número de columnas que uno desea ocupar para dispositivos de escritorio grandes (≥ 992 px)
- md: Toma como valor un número. El número de columnas que uno desea ocupar para dispositivos medianos Escritorios (≥ 768 px)
- sm: Toma como valor un número. El número de columnas que uno desea ocupar para dispositivos pequeños Tabletas (≥ 576px)
- 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:
<Grid>
<Row>
<Col xs={ } sm={ } md={ }
lg={ } xl={ } xxl={ }></Col>
</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 los componentes Grid, Row y Col de «rsuite», y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css».
Estamos agregando los componentes de cuadrícula, dentro de ellos, estamos agregando filas con componentes de columna y pasando diferentes valores a xs, sm y md.
App.js
import { Grid, Row, 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 Grid Responsive</h4>
<Grid>
<Row>
<Col xs={8} sm={12}
md={3} style={style}>
1
</Col>
<Col xs={8} sm={12}
md={3} style={style}>
2
</Col>
<Col xs={8} sm={12}
md={3} style={style}>
3
</Col>
</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
Producción:
Ejemplo 2: estamos importando los componentes Grid, Row y Col de «rsuite», y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css».
Estamos agregando dos componentes de cuadrícula. Dentro de él, estamos agregando Fila con Componentes Col y pasando diferentes valores a xs, sm, md y lg.
App.js
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
return (
<div className="App">
<h4>React Suite Grid Responsive</h4>
<Grid>
<Row>
<p>Row -1</p>
<Col
xs={24}
sm={12}
md={3}
lg={12}
style={{ backgroundColor: "#A0F962" }}
>
1
</Col>
<Col
xs={24}
sm={12}
md={3}
lg={4}
style={{ backgroundColor: "#D97BFC" }}
>
2
</Col>
<Col
xs={24}
sm={12}
md={3}
lg={4}
style={{ backgroundColor: "#96FEF2" }}
>
3
</Col>
<Col
xs={24}
sm={12}
md={3}
lg={4}
style={{ backgroundColor: "#FC7B96" }}
>
4
</Col>
</Row>
<Row>
<p>Row -2</p>
<Col
xs={24}
sm={6}
md={6}
lg={12}
style={{ backgroundColor: "#FEAF96" }}
>
1
</Col>
<Col
xs={24}
sm={6}
md={6}
lg={12}
style={{ backgroundColor: "#CAFF83" }}
>
2
</Col>
<Col
xs={24}
sm={6}
md={6}
lg={12}
style={{ backgroundColor: "#FEED96 " }}
>
3
</Col>
<Col
xs={24}
sm={6}
md={6}
lg={12}
style={{ backgroundColor: "#D6D8FF" }}
>
4
</Col>
</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
Producción:
Referencia: https://rsuitejs.com/components/grid/#responsive