Accesorios de React Suite <Botón>

Una suite de React 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, aprenderemos sobre el botón Prop de la suite React. El componente <Button> se usa para agregar un botón en una aplicación de reacción.

<Botón> Accesorios:

• active : Cambia el estado del botón a activo.
• apariencia : Denota la apariencia del botón.
• as: Se utiliza para agregar un elemento personalizado a un botón.
• block : se utiliza para abarcar todo el ancho del elemento principal del botón.
• children : Denota el contenido primario.
• classPrefix : Denota el prefijo de la clase CSS del componente.
• color : Denota el color del botón.
• disabled : Cambia el estado del botón a deshabilitado.
• href : se utiliza para proporcionar un atributo href.
• loading : Muestra un indicador de carga.
• tamaño : Denota el tamaño del botón.

Sintaxis:

<Button appearance="subtle" size="lg" colored="red" disabled>
   Default
</Button>

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 Node 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 demuestra la apariencia, el tamaño y los accesorios activos de <Button>.

import "rsuite/dist/rsuite.min.css";
import { Button } from "rsuite";
  
export default function App() {
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Button Prop</h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
          <Button
            appearance="primary"
            size="lg"
            active  
          >Click</Button>
        </div>
            
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra los accesorios <Button> de carga deshabilitados.

import "rsuite/dist/rsuite.min.css";
import { Button } from "rsuite";
  
export default function App() {
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Button Prop</h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
          <span style={{fontSize: 20, marginRight: 10}}>
              Saving</span>
          <Button
            appearance="primary"
            size="md"
            disabled  
            loading
          >Loading</Button>
        </div>
            
      </div>
    </center>
  );
}

Producción:

 

Referencia: https://rsuitejs.com/components/button/#code-lt-button-gt-code