សកម្មភាពពេលអូស

សម្រាប់បន្ទាត់ដែលអ្នកប្រើរក្សាទុក ឬលុបជាញឹកញាប់ ដោយអូសបានស្រេច មិនបាច់បើកអេក្រង់ព័ត៌មានលម្អិត។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<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 ដើម្បីការអូសមិនបញ្ចប់ដោយចុចខុស

បន្ទាប់

របារសកម្មភាពខាងក្រោម ប៊ូតុង និងសកម្មភាព កម្មវិធី

ប៊ូតុងសកម្មភាពអណ្តែត ប៊ូតុង និងសកម្មភាព កម្មវិធី

ជួរប៊ូតុងរូបតំណាង ប៊ូតុង និងសកម្មភាព កម្មវិធី

ប៊ូតុងបំបែកជាចំណែក ប៊ូតុង និងសកម្មភាព កម្មវិធី វេប