सङ्ख्या स्टेपर
एक-दुई थिचाइमै सकिने सानो सङ्ख्या — परिमाण, व्यक्ति, दिन जस्ता एक-एकले बढ्ने मान।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<div class="dc-stp">
<label class="dc-stp__label" for="dc-stp-qty">수량</label>
<div class="dc-stp__group">
<button class="dc-stp__btn" type="button"><span class="dc-sr">한 개 줄이기</span><span aria-hidden="true">−</span></button>
<input class="dc-stp__input" id="dc-stp-qty" type="number" name="qty" inputmode="numeric" value="2" min="1" max="99" step="1" aria-describedby="dc-stp-qty-help">
<button class="dc-stp__btn" type="button"><span class="dc-sr">한 개 늘리기</span><span aria-hidden="true">+</span></button>
</div>
<p class="dc-stp__help" id="dc-stp-qty-help">한 번에 99개까지 담을 수 있습니다.</p>
</div>.dc-stp {
display: flex; flex-direction: column; gap: var(--dc-2);
font-family: var(--dc-font);
}
.dc-stp__label { font-size: 14px; font-weight: 600; color: var(--dc-text); }
.dc-stp__group {
display: inline-flex; align-items: stretch; align-self: flex-start;
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); overflow: hidden;
}
.dc-stp__group:focus-within {
border-color: var(--dc-brand); box-shadow: 0 0 0 3px var(--dc-brand-soft);
}
.dc-stp__btn {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 44px; min-height: 44px;
border: 0; background: var(--dc-surface); color: var(--dc-text);
font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1;
transition: background var(--dc-fast);
}
.dc-stp__btn:hover { background: var(--dc-sunken); }
.dc-stp__btn:disabled { background: var(--dc-sunken); color: var(--dc-text-mute); cursor: not-allowed; }
.dc-stp__input {
width: 56px; min-height: 44px; padding: 0 var(--dc-1);
border: 0; border-left: 1px solid var(--dc-line); border-right: 1px solid var(--dc-line);
background: var(--dc-surface); color: var(--dc-text);
font-family: var(--dc-mono); font-size: 16px; text-align: center;
font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.dc-stp__input:focus { outline: none; }
.dc-stp__input::-webkit-outer-spin-button,
.dc-stp__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dc-stp__input[disabled] { background: var(--dc-sunken); color: var(--dc-text-mute); cursor: not-allowed; }
.dc-stp__unit {
display: inline-flex; align-items: center; padding: 0 var(--dc-3);
border-right: 1px solid var(--dc-line);
background: var(--dc-sunken); color: var(--dc-text-sub);
font-size: 14px; white-space: nowrap;
}
.dc-stp__help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }कसरी प्रयोग गर्ने
- सिधै टाइप गर्न पनि दिनुहोस् — ३० थान हाल्न ३० चोटि थिच्न लगाउनु हुँदैन
- न्यूनतम वा अधिकतम पुगेपछि त्यो बटन निष्क्रिय बनाउनुहोस्, सीमा देखिन्छ
- सय नाघ्ने वा खुला सङ्ख्या भए स्टेपर नभई सामान्य सङ्ख्या इनपुट चाहिन्छ
ध्यान दिनुपर्ने कुरा
- हरेक बटन कम्तीमा 44×44px — सानो भए छेउको बटन थिचिन्छ
- आइकन मात्र भएका बटनमा नाम राख्नुहोस्; खाली "+" लाई स्क्रिन रिडरले "प्लस" मात्र पढ्छ