Construindo Popovers, Alertas e Toasts com Blueprint UI em React

Twittar

O Blueprint UI é um kit de ferramentas popular do React UI que fornece um conjunto de componentes e estilos reutilizáveis para a construção de aplicativos da Web modernos. Um dos principais recursos do Blueprint UI é o suporte para a criação de popovers, alertas e toasts, que são componentes essenciais para exibir informações e comentários aos usuários.

últimas postagens

Instalando a IU do Blueprint

Para começar a usar o Blueprint UI, você precisará instalá-lo primeiro. Você pode fazer isso usando qualquer gerenciador de pacotes de sua escolha.

Para instalá-lo usando o npm, o gerenciador de pacotes JavaScript, execute o seguinte comando em seu terminal:

 npm install @blueprintjs/core

Depois de instalar o Blueprint UI, você deve importar os arquivos CSS da biblioteca:

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

Ao importar esses arquivos, você poderá integrar os estilos de interface do usuário do Blueprint com os componentes que o Blueprint UI oferece.

Criando Popovers usando a IU do Blueprint

Popovers são dicas de ferramentas que aparecem quando o usuário passa o mouse sobre ou clica em um elemento. Eles fornecem informações adicionais ou opções para o usuário.

Para criar popovers em seu aplicativo React usando Blueprint UI, você deve instalar o componente Blueprint UI Popover2.

Para fazer isso, execute o seguinte código no seu terminal:

 npm install --save @blueprintjs/popover2

Certifique-se de importar a folha de estilo do pacote em seu arquivo CSS:

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

Depois de importar a folha de estilo, você pode usar o componente Popover2 para criar popovers em seu aplicativo.

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;

Este código cria um popover usando o componente Popover2. Ele também define uma variável popoverContent, que contém o código JSX para o conteúdo popover.

Como usar o Memoji durante uma chamada do FaceTime no iPhone e iPad

O componente Popover2 assume o popoverContent como o valor de sua propriedade de conteúdo. A propriedade content especifica o conteúdo exibido no popover. Aqui, o componente Popover2 envolve um componente Button. Isso faz com que o popover seja exibido quando você clicar no botão.

O popover parece simples, como mostrado aqui:

Você pode estilizar o conteúdo popover passando um prop className para o código popoverContent JSX:

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

Você pode então definir a classe CSS em seu arquivo CSS:

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

Agora o popover deve ficar um pouco melhor:

O componente Popover2 leva alguns adereços que irão ajudá-lo a configurá-lo para atender às suas necessidades. Alguns desses props são popoverClassName, onInteraction, isOpen, minimal e placement.

A propriedade de posicionamento determina a posição preferencial do popover em relação ao elemento de destino. Seus valores disponíveis são:

auto
começo automático
fim automático
principal
início de topo
extremidade superior
fundo
início de baixo
extremidade inferior
certo
início à direita
extremidade direita
esquerda
início esquerdo
extremidade esquerda

Com o popoverClassName, você pode definir um nome de classe CSS para o elemento popover. Você primeiro criará uma classe CSS em seu arquivo CSS para usar o prop.

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 criar a classe CSS, use a propriedade popoverClassName para aplicar o estilo personalizado ao componente Popover2:

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

O suporte mínimo controla o estilo do popover. A propriedade aceita um valor booleano. Se definido como verdadeiro, o popover terá estilo mínimo, sem seta e uma aparência de caixa simples.

14 API de SEO poderosa para profissionais de marketing e empresas

Criando alertas

Alertas são notificações que aparecem na tela para informar o usuário sobre informações ou ações importantes. Eles são comumente usados para exibir mensagens de erro, mensagens de sucesso ou avisos.

A criação de alertas no Blueprint UI é semelhante à criação de alertas usando o Chakra UI. Você usará o componente Alert para criar um alerta em seu aplicativo React usando o Blueprint UI.

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;

Este exemplo mostra como você deve importar o componente Alerta do pacote @blueprintjs/core. O componente Alert renderiza uma mensagem de alerta na tela. Também leva três adereços: isOpen, onClose e confirmButtonText.

A prop isOpen determina se o alerta é visível ou não. Defina-o como true para exibir o alerta e false para ocultá-lo. A propriedade onClose é uma função de retorno de chamada executada quando um usuário fecha o alerta.

Por último, o prop confirmButtonText determina o texto exibido no botão de confirmação.

A notificação de alerta neste exemplo terá esta aparência:

Criando brindes com Blueprint UI

Toasts são notificações que aparecem na tela para informar o usuário sobre informações ou eventos importantes. Eles são semelhantes aos alertas, mas geralmente são menos intrusivos e desaparecem rapidamente.

Para criar um toast em seu aplicativo React usando Blueprint UI, use o componente OverlayToaster. O componente OverlayToaster cria uma instância Toaster que é então usada para criar toasts individuais.

Como corrigir o erro de login do League of Legends (falha no LoL ao fazer login na sessão inválida)

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 bloco de código acima usa o método OverlayToaster.create para gerar a instância da torradeira e especifica sua posição usando a propriedade position.

Também define a função showToast. Esta função usa o método show do toasterInstance para exibir o brinde quando chamado. O método show pega um objeto com as props message, intent, timeout, isCloseButtonShown e icon.

A prop message especifica o conteúdo de texto do toast, enquanto a prop intent especifica o tipo de toast. O estilo do brinde varia de acordo com seu valor.

Você pode controlar por quanto tempo a notificação toast é exibida usando o suporte de tempo limite. A prop do ícone especifica um elemento de ícone para exibir no brinde. Com o prop isCloseButtonShown, você pode controlar se o botão Fechar é exibido no sistema toast.

O bloco de código acima vai gerar um lindo brinde ao clicar no botão, conforme a imagem abaixo.

Se você deseja criar notificações do sistema atraentes em seu aplicativo React, o Blueprint UI é uma ótima opção. Ele fornece uma ampla gama de componentes predefinidos que você pode usar para criar notificações que correspondam ao estilo do seu aplicativo.

No entanto, se você estiver trabalhando em um projeto pequeno que não requer todos os recursos do Blueprint UI, o React Toastify é uma alternativa leve para criar belas notificações.

Melhorando a experiência do usuário com Toasts, Popovers e Alertas

Você aprendeu como criar popovers, alertas e toasts em seu aplicativo React usando a interface do usuário do Blueprint. Esses componentes são essenciais para fornecer informações e feedback aos usuários e podem aprimorar significativamente a experiência do usuário em seu aplicativo. Você pode criar facilmente esses componentes usando as informações que obteve com o mínimo de esforço e personalização.