Skip to main content

Bài 14-Cái nút

Các nút cho phép người dùng thực hiện hành động và đưa ra lựa chọn chỉ bằng một lần chạm.hình ảnhDành cho Figma . Một bộ UI lớn với hơn 600 thành phần Material UI, MUI X, Joy UI được làm thủ công 🎨.quảng cáo của MUI

Các nút truyền đạt các hành động mà người dùng có thể thực hiện. Chúng thường được đặt trên khắp UI của bạn, ở những nơi như:

Nút cơ bản​

Có Buttonba biến thể: văn bản (mặc định), có nội dung và có phác thảo.

ChữChứa đựngĐã phác thảo

Mở rộng mã

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

Nhấn Enterđể bắt đầu chỉnh sửa

Nút văn bản​

Các nút văn bản thường được sử dụng cho các hành động ít được phát âm hơn, bao gồm các hành động nằm trong hộp thoại, trong thẻ. Trong thẻ, các nút văn bản giúp duy trì sự nhấn mạnh vào nội dung thẻ.

Sơ đẳngTàn tậtLiên kết

Mở rộng mã

<Button>Primary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons">Link</Button>

Nhấn Enterđể bắt đầu chỉnh sửa

Nút chứa​

Các nút chứa được nhấn mạnh nhiều, được phân biệt bằng cách sử dụng độ cao và độ lấp đầy. Chúng chứa các hành động chính cho ứng dụng của bạn.

Chứa đựngTàn tậtLiên kết

Mở rộng mã

<Button variant="contained">Contained</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" href="#contained-buttons">
  Link
</Button>

Nhấn Enterđể bắt đầu chỉnh sửa

Bạn có thể loại bỏ độ cao bằng disableElevationchân vịt.

Vô hiệu hóa độ cao

Mở rộng mã

<Button variant="contained" disableElevation>
  Disable elevation
</Button>

Nhấn Enterđể bắt đầu chỉnh sửa

Nút được phác thảo​

Các nút được phác thảo là các nút có độ nhấn mạnh trung bình. Chúng chứa các hành động quan trọng nhưng không phải là hành động chính trong ứng dụng.

Các nút được viền cũng là một giải pháp thay thế ít nhấn mạnh hơn cho các nút chứa hoặc là giải pháp thay thế nhấn mạnh hơn cho các nút văn bản.

Sơ đẳngTàn tậtLiên kết

Mở rộng mã

<Button variant="outlined">Primary</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" href="#outlined-buttons">
  Link
</Button>

Nhấn Enterđể bắt đầu chỉnh sửa

Xử lý nhấp chuột​

Tất cả các thành phần đều chấp nhận onClicktrình xử lý được áp dụng cho phần tử DOM gốc.

<Button
  onClick={() => {
    alert('clicked');
  }}
>
  Click me
</Button>

Sao chép

Lưu ý rằng tài liệu tránh đề cập đến các prop gốc (có rất nhiều) trong phần API của các thành phần.

Màu sắc​

Sơ trungThành côngLỗi

Mở rộng mã

<Button color="secondary">Secondary</Button>
<Button variant="contained" color="success">
  Success
</Button>
<Button variant="outlined" color="error">
  Error
</Button>

Nhấn Enterđể bắt đầu chỉnh sửa

Ngoài việc sử dụng màu nút mặc định, bạn có thể thêm màu tùy chỉnh hoặc vô hiệu hóa bất kỳ màu nào bạn không cần. Xem ví dụ Thêm màu mới để biết thêm thông tin.

Kích thước​

Đối với các nút lớn hơn hoặc nhỏ hơn, hãy sử dụng sizeđạo cụ.

Bé nhỏTrung bìnhLớn

Bé nhỏTrung bìnhLớn

Bé nhỏTrung bìnhLớn

Hiển thị mã

Các nút có biểu tượng và nhãn​

Đôi khi bạn có thể muốn có biểu tượng cho một số nút nhất định để nâng cao UX của ứng dụng vì chúng ta nhận dạng logo dễ hơn văn bản thuần túy. Ví dụ: nếu bạn có nút xóa, bạn có thể gắn nhãn cho nút đó bằng biểu tượng thùng rác.

Xóa bỏGửi

Mở rộng mã

<Button variant="outlined" startIcon={<DeleteIcon />}>
  Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
  Send
</Button>

Nhấn Enterđể bắt đầu chỉnh sửa

Nút biểu tượng​

Các nút biểu tượng thường được tìm thấy trên thanh ứng dụng và thanh công cụ.

Biểu tượng cũng phù hợp với các nút chuyển đổi cho phép chọn hoặc bỏ chọn một lựa chọn duy nhất, chẳng hạn như thêm hoặc xóa ngôi sao vào một mục.

Mở rộng mã

<IconButton aria-label="delete">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
  <DeleteIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
  <AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
  <AddShoppingCartIcon />
</IconButton>

Nhấn Enterđể bắt đầu chỉnh sửa

Kích thước​

