Elementos de interface do usuário simples e limpos podem atualizar seu design e adicionar um toque de qualidade ao seu site ou aplicativo.

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.

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 npm, o gerenciador de pacotes JavaScript, execute o seguinte comando no seu terminal:

npm install @blueprintjs/core

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

@importar"normalizar.css";
@importar"@blueprintjs/core/lib/css/blueprint.css";
@importar"@blueprintjs/icons/lib/css/blueprint-icons.css";
instagram viewer

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 Blueprint UI Popover2 componente.

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:

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

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

Por exemplo:

importar Reagir de"reagir";
importar { Botão } de"@blueprintjs/core";
importar { Popover2 } de"@blueprintjs/popover2";
funçãoAplicativo() {
const popoverContent = (




Título popover</h3>




Este é o conteúdo dentro do popover.</p>
 </div>
 );


retornar (









exportarpadrão Aplicativo;

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

O Popover2 componente leva o popoverContent como o valor de sua contente suporte. O contente prop especifica o conteúdo exibido no popover. Aqui o Popover2 componente envolve um Botão componente. 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 nome da classe suporte para o popoverContent Código JSX:

const popoverContent = (
'dar um pulo'>
Título popover</h3>




Este é o conteúdo dentro do popover.</p>
 </div>
);

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

.dar um pulo {
preenchimento: 1rem;
cor de fundo: #e2e2e2;
família de fontes: cursiva;
}

Agora o popover deve ficar um pouco melhor:

O Popover2 componente leva alguns adereços que irão ajudá-lo a configurá-lo para atender às suas necessidades. Alguns desses adereços são popoverClassName, onInteraction, está aberto, mínimo, e colocação.

O colocação prop 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 {
cor de fundo: #e2e2e2;
Sombra da caixa: 0 10px 15px-3pxrgb(0 0 0 / 0.1);
raio da borda: 12px;
preenchimento: 1rem;
}

Depois de criar a classe CSS, use o popoverClassName prop para aplicar o estilo personalizado ao componente Popover2:

 conteúdo={popoverContent}
 canal ="extremidade inferior"
 popoverClassName="popover personalizado"
 mínimo={verdadeiro}
>

O mínimo prop 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.

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 a criando alertas usando Chakra UI. Você usará o componente Alert para criar um alerta em seu aplicativo React usando o Blueprint UI.

Aqui está um exemplo:

importar Reagir de"reagir";
importar { Alerta, Botão } de"@blueprintjs/core";
funçãoAplicativo() {
const [isOpen, setIsOpen] = React.useState(falso);


const identificadorAberto = () => {
 setIsOpen(verdadeiro);
 };


const identificador Fechar = () => {
 setIsOpen(falso);
 };


retornar (




"Fechar">
Esta é uma mensagem de alerta</p>
 </Alert>




exportarpadrão Aplicativo;

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

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

Por último, o confirmButtonText prop 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 OverlayToaster componente. O OverlayToaster O componente cria uma instância Toaster que é então usada para criar toasts individuais.

Por exemplo:

importar Reagir de"reagir";
importar { OverlayToaster, Button } de"@blueprintjs/core";
const toasterInstance = OverlayToaster.create({ posição: "canto superior direito" });


funçãoAplicativo() {
const showToast = () => {
 toasterInstance.show({
 mensagem: "Isto é um brinde",
 intenção: "primário",
 tempo esgotado: 3000,
 isCloseButtonShown: falso,
 ícone: "marca páginas",
 });
 };


retornar (






exportarpadrão Aplicativo;

O bloco de código acima usa o OverlayToaster.create para gerar a instância da torradeira e especifica sua posição usando o método posição suporte.

Também define a função showToast. Esta função usa o mostrar método do toasterInstance para exibir o brinde quando chamado. O mostrar método pega um objeto com o mensagem, intenção, tempo esgotado, isCloseButtonShown, e ícone adereços.

O mensagem prop especifica o conteúdo de texto do brinde, enquanto o intenção prop especifica o tipo de brinde. O estilo do brinde varia de acordo com seu valor.

Você pode controlar por quanto tempo a notificação toast é exibida usando o tempo esgotado suporte. O ícone prop especifica um elemento de ícone para exibir no brinde. Com o isCloseButtonShown prop, 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 toast 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 exija todos os recursos do Blueprint UI, 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.