React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end.
El componente de botón permite al usuario interactuar con la página web. El componente de botón tiene una serie de propiedades propias, como apariencia, tamaño, color, etc. Aquí veremos la propiedad de tamaño.
Proposición de tamaño: la propiedad de tamaño establece el tamaño del componente del botón.
Hay cuatro alternativas disponibles.
- xs:- el tamaño más pequeño que está disponible
- sm:- es el tamaño pequeño un poco más grande que el tamaño xs.
- md:- el tamaño mediano que es más grande que el sm.
- lg:- el tamaño más grande disponible.
Sintaxis:
<Button size=""> </Button>
Requisito previo: Introducción e instalación de reactJs
Creación de la aplicación React y la instalación del módulo:
Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app .
npm create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
cd project
Paso 3: ahora instala la dependencia usando el siguiente comando:
npm install rsuite
Estructura del proyecto: Se verá así:
Ejemplo: Estamos importando el Componente Botón desde rsuite, y para aplicar los estilos predeterminados de los componentes estamos importando “rsuite/dist/rsuite.min.css”.
Los botones tienen dos accesorios, uno es un tamaño que define el tamaño del componente del botón y otro es la apariencia que determina cómo aparecerá el botón.
Hemos creado cuatro botones con la apariencia de un fantasma pero de diferentes tamaños que se definen como ‘lg’, ‘md’, ‘sm’, ‘xs’.
App.js
import { Button } from "rsuite";
import "rsuite/dist/rsuite.min.css";//adding style
function App() {
return (
<div className="App">
<h4>React Suite Button Size</h4>
<Button appearance="ghost" size="xs">
Xsmall
</Button>
<br />
<Button appearance="ghost" size="sm">
Small
</Button>
<br />
<Button appearance="ghost" size="md">
Medium
</Button>{" "}
<br />
<Button appearance="ghost" size="lg">
Large
</Button>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Referencia: https://rsuitejs.com/components/button/