Accesorios de React Suite <Divisor>

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El divisor permite al usuario separar los componentes de la interfaz de usuario entre sí. 

<Divisor> Accesorios :

• classPrefix : se utiliza para indicar el prefijo de la clase CSS del componente.
• children : Todo lo que escriba entre las etiquetas divisorias se establece como texto para el divisor.
• vertical : Se utiliza para especificar si el divisor es vertical o no.

Enfoque : Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que creará un React Suite Divider with Props .

Creando proyecto React:

Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa «npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: la estructura del proyecto debe verse como la siguiente:

Estructura del proyecto

Ejemplo 1: estamos creando una interfaz de usuario que muestra a los usuarios diferentes cursos de GFG separados mediante el prefijo de clase de string de utilería vertical y divisoria .

import React from "react";
import { Divider } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';
  
class App extends React.Component {
  
    render() {
        return (
            <div style={{ margin: 100 }}>
                <p>Choose your favourite GFG course:</p><br />
                <b style={{ color: "green" }}>
                    DSA Self Paced </b>
                <Divider vertical />
                <b style={{ color: "green" }}>
                    Amazon SDE Preparation Test Series</b>
                <Divider vertical />
                <b style={{ color: "green" }}>
                    Complete Interview Preparation</b>
            </div>
        );
    }
}
  
export default App;

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

npm start

Producción:

Accesorio divisor

Ejemplo 2: estamos creando una interfaz de usuario que muestra diferentes secciones divididas con un divisor con texto usando prop secundario y prefijo de clase de string de divisor.

import React from "react";
import { Divider } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';
  
const myComponentStyle = {
    height: 50,
    paddingTop: 15,
    backgroundColor: "green",
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
}
  
class App extends React.Component {
    render() {
        return (
            <div style={{ margin: 100 }}>
                <p style={myComponentStyle}>Section</p>
  
                <Divider>Divider 1</Divider>
                <p style={myComponentStyle}>Section</p>
  
                <Divider>Divider 2</Divider>
                <p style={myComponentStyle}>Section</p>
  
                <Divider>Divider 3</Divider>
                <p style={myComponentStyle}>Section</p>
  
            </div>
        );
    }
}
  
export default App;

Producción:

Divisor con apoyo para niños

Referencia: https://rsuitejs.com/components/divider/#props