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 el desplazamiento, pasamos los siguientes accesorios al Componente Col:
- xxlOffset: Toma como valor un número. Mueve las columnas a la derecha para Dispositivos extra grandes Escritorios
- xlOffset: Toma como valor un número. Mueve las columnas a la derecha para Dispositivos extra grandes Escritorios
- lgOffset: Toma como valor un número. Mueve las columnas a la derecha para Dispositivos grandes Escritorios
- mdOffset: Toma como valor un número. Mueve las columnas a la derecha para dispositivos Medianos Escritorios
- smOffset: Toma como valor un número. Mueve las columnas a la derecha para Dispositivos pequeños Tabletas
- xsOffset: Toma como valor un número. Mueve las columnas a la derecha para Dispositivos extra pequeños Teléfonos
Sintaxis:
<Grid>
<Row>
<Col xsOffset={} smOffset={}
mdOffset={} lgOffset={}>
</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 él, estamos agregando fila con componentes de columna y pasando diferentes valores a xsOffset, smOffset y mdOffset.
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 mdOffset={20} smOffset={12}
style={style}>
1
</Col>
<Col mdOffset={20} smOffset={6}
style={style}>
2
</Col>
<Col mdOffset={20} smOffset={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 Row con Col Components y pasando diferentes valores a xsOffset, smOffset, mdOffset y lgOffset.
App.js
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
return (
<div className="App">
<h4>React Suite Grid Offset</h4>
<Grid>
<Row>
<h6 style={{ textAlign: "center" }}>
Row -1</h6>
<Col
xsOffset={24}
smOffset={12}
mdOffset={3}
lgOffset={12}
style={{ backgroundColor: "#A0F962",
width: 100 }}
>
1
</Col>
<Col
xsOffset={24}
smOffset={12}
mdOffset={3}
lgOffset={4}
style={{ backgroundColor: "#D97BFC",
width: 100 }}
>
2
</Col>
<Col
xsOffset={24}
smOffset={12}
mdOffset={3}
lgOffset={4}
style={{ backgroundColor: "#96FEF2",
width: 100 }}
>
3
</Col>
<Col
xsOffset={24}
smOffset={12}
mdOffset={3}
lgOffset={4}
style={{ backgroundColor: "#FC7B96",
width: 100 }}
>
4
</Col>
</Row>
<Row>
<h6 style={{ textAlign: "center" }}>
Row -2</h6>
<Col
xsOffset={24}
smOffset={6}
mdOffset={6}
lgOffset={12}
style={{ backgroundColor: "#FEAF96",
width: 100 }}
>
1
</Col>
<Col
xsOffset={24}
smOffset={6}
mdOffset={6}
lgOffset={12}
style={{ backgroundColor: "#CAFF83",
width: 100 }}
>
2
</Col>
<Col
xsOffset={24}
smOffset={6}
mdOffset={6}
lgOffset={12}
style={{ backgroundColor: "#FEED96 ",
width: 100 }}
>
3
</Col>
<Col
xsOffset={24}
smOffset={6}
mdOffset={6}
lgOffset={12}
style={{ backgroundColor: "#D6D8FF",
width: 100 }}
>
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/#offset