Để có các nút biểu tượng lớn hơn hoặc nhỏ hơn, hãy sử dụng sizeprop.

Mở rộng mã

<IconButton aria-label="delete" size="small">
  <DeleteIcon fontSize="inherit" />
</IconButton>
<IconButton aria-label="delete" size="small">
  <DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="delete" size="large">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" size="large">
  <DeleteIcon fontSize="inherit" />
</IconButton>

Nhấn Enterđể bắt đầu chỉnh sửa

Màu sắc​

Sử dụng colorprop để áp dụng bảng màu chủ đề cho thành phần.

Mở rộng mã

<IconButton aria-label="fingerprint" color="secondary">
  <Fingerprint />
</IconButton>
<IconButton aria-label="fingerprint" color="success">
  <Fingerprint />
</IconButton>

Nhấn Enterđể bắt đầu chỉnh sửa

Tải tập tin lên​

Để tạo nút tải tệp lên, hãy biến nút thành nhãn bằng cách sử dụng component="label"rồi tạo đầu vào ẩn trực quan với loại file.

Tải lên các tập tin

Mở rộng mã

<Button
  component="label"
  role={undefined}
  variant="contained"
  tabIndex={-1}
  startIcon={<CloudUploadIcon />}
>
  Upload files
  <VisuallyHiddenInput
    type="file"
    onChange={(event) => console.log(event.target.files)}
    multiple
  />
</Button>

Nhấn Enterđể bắt đầu chỉnh sửa

Tùy chỉnh​

Sau đây là một số ví dụ về việc tùy chỉnh thành phần. Bạn có thể tìm hiểu thêm về điều này trong trang tài liệu ghi đè .

CSS tùy chỉnhKhởi động

Hiển thị mã

🎨 Nếu bạn đang tìm kiếm cảm hứng, bạn có thể xem các ví dụ tùy chỉnh của MUI Treasury .

Nút phức tạp​

Các nút văn bản, nút chứa, nút hành động nổi và nút biểu tượng được xây dựng trên cùng một thành phần: . ButtonBaseBạn có thể tận dụng thành phần cấp thấp hơn này để xây dựng các tương tác tùy chỉnh.

Bữa sángBánh mì kẹp thịtMáy ảnh

Hiển thị mã

Thư viện định tuyến của bên thứ ba​

Một trường hợp sử dụng thường xuyên là thực hiện điều hướng chỉ trên máy khách, không có HTTP khứ hồi đến máy chủ. ButtonBaseThành phần cung cấp componentprop để xử lý trường hợp sử dụng này. Sau đây là hướng dẫn chi tiết hơn .

Hạn chế​

Con trỏ không được phép​

Thành phần ButtonBase thiết lập pointer-events: none;các nút bị vô hiệu hóa, ngăn không cho con trỏ bị vô hiệu hóa xuất hiện.

Nếu bạn muốn sử dụng not-allowed, bạn có hai lựa chọn:

  1. Chỉ CSS . Bạn có thể xóa kiểu pointer-events ở trạng thái vô hiệu hóa của <button>phần tử:
.MuiButtonBase-root:disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

Sao chép

Tuy nhiên:

  1. Thay đổi DOM . Bạn có thể gói nút:
<span style={{ cursor: 'not-allowed' }}>
  <Button component={Link} disabled>
    disabled
  </Button>
</span>

Sao chép

Điều này có lợi thế là hỗ trợ bất kỳ phần tử nào, ví dụ như <a>phần tử liên kết.

API thử nghiệm​

Nút tải​

@mui/labcung cấp các nút tải có thể hiển thị trạng thái tải và vô hiệu hóa tương tác.

NộpĐang tải…Lấy dữ liệuCứu

Mở rộng mã

<LoadingButton loading variant="outlined">
  Submit
</LoadingButton>
<LoadingButton loading loadingIndicator="Loading…" variant="outlined">
  Fetch data
</LoadingButton>
<LoadingButton
  loading
  loadingPosition="start"
  startIcon={<SaveIcon />}
  variant="outlined"
>
  Save
</LoadingButton>

Nhấn Enterđể bắt đầu chỉnh sửa

Bật công tắc tải để xem sự chuyển đổi giữa các trạng thái khác nhau.

Đang tải

Tàn tậtĐang tải…Lấy dữ liệuGửiCứu

Tàn tậtĐang tải…Lấy dữ liệuGửiCứu

Hiển thị mã

Không có kiểu dáng​

Sử dụng Nút UI cơ sở để sở hữu hoàn toàn thiết kế của thành phần, không có kiểu UI Material hoặc UI Joy nào để ghi đè. Phiên bản không có kiểu của thành phần này là lựa chọn lý tưởng cho tùy chỉnh lớn với kích thước gói nhỏ hơn.

Giao diện lập trình ứng dụng (API)​

Xem tài liệu bên dưới để biết thông tin tham khảo đầy đủ về tất cả các thuộc tính và lớp có sẵn cho các thành phần được đề cập ở đây.

5:11:14 AM