. El componente de fila proporciona una fila en el sistema de cuadrícula, y se usa para Col. El componente proporciona una columna en el sistema de cuadrícula, y se usa para Podemos usar el siguiente enfoque en ReactJS para usar Ant Design Row y Col Component.
Accesorios de fila:
- align: Se utiliza para alinear verticalmente el contenido.
- Se utiliza para indicar el espacio entre las rejillas.
- justificar: Se utiliza para la disposición Horizontal del contenido.
- wrap: se utiliza para autoenvolver la línea.
Accesorios de columna:
- flex: se utiliza para indicar el estilo de diseño flexible.
- desplazamiento: se utiliza para indicar el número de celdas para desplazar Col desde la izquierda.
- order: Se utiliza para rasterizar el orden.
- pull: se utiliza para indicar el número de celdas que el ráster se mueve hacia la izquierda.
- empujar: se utiliza para indicar el número de celdas que el ráster se mueve hacia la derecha.
- span: Se utiliza para rasterizar el número de celdas a ocupar.
- xs: se utiliza para indicar el número de columnas que se abarcan en dispositivos extrapequeños
- Se utiliza para indicar el número de columnas a abarcar en dispositivos pequeños ≥ 576
- md: se utiliza para indicar el número de columnas a abarcar en dispositivos medianos ≥ 768
- lg: Se utiliza para denotar el
- Se utiliza para indicar el número de columnas para abarcar en dispositivos extragrandes ≥ 1200
- Se utiliza para indicar el número de columnas para abarcar en dispositivos extragrandes ≥ 1600
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 antd
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
Ejemplo de componente de fila: 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.
App.js
import React from 'react'
import "antd/dist/antd.css";
import { Row } from 'antd';
export default function App() {
return (
<div style={{ display: 'block', width: 700, padding: 30 }}>
<h4>ReactJS Ant-Design Row Component</h4>
<Row style={{backgroundColor: 'red',
width: '100%', height: 10}}></Row>
<Row style={{backgroundColor: 'yellow',
width: '100%', height: 10}}></Row>
<Row style={{backgroundColor: 'blue',
width: '100%', height: 10}}></Row>
</div>
);
}
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Ejemplo de componente de columna: 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.
App.js
import React from 'react'
import "antd/dist/antd.css";
import { Row, Col } from 'antd';
export default function App() {
return (
<div style={{ display: 'block',
width: 700, padding: 30 }}>
<h4>ReactJS Ant-Design Column Component</h4>
<Row>
<Col style={{
backgroundColor: 'blue',
}}>
1st Column
</Col>
<Col style={{
backgroundColor: 'orange',
}}>
2nd Column
</Col>
<Col style={{
backgroundColor: 'pink',
}}>
3rd Column
</Col>
</Row>
</div>
);
}
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Referencia:
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA