Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Nhóm nút

Cho vài hành động ngang nhau cùng tác động lên một đối tượng.

Nút và hành động

Xem trước trực tiếp

Nguồn

<div class="dc-bgrp" role="group" aria-label="선택한 문서 작업">
  <button type="button" class="dc-bgrp__btn">복사</button>
  <button type="button" class="dc-bgrp__btn">이동</button>
  <button type="button" class="dc-bgrp__btn">이름 바꾸기</button>
</div>
.dc-bgrp { display: inline-flex; }
.dc-bgrp__btn {
  min-height: 44px; padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-field); border-radius: 0;
  background: var(--dc-surface); color: var(--dc-text);
  font-family: var(--dc-font); font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  transition: background var(--dc-fast);
}
.dc-bgrp__btn:hover { background: var(--dc-sunken); }
.dc-bgrp__btn:focus-visible { position: relative; z-index: 1; }
.dc-bgrp__btn + .dc-bgrp__btn { margin-left: -1px; }
.dc-bgrp__btn:first-child { border-radius: var(--dc-r-sm) 0 0 var(--dc-r-sm); }
.dc-bgrp__btn:last-child { border-radius: 0 var(--dc-r-sm) var(--dc-r-sm) 0; }
.dc-bgrp--vert { flex-direction: column; align-items: stretch; }
.dc-bgrp--vert .dc-bgrp__btn + .dc-bgrp__btn { margin-left: 0; margin-top: -1px; }
.dc-bgrp--vert .dc-bgrp__btn:first-child { border-radius: var(--dc-r-sm) var(--dc-r-sm) 0 0; }
.dc-bgrp--vert .dc-bgrp__btn:last-child { border-radius: 0 0 var(--dc-r-sm) var(--dc-r-sm); }
.dc-bgrp--full { display: flex; width: 100%; }
.dc-bgrp--full .dc-bgrp__btn { flex: 1; }

Cách dùng

  • Chỉ gộp những hành động ngang nhau và cùng đối tượng
  • Ba đến năm nút. Nhiều hơn thì đưa phần còn lại vào menu 'thêm'
  • Đặt aria-label cho nhóm để biết nhóm này thao tác lên cái gì

Điểm cần lưu ý

  • Nếu là chọn lựa (cách xem, khoảng thời gian) thì đó là toggle, không phải nhóm nút
  • Màn hình hẹp nên đổi sang biến thể dọc hoặc toàn chiều ngang; nhãn xuống dòng sẽ làm vỡ đường nối

Tiếp theo