Parte superior de React Suite Affix

React suite es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, veremos sobre el afijo superior de la suite de reacción. El afijo se usa generalmente para páginas con contenido largo, fija los elementos especificados en el rango visible de la página para ayudar en la operación rápida. Podemos usar el afijo superior para arreglar un componente en la parte superior de la pantalla/pantalla. 

Sintaxis:

// Import statement
import Affix from 'rsuite/Affix';

// App.Js File
function App() {
    <div>
    <Affix top={50}>
      <Button>...</Button>
    </Affix>
    <p>...</p>
  </div>
}

Fijar accesorios:

• children : Denota el elemento child para este componente.
• classPrefix : Denota el prefijo de la clase CSS del componente.
• contenedor : Especifica el contenedor.
• onChange : Esta es una función de devolución de llamada que cuando se activa cuando cambia el estado no fijo y fijo.
• top : Establece la altura superior fija del afijo.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Ejemplo 1: El siguiente ejemplo muestra el botón adjunto en la parte superior. 

import { Paragraph } from "@rsuite/icons";
import React from "react";
import { Affix, Button } from "rsuite/";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Affix Top
                </h4>
  
                <div style={{ marginTop: 20 }}>
                    <Affix>
                        <Button appearance="primary" 
                            color="green">Top Affix</Button>
                    </Affix>
                    <Paragraph
                        style={{ fontSize: 1000 }}
                        rows={10}
                    />
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra un afijo de barra de navegación en la parte superior.  

import { Paragraph } from "@rsuite/icons";
import Home from "@rsuite/icons/legacy/Home";
import React from "react";
import { Affix, Nav, Navbar } from "rsuite/";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Affix Top</h4>
  
                <div>
                    <Affix>
                        <Navbar>
                            <Navbar.Brand href="#">
                                GeeksforGeeks</Navbar.Brand>
                            <Nav>
                                <Nav.Item icon={<Home />}>
                                    Home</Nav.Item>
                                <Nav.Item>Tutorials</Nav.Item>
                                <Nav.Item>Practice</Nav.Item>
                                <Nav.Menu title="Jobs">
                                    <Nav.Item>Internships</Nav.Item>
                                    <Nav.Item>FTE</Nav.Item>
                                </Nav.Menu>
                            </Nav>
                        </Navbar>
                    </Affix>
                    <Paragraph style={{ fontSize: 1000 }} 
                        rows={10} />
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/affix/#top