Blueprint UI là bộ công cụ React UI phổ biến cung cấp một tập hợp các thành phần và kiểu dáng có thể tái sử dụng để xây dựng các ứng dụng web hiện đại. Một trong những tính năng chính của Blueprint UI là hỗ trợ tạo cửa sổ bật lên, cảnh báo và chúc mừng, đây là những thành phần thiết yếu để hiển thị thông tin và phản hồi cho người dùng.
Cài đặt bản thiết kế
Để bắt đầu sử dụng Blueprint UI, trước tiên bạn cần cài đặt nó. Bạn có thể làm điều này với bất kỳ trình quản lý gói nào bạn chọn.
Để cài đặt nó bằng npm, trình quản lý gói JavaScript, hãy chạy lệnh sau trong terminal của bạn:
npm install @blueprintjs/core
Sau khi cài đặt giao diện người dùng Blueprint, bạn cần nhập tệp CSS từ thư viện:
@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";
Bằng cách nhập các tệp này, bạn sẽ có thể tích hợp các kiểu giao diện người dùng Blueprint với các thành phần mà giao diện người dùng Blueprint cung cấp.
Tạo cửa sổ bật lên với giao diện người dùng Blueprint
Cửa sổ bật lên là chú giải công cụ xuất hiện khi người dùng di chuột qua hoặc nhấp vào một mục. Họ cung cấp cho người dùng thông tin hoặc tùy chọn bổ sung.
Để tạo cửa sổ bật lên trong React bằng Blueprint UI, bạn cần cài đặt thành phần Blueprint UI Popover2.
Để thực hiện việc này, hãy chạy đoạn mã sau trong thiết bị đầu cuối của bạn:
npm install --save @blueprintjs/popover2
Hãy nhớ nhập biểu định kiểu của gói vào tệp CSS:
@import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
Sau khi nhập biểu định kiểu, bạn có thể sử dụng thành phần Popover2 để tạo cửa sổ bật lên trong ứng dụng của mình.
Ví dụ:
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;
Mã này tạo một cửa sổ bật lên bằng cách sử dụng thành phần Popover2. Nó cũng định nghĩa một biến popoverContent chứa mã JSX cho nội dung popover.
Thành phần Popover2 lấy giá trị của popoverContent làm giá trị của thuộc tính nội dung. Thuộc tính nội dung xác định nội dung được hiển thị trong cửa sổ bật lên. Ở đây thành phần Popover2 bao bọc thành phần Nút. Điều này làm cho một cửa sổ bật lên xuất hiện khi nhấp vào nút.
Cửa sổ bật lên trông đơn giản như được hiển thị ở đây:
Bạn có thể tạo kiểu cho nội dung popover bằng cách chuyển thuộc tính className tới mã JSX popoverContent:
const popoverContent = (
<div className="popover">
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);
Sau đó, bạn có thể xác định một lớp CSS trong tệp CSS của mình:
.popover {
padding: 1rem;
background-color: #e2e2e2;
font-family: cursive;
}
Bây giờ cửa sổ bật lên sẽ trông đẹp hơn một chút:
Thành phần Popover2 có một số đạo cụ giúp bạn định cấu hình nó theo nhu cầu của mình. Một số đạo cụ này là popoverClassName, onInteraction, isOpen, Minimal và Vị trí.
Khung vị trí chỉ định vị trí ưa thích của cửa sổ bật lên so với mục tiêu. Các giá trị có sẵn của nó là:
- tự động
- khởi động tự động
- tự động chấm dứt
- đỉnh cao
- bắt đầu trước
- Cao cấp nhất
- đáy
- bắt đầu từ dưới cùng
- cấp dưới
- Bình thường
- khởi đầu đúng đắn
- cuối bên phải
- bên trái
- bắt đầu trái
- đầu bên trái
Với popoverClassName bạn có thể xác định tên lớp CSS cho phần tử popover. Trước tiên, bạn sẽ tạo một lớp CSS trong tệp CSS của mình để sử dụng prop.
Ví dụ:
.custom-popover {
background-color: #e2e2e2;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
border-radius: 12px;
padding: 1rem;
}
Sau khi tạo lớp CSS, hãy sử dụng thuộc tính popoverClassName để áp dụng kiểu tùy chỉnh cho thành phần Popover2:
<Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Click Me" />
</Popover2>
Điều khiển chống đỡ tối thiểu theo phong cách popover. Sự hỗ trợ có một giá trị logic. Nếu được đặt thành true, cửa sổ bật lên sẽ có kiểu dáng tối giản, không có mũi tên và giao diện hộp đơn giản.
Tạo cảnh báo
Cảnh báo là những thông báo xuất hiện trên màn hình để thông báo cho người dùng những thông tin hoặc hành động quan trọng. Chúng thường được sử dụng để hiển thị các thông báo lỗi, thành công hoặc cảnh báo.
Tạo cảnh báo trong Giao diện người dùng Blueprint cũng tương tự như tạo cảnh báo với Giao diện người dùng Chakra. Bạn sẽ sử dụng thành phần Cảnh báo để tạo cảnh báo trong ứng dụng React của mình bằng Giao diện người dùng Blueprint.
Đây là một ví dụ:
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;
Ví dụ này cho thấy cách nhập thành phần Cảnh báo từ gói @blueprintjs/core. Thành phần Alert hiển thị thông báo cảnh báo trên màn hình. Nó cũng yêu cầu ba đạo cụ: isOpen, onClose và ConfirmButtonText.
Thuộc tính isOpen xác định xem cảnh báo có hiển thị hay không. Đặt thành true để hiển thị cảnh báo hoặc false để ẩn cảnh báo. Thuộc tính onClose là hàm gọi lại chạy khi người dùng đóng cảnh báo.
Cuối cùng, thuộc tính confirmButtonText chỉ định văn bản hiển thị trên nút xác nhận.
Thông báo cảnh báo trong ví dụ này sẽ trông như thế này:
Nâng ly chúc mừng với giao diện người dùng Blueprint
Lời chúc mừng là thông báo xuất hiện trên màn hình để thông báo cho người dùng về thông tin hoặc sự kiện quan trọng. Chúng tương tự như cảnh báo nhưng thường ít xâm phạm hơn và biến mất nhanh chóng.
Để nâng ly chúc mừng trong React bằng Blueprint UI, hãy sử dụng thành phần OverlayToaster. Thành phần OverlayToaster tạo một phiên bản Toaster, sau đó được sử dụng để tạo các thông báo chúc mừng riêng lẻ.
Ví dụ:
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;
Khối mã ở trên sử dụng phương thức OverlayToaster.create để tạo một phiên bản nướng bánh mì và xác định vị trí của nó bằng thuộc tính vị trí.
Nó cũng định nghĩa hàm showToast. Hàm này sử dụng phương thức show của đối tượng toasterInstance để hiển thị bánh mì nướng khi được gọi. Phương thức show lấy một đối tượng có thông báo, ý định, thời gian chờ, isCloseButtonShown và các đạo cụ biểu tượng.
Thông báo chỉ định nội dung văn bản của bánh mì nướng, trong khi prop ý định chỉ định loại bánh mì nướng. Phong cách của bánh mì nướng sẽ thay đổi tùy thuộc vào giá trị của nó.
Bạn có thể kiểm soát thời gian hiển thị cửa sổ bật lên bằng thuộc tính thời gian chờ. Thuộc tính biểu tượng chỉ định thành phần biểu tượng sẽ hiển thị trong bánh mì nướng. Với thuộc tính isCloseButtonShown, bạn có thể kiểm soát xem nút đóng có hiển thị trong cửa sổ bật lên hay không.
Khối mã ở trên sẽ tạo ra một bánh mì nướng đẹp mắt khi nhấp vào nút như bạn có thể thấy trong hình bên dưới.
Nếu bạn muốn tạo thông báo bật lên hấp dẫn trong ứng dụng React của mình, Blueprint UI là một lựa chọn tuyệt vời. Nó cung cấp nhiều thành phần được xác định trước có thể được sử dụng để tạo thông báo phù hợp với phong cách của ứng dụng.
Tuy nhiên, nếu bạn đang làm việc trên một dự án nhỏ không yêu cầu tất cả các tính năng của Blueprint UI, React Toastify là một giải pháp thay thế gọn nhẹ để tạo thông báo đẹp mắt.
Cải thiện trải nghiệm người dùng với cửa sổ bật lên, cửa sổ bật lên và cảnh báo
Bạn đã học cách tạo cửa sổ bật lên, cảnh báo và cửa sổ bật lên chúc mừng trong React bằng giao diện người dùng Blueprint. Các thành phần này cần thiết để cung cấp thông tin và phản hồi cho người dùng và có thể cải thiện đáng kể trải nghiệm người dùng đối với ứng dụng. Bạn có thể dễ dàng tạo các thành phần này bằng cách sử dụng thông tin bạn nhận được với nỗ lực và tùy chỉnh tối thiểu.
