Criar a sua aplicação React com o kit de ferramentas Blueprint UI
Um processo de construção de uma aplicação React a partir dos seus elementos fundamentais pode consumir um tempo considerável e exigir conhecimentos significativos, particularmente no que diz respeito à criação de partes individuais. Em tais circunstâncias, a utilização do Blueprint UI Toolkit pode ser vantajosa. Esta coleção de blocos de construção de IU reutilizáveis permite que os programadores estabeleçam interfaces de utilizador coerentes e visualmente impressionantes para os seus projectos React, tirando partido de elementos pré-concebidos, poupando assim tempo e esforço e garantindo a consistência dos padrões de design.
Compreender os princípios fundamentais do Blueprint UI Toolkit, incluindo os seus componentes e capacidades, e empregar este conhecimento na construção de um programa React básico utilizando a ferramenta
O que é o Blueprint UI Toolkit?
O Blueprint UI Toolkit é uma biblioteca abrangente de componentes de interface de utilizador (UI) baseada em React, que oferece uma série de componentes prontamente disponíveis que são simples e adaptáveis. Esses elementos pré-construídos podem ser usados como estão ou adaptados para atender às necessidades específicas de cada um com facilidade.
O Blueprint UI Toolkit inclui elementos como botões, formulários, modais, navegação e tabelas, que podem acelerar o processo de desenvolvimento através da utilização de componentes pré-construídos que evitam a necessidade de criar cada elemento individualmente.
Primeiros passos com o Blueprint UI Toolkit
Para começar a utilizar o Blueprint UI Toolkit, é necessário primeiro estabelecer uma aplicação React.
O procedimento acima mencionado pode ser executado por meio de um gerenciador de pacotes Node de sua escolha, em que a instalação do Blueprint UI Toolkit via npm é iniciada através da execução de uma instrução dentro de um terminal ou prompt de comando.
npm install @blueprintjs/core
Para usar o yarn, execute este comando:
yarn add @blueprintjs/core
Após a instalação do Blueprint UI Toolkit, é possível selecionar e incorporar os componentes desejados na sua aplicação React.
Usando os componentes do Blueprint UI Toolkit
Antes de utilizar os componentes, é necessário incorporar os arquivos CSS derivados do Blueprint UI Toolkit.
@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";
A incorporação do trecho de código acima mencionado no ficheiro CSS confere aos componentes do Blueprint UI os seus atributos estilísticos.
A utilização do componente “Button” do Blueprint UI Toolkit é recomendada com o objetivo de incorporar um elemento de interface que facilite as interacções do utilizador na aplicação.
import React from "react";
import { Button } from "@blueprintjs/core";
function App() {
return (
<div>
<Button intent="success" text="Click Me" icon="refresh" small={true}/>
</div>
);
}
export default App;
O presente bloco de código incorpora uma adição de um botão à aplicação que utiliza o componente
. O referido componente aceita vários atributos, incluindo mas não se limitando a
,
,
A definição da propriedade “intent” determina as características do botão, que se reflectem na sua tonalidade de fundo. Neste caso, o botão possui uma intenção de “sucesso”, resultando num fundo verdejante. O Blueprint UI fornece várias intenções fundamentais, incluindo primária (azul), sucesso (verde), aviso (laranja) e perigo (vermelho).
O componente
permite personalizar o texto e os ícones exibidos nele, utilizando várias propriedades. A propriedade de texto oferece uma oportunidade de inserir o conteúdo do botão, enquanto a propriedade de ícone permite a adição de um ícone ao elemento. Além disso, a propriedade rightIcon pode ser implementada para posicionar o ícone no lado direito do botão.
As duas propriedades booleanas, ’large’ e ‘small’, determinam as dimensões do botão. Atribuir o valor ’true’ à propriedade ’large’ resultará num botão aumentado, enquanto que atribuir-lhe ‘false’ manterá o seu tamanho predefinido. Da mesma forma, atribuir o valor ‘small’ a true reduzirá o tamanho do botão, ao passo que se o mantiver false preservará as suas proporções originais.
O trecho de código anterior produzirá um botão com a aparência de:
O componente
pode ser utilizado para gerar um botão dentro da aplicação. Este componente específico é uma variante adaptada do componente padrão
, especificamente destinado a funcionar como uma hiperligação.
O presente componente admite uma infinidade de atributos idênticos aos aceites pelo elemento Button, incluindo texto, variante, tamanho, intenção, ícone, destino da hiperligação e atributo de abertura na janela do browser. Além disso, tem a capacidade de aceitar a especificação de ligação.
A propriedade “href” determina o endereço Web associado à hiperligação, enquanto a propriedade “target” estabelece o destino pretendido da hiperligação, que pode ser uma janela ou moldura específica dentro do mesmo documento.
import React from "react";
import { AnchorButton } from "@blueprintjs/core";
function App() {
return (
<div>
<AnchorButton
href="https://example.com/"
intent="primary"
text="Click Me"
target="_blank"
/>
</div>
);
}
export default App;
O bloco de código mencionado acima produz a renderização de um componente AnchorButton. O atributo href do componente possui um valor de " https://example.com/ " e o seu atributo target foi definido como “\_blank”, o que significa que a hiperligação será aberta noutro separador ou janela do browser.
O Blueprint UI Toolkit incorpora um componente reutilizável conhecido como “Cartão”, que serve para apresentar informações num formato esteticamente agradável.
O componente Cartão requer dois parâmetros: uma propriedade “interactiva” e uma propriedade “elevação”. A propriedade “elevation” regula a intensidade da sombra produzida pelo cartão, sendo que valores mais elevados resultam num impacto de sombra mais pronunciado.
A propriedade “interactiva” pode receber um valor booleano como entrada. Se este valor for definido como verdadeiro, ativa a funcionalidade que permite aos utilizadores passar o cursor sobre o cartão ou clicar nele para fins de interação. Consequentemente, o cartão responderá a quaisquer entradas do utilizador.
Por exemplo:
import React from "react";
import { Card, Elevation } from "@blueprintjs/core";
function App() {
return (
<div>
<Card interactive={true} elevation={Elevation.TWO}>
<h2>This is a Card</h2>
<p>This is some content in my card</p>
</Card>
</div>
);
}
export default App;
O componente Cartão apresenta uma atribuição de título e algum material textual. A propriedade interatividade é designada como verdadeira.
O componente “Elevação”, que é importado de “@blueprintjs/core”, é um conjunto definido de valores que determina o nível de sombreamento de um componente.
O tipo de enumeração “Elevação” tem vários valores possíveis, que são os seguintes
A definição da elevação como zero anula efetivamente a presença de uma sombra para este componente específico.
Elevação.ONE é uma definição que determina a intensidade das sombras numa cena, sendo que valores mais elevados resultam em sombras mais profundas e mais pronunciadas.
Elevação.DOIS é um parâmetro que determina o nível de detalhe da sombra na cena. Define a profundidade da sombra, que se refere à distância entre a superfície em que a sombra é projectada e o ponto em que a sombra termina. Um valor de elevação mais alto resultará em sombras mais profundas com bordas mais definidas, enquanto um valor de elevação mais baixo produzirá sombras mais claras e menos pronunciadas.
A propriedade elevation.THREE estabelece um efeito tridimensional ao determinar o nível das sombras na cena, criando uma sensação de profundidade e dimensionalidade.
Elevation.FOUR estabelece o nível de profundidade da sombra de elevação.
Elevation.FIVE (Elevação.CINCO) é um parâmetro que determina o nível de detalhe da sombra na cena. Controla a quantidade de informação de sombras que será gerada pelo algoritmo de traçado de raios e pode ser ajustado para alcançar um equilíbrio desejado entre fidelidade visual e desempenho.
A renderização do bloco de código acima mencionado resultará na apresentação visual de uma imagem no monitor, que parece ser a seguinte:
Personalizando Componentes do Blueprint UI Toolkit
O Blueprint UI Toolkit fornece uma gama de componentes personalizáveis que podem ser facilmente modificados usando CSS tradicional ou os props fornecidos para alterar sua funcionalidade.
A aparência de um botão pode ser personalizada com a utilização de um nome de classe personalizado passado como uma propriedade?
import React from "react";
import { Button } from "@blueprintjs/core";
function App() {
return (
<div>
<Button text="Click Me" className='my-button'/>
</div>
);
}
export default App;
O bloco de código imbui o botão com uma classe personalizada, permitindo assim a aplicação de CSS para alterar a sua aparência:
.my-button{
border-radius: 10px;
padding: 0.4rem 0.8rem;
}
Ao utilizar estes estilos, o aspeto do seu botão será semelhante ao seguinte:
Há muito mais no Blueprint UI
A lista de componentes acima mencionada não é exaustiva, uma vez que o Blueprint UI fornece elementos adicionais como Alert, Popover e Toast, entre outros. No entanto, com as informações fornecidas, é possível construir um aplicativo React básico utilizando o Blueprint UI.
As opções mencionadas anteriormente abrangem várias técnicas para criar um aplicativo React. Estas incluem a utilização de CSS convencional, SCSS ou SCSS, Tailwind CSS, bem como CSS em bibliotecas JavaScript, entre as quais estão componentes de emoção e estilo.