Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Aksi geser

Untuk baris yang orang arsipkan atau hapus berulang kali — menggeser menyelesaikannya tanpa membuka layar detail.

Tombol dan aksi

Pratinjau langsung

Sumber

<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);
}

Cara memakainya

  • Maksimal dua aksi; dari tiga ke atas jari sulit membidik dan malah lebih lambat dari menu
  • Taruh aksi berisiko paling luar dan beri warna --dc-danger
  • Geser hanyalah jalan pintas: aksi yang sama wajib ada di detail atau menu lainnya

Hal yang perlu diwaspadai

  • Kalau geser satu-satunya jalan, pengguna papan tik dan pembaca layar tidak bisa memakainya
  • Jangan langsung menghapus — tawarkan Batalkan beberapa detik
  • Jaga tinggi tombol yang muncul 44px agar geseran tidak berakhir salah tekan

Berikutnya