Componente de etiqueta de Blueprint de ReactJS

BlueprintJS es un kit de herramientas de interfaz de usuario basado en React para la web. Esta biblioteca está muy optimizada y es popular para crear interfaces que son complejas y densas en datos para aplicaciones de escritorio. ideal para listas de strings. Podemos usar el siguiente enfoque en ReactJS para usar el componente de etiqueta de Blueprint de ReactJS.

Accesorios de etiqueta:

• active: Se utiliza para indicar si la etiqueta debe aparecer en estado activo o no.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• elementRef: se utiliza para indicar un controlador de referencia o un objeto de referencia que recibe el elemento HTML nativo representado por este componente.
• relleno: Se utiliza para indicar si la etiqueta debe ocupar todo el ancho de su contenedor o no.
• htmlTitle: se utiliza para indicar el título HTML que se pasará al componente.
• icono: se utiliza para indicar el nombre de un icono o un elemento de icono para mostrar ante los niños.
• intención: se utiliza para indicar el color de la intención visual que se aplicará al elemento.
• interactivo: Se utiliza para indicar si la etiqueta debe responder visualmente a las interacciones del usuario o no.
• grande: Se utiliza para indicar si esta etiqueta debe usar estilos grandes o no.
• minimal: Se utiliza para indicar si esta etiqueta debe usar estilos mínimos o no.
• multilínea: se utiliza para indicar si se debe permitir que el contenido de la etiqueta ocupe varias líneas o no.
• onClick: es una devolución de llamada que se activa cuando se hace clic en la etiqueta.
• onRemove: es un controlador de clics para el botón de eliminación.
• rightIcon: se utiliza para indicar el nombre de un icono o un elemento de icono para representar después de los elementos secundarios.
• round: Se utiliza para indicar si esta etiqueta debe tener extremos redondeados o no.

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 , acceda a ella con el siguiente comando:

  cd foldername

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

  npm install @blueprintjs/core

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tag } from "@blueprintjs/core";
  
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint Tag Component</h4>
            <Tag icon={"home"} /> <br></br> <br></br>
            <Tag>Food</Tag> <br></br> <br></br>
            <Tag round large>Dish</Tag>
        </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

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://blueprintjs.com/docs/#core/components/tag