Criando popovers, alertas e brindes com Blueprint UI em React

O Blueprint UI é um kit React UI que inclui uma coleção abrangente de elementos e designs intercambiáveis, adequados para a construção de aplicações web contemporâneas. Entre as capacidades notáveis do Blueprint UI está a sua proficiência na criação de popovers, alertas e brindes, que são componentes indispensáveis para transmitir dados e feedback aos utilizadores finais.

Instalar o Blueprint UI

Para utilizar o Blueprint UI, é necessário instalá-lo primeiro através de um gestor de pacotes preferido.

Para implementar o projeto utilizando o Node.js, execute o seguinte comando no seu terminal:

 npm install @blueprintjs/core
 

Após a instalação do Blueprint UI, é imperativo importar os ficheiros CSS da biblioteca.

 @import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 

Através da importação destes ficheiros, é possível amalgamar os padrões estilísticos do Blueprint UI com os elementos constituintes do Blueprint UI.

Criando popovers usando o Blueprint UI

Popovers, também conhecidos como dicas de ferramentas, são um tipo de componente de interface que exibe informações ou opções suplementares aos usuários ao passar o mouse ou clicar

Para incorporar popovers em um aplicativo React usando o Blueprint UI, é necessário instalar o componente Blueprint UI Popover2.

 npm install --save @blueprintjs/popover2
 

Certifique-se de que incorpora a folha de estilo de pacote necessária no seu ficheiro CSS.

 @import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 

Após a introdução da folha de estilos, pode utilizar o módulo Popover2 para gerar popovers no seu software.

Por exemplo:

 import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";

function App() {
  const popoverContent = (
    <div>
      <h3>Popover Title</h3>
      <p>This is the content inside the popover.</p>
    </div>
  );

  return (
    <div>
      <Popover2 content={popoverContent}>
        <Button intent="success" text="Click Me" />
      </Popover2>
    </div>
  );
}

export default App;
 

O presente código cria uma instância do componente Popover2 e, além disso, especifica o conteúdo do popover sob a forma de código JSX na variável popoverContent .

O componente Popover2 está equipado com uma propriedade de conteúdo que aceita o valor do seu conteúdo. A propriedade de conteúdo determina a substância que aparece no interior do popover. Neste caso, o Popover2 engloba um componente Button, o que resulta no aparecimento do popover ao clicar no botão.

O popover parece simples, como mostrado aqui:

O conteúdo do popover pode ser estilizado fornecendo um nome de classe ao código JavaScript popoverContent , que é escrito na sintaxe do React.

 const popoverContent = (
  <div className='popover'>
    <h3>Popover Title</h3>
    <p>This is the content inside the popover.</p>
  </div>
);
 

Para implementar os estilos do nosso componente, utilizaremos uma classe CSS no nosso ficheiro CSS.

 .popover {
  padding: 1rem;
  background-color: #e2e2e2;
  font-family: cursive;
}
 

O popover destina-se a aparecer num formato melhorado como se segue:

O componente Popover2 requer determinadas propriedades configuráveis para adaptar a sua funcionalidade a requisitos específicos, que incluem, entre outros, o nome da classe do popover, o tratamento de eventos de interação, o estado aberto/fechado, a largura mínima e o posicionamento preferencial.

A propriedade conhecida como “placement” (posicionamento) é utilizada para especificar a localização pretendida do popover em relação ao elemento de destino pretendido, com as opções seguintes:

⭐ auto

⭐ auto-start

⭐ auto-end

⭐ top

⭐ top-start

⭐ top-end

⭐ bottom

⭐ bottom-start

⭐ bottom-end

⭐ right

⭐ right-start

⭐ right-end

⭐ left

⭐ left-start

⭐ left-end

A disposição do popoverClassName

permite a especificação de um nome de classe CSS para o elemento popover, que deve ser criado dentro de uma classe CSS no ficheiro CSS antes de utilizar esta propriedade.

Por exemplo:

 .custom-popover {
  background-color: #e2e2e2;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border-radius: 12px;
  padding: 1rem;
}
 

Depois de formular a classe CSS, utilize a propriedade popoverClassName para conferir o aspeto personalizado ao elemento Popover2 :

 <Popover2
 content={popoverContent}
 placement="bottom-end"
 popoverClassName="custom-popover"
 minimal={true}
>
 <Button intent="success" text="Click Me" />
</Popover2>
 

A propriedade minimal regula a apresentação do popover, aceitando um valor booleano. Quando definida como true, o popover é fornecido com um estilo simplificado, sem uma seta, e apresentado num formato de caixa básico.

Criação de alertas

