Đế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

Điều khiển phân đoạn

Dùng khi cùng một danh sách được xem theo cách khác — chọn một trong hai đến bốn cách xem.

Điều hướng

Xem trước trực tiếp

Nguồn

<div class="dc-sg-wrap">
  <div class="dc-sg" role="group" aria-label="주문 상태로 보기">
    <input class="dc-sg__in" type="radio" name="dc-sg-state" id="dc-sg-all" checked>
    <label class="dc-sg__lb" for="dc-sg-all">전체</label>
    <input class="dc-sg__in" type="radio" name="dc-sg-state" id="dc-sg-doing">
    <label class="dc-sg__lb" for="dc-sg-doing">진행중</label>
    <input class="dc-sg__in" type="radio" name="dc-sg-state" id="dc-sg-done">
    <label class="dc-sg__lb" for="dc-sg-done">완료</label>
  </div>
</div>
.dc-sg-wrap {
  padding: var(--dc-4);
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-sg {
  position: relative;
  display: flex; gap: 3px;
  padding: 3px;
  border-radius: var(--dc-r-full);
  background: var(--dc-sunken);
}
.dc-sg__in {
  position: absolute;
  width: 1px; height: 1px; margin: 0; opacity: 0;
  pointer-events: none;
}
.dc-sg__lb {
  flex: 1 1 0; min-width: 0;
  display: grid; place-items: center;
  min-height: 44px; padding: 0 var(--dc-2);
  border-radius: var(--dc-r-full);
  color: var(--dc-text-sub);
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-sg__in:checked + .dc-sg__lb {
  background: var(--dc-surface); color: var(--dc-text);
  box-shadow: var(--dc-sh-1);
}
.dc-sg__in:focus-visible + .dc-sg__lb {
  outline: 2px solid var(--dc-brand); outline-offset: 2px;
}
.dc-sg--solid .dc-sg__in:checked + .dc-sg__lb {
  background: var(--dc-brand); color: var(--dc-text-on);
}
.dc-sg--block { border-radius: var(--dc-r-md); }
.dc-sg--block .dc-sg__lb { border-radius: var(--dc-r-sm); }

Cách dùng

  • Hai đến bốn ô; từ năm ô trở lên hãy đổi sang tab cuộn hoặc danh sách chọn
  • Dùng để lọc một danh sách, không dùng để thay cả màn hình — đó là việc của tab
  • Luôn có một ô được chọn; ở đây không có trạng thái rỗng
  • Giữ nhãn dài gần bằng nhau — ô rộng như nhau nên chỉ nhãn dài bị cắt

Điểm cần lưu ý

  • Radio bị ẩn vẫn phải di chuyển được bằng phím mũi tên; giữ dòng chuyển focus-visible sang label
  • Đừng hạ chiều cao ô bấm xuống dưới 44px
  • Đặt aria-label cho thẻ bọc role="group" để nói rõ đang chọn gì

Tiếp theo