Nút chuyển phân đoạn
Dùng để chọn cách nhìn một danh sách — từ hai đến bốn lựa chọn, và màn hình đổi ngay khi chọn.
Xem trước trực tiếp
Nguồn
<fieldset class="dc-seg">
<legend class="dc-sr">작업 상태로 보기</legend>
<div class="dc-seg__track">
<input class="dc-seg__in" type="radio" name="dc-seg-state" id="dc-seg-all" checked />
<label class="dc-seg__lb" for="dc-seg-all">전체</label>
<input class="dc-seg__in" type="radio" name="dc-seg-state" id="dc-seg-run" />
<label class="dc-seg__lb" for="dc-seg-run">진행 중</label>
<input class="dc-seg__in" type="radio" name="dc-seg-state" id="dc-seg-done" />
<label class="dc-seg__lb" for="dc-seg-done">완료</label>
</div>
</fieldset>.dc-seg {
margin: 0;
padding: var(--dc-4);
border: 0;
background: var(--dc-bg);
font-family: var(--dc-font);
}
.dc-seg__track {
display: flex;
gap: 2px;
padding: 3px;
border-radius: var(--dc-r-md);
background: var(--dc-sunken);
}
.dc-seg__in {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.dc-seg__lb {
display: inline-flex;
flex: 1;
align-items: center;
justify-content: center;
gap: var(--dc-1);
min-height: 44px;
padding: 0 var(--dc-3);
border-radius: calc(var(--dc-r-md) - 3px);
color: var(--dc-text-sub);
font-family: var(--dc-font);
font-size: 14px;
font-weight: 600;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-seg__in:checked + .dc-seg__lb {
background: var(--dc-surface);
color: var(--dc-text);
box-shadow: var(--dc-sh-1);
}
.dc-seg__in:focus-visible + .dc-seg__lb {
outline: 2px solid var(--dc-brand);
outline-offset: 2px;
}
.dc-seg__ico {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}Cách dùng
- Hai đến bốn lựa chọn; nhiều hơn năm thì chuyển sang danh sách chọn hoặc tab
- Giữ nhãn một đến hai từ và độ dài gần nhau
- Kết quả phải đổi ngay khi chọn; nếu cần nút Áp dụng thì đây không phải thành phần phù hợp
Điểm cần lưu ý
- Hãy dựng bằng input radio để phím mũi tên và trình đọc coi đó là một nhóm
- Mỗi phân đoạn cao tối thiểu 44px; ô hẹp rất dễ nhấn lệch