सेग्मेन्ट कन्ट्रोल
एउटै सूचीलाई अर्को आँखाले हेर्नुपर्दा — दुई–चार हेर्ने तरिकाबाट एउटा छान्न दिने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<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); }कसरी प्रयोग गर्ने
- दुईदेखि चार कोठा; पाँच पुगे स्क्रोल ट्याब वा छनोट सूचीमा फेर्नुहोस्
- एउटै सूची छान्न (फिल्टर) प्रयोग गर्नुहोस्, पूरा पर्दा फेर्न होइन — त्यो ट्याबको काम हो
- सधैं एक कोठा छानिएको हुनुपर्छ; यहाँ 'कुनै पनि होइन' अवस्था राख्नुहुन्न
- लेबलको लम्बाइ मिलाउनुहोस् — कोठा बराबर चौडा हुँदा लामो लेबल मात्र काटिन्छ
ध्यान दिनुपर्ने कुरा
- लुकाएको रेडियो पनि एरो कीले सर्नुपर्छ; focus-visible लेबलमा पठाउने लाइन नहटाउनुहोस्
- थिच्ने कोठाको उचाइ ४४px भन्दा घटाउनुहुन्न
- role="group" मा aria-label राखी के छान्दै छ भन्ने खुलाउनुहोस्