Utilidades de posición de ReactJS MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar Position Utilities en ReactJS MDBootstrap. Position Utilities permite al usuario cambiar la posición del componente.

Sintaxis:

<p className="fixed-top">GeeksforGeeks</p>

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, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: este es el ejemplo básico que muestra cómo utilizar las utilidades de interacción.

import React from "react";
  
export default function App() {
  
    return (
        <div id="gfg">
            <br />
            <br />
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Positions</h4>
  
            <div className="fixed-top">
                Top Position
            </div>
            <div className="fixed-bottom">
                Bottom Position
            </div>
        </div>
    );
}

#gfg{
    margin: 40px;
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo crear un elemento de posición centrado con algunas coordenadas diferentes.

import React from "react";
  
export default function App() {
  
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Positions</h4>
            <br />
  
            <div className="position-relative gfg">
                <div className="position-absolute top-0 start-0 
                    translate-middle"></div>
                <div className="position-absolute top-0 start-50 
                    translate-middle"></div>
                <div className="position-absolute top-0 start-100 
                    translate-middle"></div>
                <div className="position-absolute top-50 start-0 
                    translate-middle"></div>
                <div className="position-absolute top-50 start-50 
                    translate-middle"></div>
                <div className="position-absolute top-50 start-100 
                    translate-middle"></div>
                <div className="position-absolute top-100 start-0 
                    translate-middle"></div>
                <div className="position-absolute top-100 start-50 
                    translate-middle"></div>
                <div className="position-absolute top-100 start-100 
                    translate-middle"></div>
            </div>
        </div>
    );
}

#gfg{
    margin: 40px;
}
  
.gfg {
    height: 300px;
    width: 80%;
    background-color: gray;
    margin-left: 100px;
}
.gfg div {
    width: 1.5em;
    height: 1.5em;
    background-color: green;
    border-radius: 1rem;
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/utilities/position/