Material-UI là một thư viện UI phổ biến trong hệ sinh thái React, cung cấp nhiều thành phần để giúp các nhà phát triển tạo ra giao diện người dùng thân thiện. Bài viết này sẽ đi sâu vào thành phần Menu của Material-UI, trình bày cách sử dụng linh hoạt thành phần này trong các tình huống khác nhau để cải thiện trải nghiệm người dùng.

I. Tổng Quan Về Thành Phần Menu

1. Giới Thiệu Thành Phần

Thành phần `Menu` trong Material-UI được sử dụng để hiển thị một tập hợp các tùy chọn thao tác, thường kết hợp với nút hoặc yếu tố kích hoạt khác. `Menu` giúp người dùng nhanh chóng chọn thao tác cần thiết và tự động đóng sau khi hoàn tất, từ đó tối ưu hóa trải nghiệm tương tác.

Một `Menu` cơ bản thường mở ở phía trên yếu tố kích hoạt (anchor element). Để đảm bảo rằng các mục menu không vượt quá mép màn hình, `Menu` sẽ tự động điều chỉnh vị trí để toàn bộ hiển thị.

2. Sự Khác Biệt Giữa Menu và Dialog

Mặc dù cả `Menu` và dialog đơn giản (Simple Dialog) đều có thể hiển thị một tập hợp các tùy chọn, nhưng `Menu` phù hợp hơn cho việc chọn nhanh và gọn gàng. Dialog thì phù hợp hơn khi cần cung cấp thêm chi tiết hoặc hỗ trợ thao tác. Ưu điểm của `Menu` là nó không làm gián đoạn bối cảnh hiện tại của người dùng, nhẹ nhàng và tự nhiên hơn.

II. Sử Dụng Thành Phần Menu Cơ Bản

Trong thực tế, `Menu` thường được sử dụng kết hợp với nút. Dưới đây là một ví dụ về thành phần `Menu` cơ bản:

import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

export default function BasicMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id="basic-button"
        aria-controls={open ? 'basic-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleOpen}
      >
        Bảng Điều Khiển
      </Button>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
      >
        <MenuItem onClick={handleClose}>Hồ Sơ</MenuItem>
        <MenuItem onClick={handleClose}>Tài Khoản Của Tôi</MenuItem>
        <MenuItem onClick={handleClose}>Đăng Xuất</MenuItem>
      </Menu>
    </div>
  );
}
  

1. Giải Thích Mã Nguồn

• anchorEl: Đây là yếu tố kích hoạt để định vị `Menu`. `Menu` sẽ mở và căn chỉnh theo vị trí của `anchorEl`.
• handleOpen: Được gọi khi nhấn nút, đặt `anchorEl` là yếu tố nút hiện tại.
• handleClose: Đóng menu và đặt lại `anchorEl` thành `null`.

2. Mô Tả Chức Năng

Khi nhấn nút, menu sẽ mở dưới nút và hiển thị ba mục: `Hồ Sơ`, `Tài Khoản Của Tôi` và `Đăng Xuất`. Khi người dùng nhấn vào bất kỳ mục nào, menu sẽ đóng.

III. Các Cách Sử Dụng Khác Của Menu

Bên cạnh thành phần `Menu` cơ bản, Material-UI còn cung cấp nhiều tính năng nâng cao, cho phép các nhà phát triển tùy chỉnh giao diện và hành vi của menu một cách linh hoạt.

1. Icon Menu: Menu Có Biểu Tượng

Trong một số trường hợp, việc thêm biểu tượng có thể tăng cường hiệu ứng trực quan của các mục menu. Sử dụng thuộc tính `ListItemIcon` của thành phần `MenuItem`, chúng ta có thể dễ dàng thêm biểu tượng vào các mục menu. Dưới đây là một ví dụ về `Menu` có biểu tượng:

import * as React from 'react';
import Divider from '@mui/material/Divider';
import Paper from '@mui/material/Paper';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import Typography from '@mui/material/Typography';
import ContentCut from '@mui/icons-material/ContentCut';
import ContentCopy from '@mui/icons-material/ContentCopy';
import ContentPaste from '@mui/icons-material/ContentPaste';
import Cloud from '@mui/icons-material/Cloud';

export default function IconMenu() {
  return (
    <Paper sx={{ width: 320, maxWidth: '100%' }}>
      <MenuList>
        <MenuItem>
          <ListItemIcon>
            <ContentCut fontSize="small" />
          </ListItemIcon>
          <ListItemText>Cắt</ListItemText>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            ⌘X
          </Typography>
        </MenuItem>
        <MenuItem>
          <ListItemIcon>
            <ContentCopy fontSize="small" />
          </ListItemIcon>
          <ListItemText>Sao chép</ListItemText>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            ⌘C
          </Typography>
        </MenuItem>
        <MenuItem>
          <ListItemIcon>
            <ContentPaste fontSize="small" />
          </ListItemIcon>
          <ListItemText>Dán</ListItemText>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            ⌘V
          </Typography>
        </MenuItem>
        <Divider />
        <MenuItem>
          <ListItemIcon>
            <Cloud fontSize="small" />
          </ListItemIcon>
          <ListItemText>Clipboard Web</ListItemText>
        </MenuItem>
      </MenuList>
    </Paper>
  );
}
  

2. Giải Thích Mã Nguồn

• ListItemIcon: Được sử dụng để thêm biểu tượng trước mỗi mục menu, tăng cường khả năng nhận biết.
• Divider: Đường phân cách, dùng để tách biệt các khu vực chức năng khác nhau trong menu.
• Typography: Hiển thị tổ hợp phím tắt (ví dụ: ⌘X, ⌘C), giúp tăng hiệu suất thao tác của người dùng.

3. Trường Hợp Áp Dụng

Menu có biểu tượng thường được sử dụng trong các ứng dụng phức tạp như trình soạn thảo văn bản, quản lý tệp, v.v. Thông qua sự kết hợp giữa biểu tượng và văn bản, người dùng có thể nhanh chóng hiểu rõ chức năng của từng thao tác.

IV. Tùy Chỉnh Thành Phần Menu

Ngoài các chức năng cơ bản, `Menu` còn cung cấp một số thuộc tính nâng cao để giúp các nhà phát triển tùy chỉnh theo nhu cầu của dự án.

1. Điều Chỉnh Vị Trí Menu

Trong một số trường hợp, `Menu` có thể gần mép màn hình do bố cục trang. Khi đó, menu sẽ tự động sắp xếp lại để đảm bảo tất cả các tùy chọn đều nhìn thấy. Các nhà phát triển cũng có thể sử dụng thuộc tính `anchorOrigin` và `transformOrigin` để tùy chỉnh vị trí và hướng của menu.

<Menu
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
  ...
/>
  

2. Tùy Chỉnh Kiểu Của Mục Menu

Thành phần `MenuItem` hỗ trợ tùy chỉnh kiểu thông qua thuộc tính `sx`, ví dụ như thay đổi màu nền, màu chữ, v.v.:

<MenuItem sx={{ backgroundColor: 'lightblue', color: 'black' }}>
  Phong Cách Tùy Chỉnh
</MenuItem>
  

Thông qua tùy chỉnh kiểu, các nhà phát triển có thể đảm bảo `Menu` phù hợp với phong cách thiết kế tổng thể.