Os alertas são notificações inteligentes que surgem na interface para transmitir informações importantes ao utilizador relativamente a informações ou comportamentos imperativos. São normalmente utilizados para exibir avisos de erros, declarações de realizações ou precauções.

O processo de configuração das notificações de alerta na estrutura do Blueprint UI é semelhante ao da utilização do Chakra UI, envolvendo a implementação do componente Alerta num projeto baseado em React.

Aqui está um exemplo:

 import React from "react";
import { Alert, Button } from "@blueprintjs/core";

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="Close">
        <p>This is an alert message</p>
      </Alert>

      <Button text="Click Me" intent="success" onClick={handleOpen} />
    </div>
  );
}

export default App;
 

“isOpen”, “onClose” e “confirmButtonText”.

A propriedade isOpen serve para indicar se a mensagem pop-up deve ou não ser apresentada.Se esta propriedade for definida como true , a janela pop-up tornar-se-á visível, enquanto que se for definida como false ficará oculta. Da mesma forma, a função onClose é um comando especial que é executado sempre que um utilizador decide fechar a janela pop-up.

A propriedade conhecida como

(‘confirmButtonText’)

, especifica o conteúdo que aparece no botão de afirmação.

A notificação para o alerta, neste caso, assumirá a seguinte aparência:

Criar brindes com o Blueprint UI

Os alertas e as notificações são mensagens apresentadas no ecrã de um dispositivo para informar o utilizador sobre eventos específicos, notícias, lembretes ou outras ocorrências significativas. Embora ambos os termos possam ser utilizados de forma intercambiável em alguns contextos, existe uma diferença subtil entre eles. Os alertas tendem a transmitir urgência com mais força do que as notificações, utilizando frequentemente cores fortes, luzes intermitentes ou efeitos sonoros para chamar imediatamente a atenção do utilizador. Por outro lado, as notificações têm geralmente um aspeto mais discreto e podem ser ignoradas à vontade do utilizador sem afetar o funcionamento do dispositivo. Os brindes, tal como mencionado anteriormente, situam-se algures entre estas duas categorias, fornecendo uma breve mensagem com uma ação opcional para o utilizador tomar, tal como acusar a receção de uma mensagem ou confirmar uma alteração nas definições.

A utilização do componente

do Blueprint UI permite a geração de uma instância do Toast em um aplicativo React. Essa instância do Toast pode ser usada posteriormente para produzir vários toasts por meio de sua implementação.

Por exemplo:

 import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";

const toasterInstance = OverlayToaster.create({ position: "top-right" });

function App() {
  const showToast = () => {
    toasterInstance.show({
      message: "This is a toast",
      intent: "primary",
      timeout: 3000,
      isCloseButtonShown: false,
      icon: "bookmark",
    });
  };

  return (
    <div>
      <Button text="Click Me" intent="success" onClick={showToast} />
    </div>
  );
}

export default App;
 

O código mencionado acima utiliza o método OverlayToaster.create para criar uma instância da torradeira, ao mesmo tempo em que especifica seu posicionamento por meio do uso da propriedade position .

O texto acima descreve a funcionalidade da função “showToast”, que utiliza o método “show” da “toasterInstance” para mostrar uma torrada após a invocação. O método “show” aceita um objeto composto por propriedades como “message”,

A especificação do protocolo de mensagens define a comunicação verbal incluída na torrada, enquanto a designação da parametrização da intenção denota a categorização da torrada. A aparência do brinde deve ser diversificada de acordo com as características por ele especificadas.

A propriedade timeout determina a duração do aparecimento da notificação da tosta, enquanto a propriedade icon especifica um ícone a ser apresentado na tosta. Adicionalmente, a propriedade isCloseButtonShown permite regular a visibilidade do botão de fechar dentro da tosta.

Ao clicar no botão representado na ilustração em anexo, é gerada uma tosta visualmente apelativa, de acordo com o exemplo apresentado.

Posso ter uma forma alternativa de exprimir esta ideia utilizando palavras mais elaboradas?

Se o seu projeto for de escala modesta e não exigir a gama completa de funcionalidades fornecidas pelo Blueprint UI, o React Toastify pode ser visto como uma alternativa que é simultaneamente leve e capaz de gerar notificações apelativas.

Aprimorando a experiência do usuário com brindes, popovers e alertas

Sua proficiência na criação de popovers, alertas e brindes em um aplicativo React utilizando o Blueprint UI é louvável. Esses componentes desempenham um papel fundamental na transmissão de informações e feedback para os usuários finais, elevando assim a experiência geral do usuário do seu aplicativo. A sua capacidade de gerar estes elementos de forma rápida e eficiente com o mínimo de ajustes é impressionante.