सेगमेन्ट टगल
एउटै सूचीलाई कुन दृष्टिले हेर्ने छान्ने ठाउँ — विकल्प दुईदेखि चारसम्म भएको र छान्नासाथ स्क्रिन बदलिने अवस्थामा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<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;
}कसरी प्रयोग गर्ने
- विकल्प दुईदेखि चारसम्म; पाँचभन्दा बढी भए ड्रपडाउन वा ट्याब प्रयोग गर्नु
- लेबल एक-दुई शब्दमा र लम्बाइ मिल्दो राख्नु
- छान्नासाथ नतिजा बदलिनुपर्छ; 'लागू' बटन चाहिने भए यो टुक्रा होइन
ध्यान दिनुपर्ने कुरा
- रेडियो input बाट बनाउनु, तब किबोर्ड एरो र स्क्रिन रिडरले एउटै समूह मान्छ
- प्रत्येक खण्डको उचाइ कम्तीमा 44px; साँघुरो भए छेउमा गलत थिचिन्छ