स्वाइप कार्य
सूचीका पङ्क्ति पटकपटक मेटाउने वा सङ्ग्रह गर्नुपर्दा, विस्तृत स्क्रिनमा नगएरै धकेलेर सक्ने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<div class="dc-swipe">
<ul class="dc-swipe__list">
<li class="dc-swipe__item">
<div class="dc-swipe__track">
<div class="dc-swipe__pane">
<span class="dc-swipe__name">김민수 주임</span>
<span class="dc-swipe__desc">오후 2시 현장 점검 가능합니다</span>
</div>
<div class="dc-swipe__acts">
<button class="dc-swipe__act" type="button">보관<span class="dc-sr"> · 김민수 주임 메시지</span></button>
<button class="dc-swipe__act dc-swipe__act--danger" type="button">삭제<span class="dc-sr"> · 김민수 주임 메시지</span></button>
</div>
</div>
</li>
<li class="dc-swipe__item">
<div class="dc-swipe__track">
<div class="dc-swipe__pane">
<span class="dc-swipe__name">자재팀</span>
<span class="dc-swipe__desc">철근 입고 예정일이 하루 늦어집니다</span>
</div>
<div class="dc-swipe__acts">
<button class="dc-swipe__act" type="button">보관<span class="dc-sr"> · 자재팀 메시지</span></button>
<button class="dc-swipe__act dc-swipe__act--danger" type="button">삭제<span class="dc-sr"> · 자재팀 메시지</span></button>
</div>
</div>
</li>
</ul>
<p class="dc-swipe__hint">왼쪽으로 밀면 보관·삭제가 나옵니다. 항목을 열어 같은 동작을 쓸 수도 있습니다.</p>
</div>.dc-swipe {
background: var(--dc-bg);
font-family: var(--dc-font);
}
.dc-swipe__list {
margin: 0;
padding: 0;
list-style: none;
background: var(--dc-surface);
border-top: 1px solid var(--dc-line);
}
.dc-swipe__item {
border-bottom: 1px solid var(--dc-line);
}
.dc-swipe__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.dc-swipe__track::-webkit-scrollbar { display: none; }
.dc-swipe__pane {
display: flex;
flex: 0 0 100%;
flex-direction: column;
gap: var(--dc-1);
min-height: 44px;
padding: var(--dc-3) var(--dc-4);
scroll-snap-align: start;
background: var(--dc-surface);
}
.dc-swipe__name {
font-size: 15px;
font-weight: 600;
color: var(--dc-text);
}
.dc-swipe__desc {
font-size: 13px;
line-height: 1.5;
color: var(--dc-text-sub);
}
.dc-swipe__acts {
display: flex;
flex: none;
scroll-snap-align: end;
}
.dc-swipe__act {
min-width: 72px;
min-height: 44px;
border: 0;
background: var(--dc-sunken);
color: var(--dc-text);
font-family: var(--dc-font);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.dc-swipe__act--danger {
background: var(--dc-danger);
color: var(--dc-text-on);
}
.dc-swipe__item--open .dc-swipe__pane {
flex-basis: calc(100% - 144px);
}
.dc-swipe__hint {
margin: 0;
padding: var(--dc-3) var(--dc-4);
font-size: 12px;
line-height: 1.6;
color: var(--dc-text-mute);
}कसरी प्रयोग गर्ने
- कार्य बढीमा दुई; तीनदेखि औंलाले ठ्याक्क छुन गाह्रो भई मेनुभन्दा पनि ढिलो हुन्छ
- जोखिमपूर्ण कार्य सबैभन्दा बाहिर राख्नु र --dc-danger ले रङ फरक पार्नु
- धकेल्नु छोटो बाटो मात्र हो: त्यही कार्य विस्तृत पृष्ठ वा 'अरू' मेनुमा पनि राख्नु
ध्यान दिनुपर्ने कुरा
- धकेल्ने बाहेक बाटो नभए किबोर्ड र स्क्रिन रिडर प्रयोगकर्ता त्यो काम गर्नै सक्दैनन्
- तुरुन्तै नमेटाउनु — केही सेकेन्ड 'फर्काउनु' देखाउनु
- देखिने बटनको उचाइ 44px राख्नु, नत्र धकेल्दा गलत थिचिन्छ