Tạo cảnh báo tùy chỉnh trong ứng dụng React của bạn với giao diện người dùng Chakra
Cảnh báo là thông báo hiển thị trên trang web/ứng dụng web để truyền tải thông tin quan trọng đến người dùng. Chúng đóng một vai trò quan trọng trong các ứng dụng web. Có nhiều cách để tạo cảnh báo trong React; Chakra UI giúp quá trình này trở nên dễ dàng và hiệu quả.
Chakra UI là một thư viện thành phần phổ biến cho React cung cấp một tập hợp các thành phần UI có thể tùy chỉnh và có thể truy cập.
Mục Lục
Cài đặt giao diện người dùng Chakra
Để sử dụng thư viện Chakra UI, một trong nhiều thư viện thành phần phản ứng, trước tiên bạn cần cài đặt nó. Bạn có thể cài đặt nó bằng cách chạy lệnh terminal sau trong thư mục của dự án node.js:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Ngoài ra, bạn có thể cài đặt Chakra UI bằng Yarn. Để làm như vậy, hãy chạy lệnh sau:
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Thiết lập giao diện người dùng Chakra
Sau khi cài đặt Chakra UI, bạn phải cung cấp nó trong ứng dụng của mình. Để làm được điều này, bạn cần thiết lập nhà cung cấp luân xa thành phần.
Các nhà cung cấp luân xa thành phần là thành phần cấp cao nhất mà thư viện Chakra UI cung cấp. Nó bao bọc toàn bộ ứng dụng và cung cấp bối cảnh chủ đề và kiểu dáng cho tất cả các thành phần của nó.
Để thiết lập nhà cung cấp luân xa thành phần, nhập nó từ @chakra-ui/phản ứng:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ChakraProvider } from '@chakra-ui/react'ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>
)
Các nhà cung cấp luân xa thành phần hỗ trợ một chủ đề chống đỡ. vượt qua chủ đề chống đỡ cho nhà cung cấp luân xa thành phần đảm bảo rằng tất cả các thành phần Giao diện người dùng Chakra trong ứng dụng có thể truy cập bối cảnh kiểu dáng và chủ đề được cung cấp. Các chủ đề chống đỡ là tùy chọn; nếu bạn không vượt qua nó, Chakra UI sẽ sử dụng một chủ đề mặc định.
Tạo cảnh báo tùy chỉnh bằng các thành phần cảnh báo
Chakra UI cung cấp bốn thành phần cho phép bạn tạo cảnh báo tùy chỉnh: Báo động, Cảnh báoBiểu tượng, Thông báoTiêu đềVà Cảnh báoMô tả.
Để tạo thông báo cảnh báo của bạn, hãy nhập các thành phần này từ thư viện Chakra UI và sử dụng chúng như sau:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'function App() {
return (
<div>
<Alert status='success'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App
Sau khi nhập các thành phần, Báo động thành phần hiển thị một thông báo cho người dùng. Nó có một trạng thái prop được đặt thành “success”, cho biết thông báo đó là thông báo thành công.
Có ba trạng thái khác: “thông tin”, “lỗi” và “cảnh báo”. Bảng màu và biểu tượng mà cảnh báo sử dụng sẽ phụ thuộc vào trạng thái tin nhắn.
Các Báo động thành phần chứa ba phần tử con: Cảnh báoBiểu tượng, Thông báoTiêu đềVà Cảnh báoMô tả. Các Cảnh báoBiểu tượng thành phần hiển thị một biểu tượng nhỏ bên cạnh tin nhắn, Thông báoTiêu đề hiển thị thông báo chính và Cảnh báoMô tả hiển thị một mô tả chi tiết hơn về tin nhắn.
Khối mã trước đó sẽ tạo ra một cảnh báo giống như sau:
Tùy chỉnh thông báo cảnh báo bằng Prop biến thể
Để tùy chỉnh giao diện của thông báo cảnh báo, hãy sử dụng khác nhau chỗ dựa của Báo động thành phần. Các khác nhau prop xác định giao diện trực quan của thông báo cảnh báo và xác định bảng màu, biểu tượng và độ đậm phông chữ của thông báo dựa trên giá trị bạn chuyển cho nó.
Các khác nhau prop chấp nhận một số giá trị chuỗi như tế nhị, chất rắn, giọng trái, đầu giọng, giọng phảiVà trọng âm cuối. Mỗi giá trị đại diện cho một kiểu trực quan khác nhau của thông báo cảnh báo.
Dưới đây là một ví dụ về bốn thành phần cảnh báo với các biến thể khác nhau:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} from '@chakra-ui/react'function App() {
return (
<div>
<Flex justify='center' gap='3' direction='column' mt='4'>
<Alert status='success' variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='subtle'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='top-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='left-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</Flex>
</div>
)
}
export default App
Kết xuất khối mã ở trên sẽ hiển thị cảnh báo tùy chỉnh như sau:
Tùy chỉnh thông báo cảnh báo của bạn bằng cách sử dụng className Prop
Thay vì gắn bó với giao diện mặc định của thông báo cảnh báo, bạn có thể tùy chỉnh nó bằng cách sử dụng tên lớp chống đỡ. Bạn sử dụng tên lớp prop để xác định lớp CSS và áp dụng kiểu tùy chỉnh của bạn cho thông báo cảnh báo.
Ví dụ:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'function App() {
return (
<div>
<Alert status='success' className='alert'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App;
Trong ví dụ này, thành phần cảnh báo có lớp CSS “cảnh báo”. Sau khi xác định lớp CSS, bạn có thể xác định kiểu của mình trong tệp CSS.
Như vậy:
.alert {
color: red;
font-family: cursive;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
Đoạn mã trên sẽ áp dụng các kiểu CSS cho thành phần cảnh báo. Nếu bạn đã quen thuộc với các đạo cụ kiểu Chakra UI, bạn nên sử dụng chúng để tạo kiểu cho các thông báo cảnh báo thay vì tên lớp chống đỡ.
Sau khi áp dụng các kiểu CSS ở trên, thành phần cảnh báo sẽ hiển thị như trong hình bên dưới:
Kích hoạt thông báo cảnh báo để phản hồi sự kiện của người dùng
Bạn đã tạo một thành phần cảnh báo luôn hiển thị thông báo cảnh báo trên màn hình. Tuy nhiên, để nâng cao trải nghiệm người dùng, bạn có thể kích hoạt thông báo cảnh báo để phản hồi các sự kiện cụ thể mà người dùng bắt đầu, bằng cách sử dụng Trình xử lý sự kiện JavaScript. Những sự kiện này có thể bao gồm nhấp vào nút, gửi biểu mẫu hoặc gặp lỗi.
Để kích hoạt thông báo cảnh báo của bạn khi phản hồi các sự kiện, hãy sử dụng trạng thái React và trưng bày chỗ dựa của các thành phần giao diện người dùng Chakra.
Ví dụ:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} from '@chakra-ui/react'function App() {
const [display, setDisplay] = React.useState('none');
function notify() {
setDisplay('flex');
}
function close() {
setDisplay('none');
}
return (
<div className="app">
<Alert status='success' display={display} variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
<CloseButton position='absolute' top='6px' right='6px' onClick={close}/>
</Alert>
<Button onClick={notify} mt='4'>Click Me</Button>
</div>
)
}
export default App
Khối mã này quản lý trạng thái hiển thị thông báo với sử dụngState cái móc. Nó đặt trạng thái ban đầu của màn hình thông báo thành “không”, ẩn thông báo.
Khi người dùng nhấp vào Cái nútnó gọi thông báo chức năng. Gọi hàm thông báo sẽ thay đổi giá trị của trưng bày trạng thái từ “none” thành “flex.”, hiển thị thông báo.
Khi người dùng nhấp vào nút đóng, nó gọi hàm đóng. Nó thay đổi trạng thái của màn hình trở lại thành “không” để ẩn thông báo.
Bây giờ bạn có thể tạo cảnh báo tùy chỉnh
Bây giờ bạn đã học cách tạo cảnh báo tùy chỉnh trong ứng dụng React của mình bằng Chakra UI. Với Chakra UI, việc tạo cảnh báo tùy chỉnh trong React rất dễ dàng và trực quan, cho phép chúng tôi cung cấp thông tin rõ ràng và ngắn gọn cho người dùng của mình. Giao diện người dùng Chakra cung cấp nhiều thành phần giao diện người dùng có thể tùy chỉnh và có thể truy cập khác để giúp bạn xây dựng các ứng dụng React tuyệt vời.