Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Action sheet

Dùng để đưa ra ba bốn việc có thể làm với một mục, trượt lên từ đáy sau khi người dùng chạm vào mục đó.

Lớp phủ

Xem trước trực tiếp

Nguồn

<div class="dc-as-stage">
  <div class="dc-as-scrim" aria-hidden="true"></div>
  <div class="dc-as" role="dialog" aria-modal="true" aria-labelledby="dc-as-t">
    <div class="dc-as__group">
      <div class="dc-as__head">
        <p class="dc-as__head-title" id="dc-as-t">9월 7일 주문 · 3건</p>
        <p class="dc-as__head-desc">이 주문으로 무엇을 할까요?</p>
      </div>
      <button class="dc-as__btn" type="button">영수증 보기</button>
      <button class="dc-as__btn" type="button">같은 상품 다시 담기</button>
      <button class="dc-as__btn" type="button">배송 문의하기</button>
      <button class="dc-as__btn dc-as__btn--danger" type="button">주문 취소하기</button>
    </div>
    <div class="dc-as__group">
      <button class="dc-as__btn dc-as__btn--cancel" type="button">그냥 두기</button>
    </div>
  </div>
</div>
.dc-as-stage {
  position: relative; overflow: hidden;
  height: 540px;
  background: var(--dc-bg);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-as-scrim { position: absolute; inset: 0; background: var(--dc-overlay); }
.dc-as {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--dc-3) calc(var(--dc-3) + var(--dc-safe-bottom));
}
.dc-as__group {
  overflow: hidden;
  border-radius: var(--dc-r-lg);
  background: var(--dc-surface);
  box-shadow: var(--dc-sh-3);
}
.dc-as__group + .dc-as__group { margin-top: var(--dc-2); }
.dc-as__head {
  padding: var(--dc-4) var(--dc-5);
  border-bottom: 1px solid var(--dc-line);
  text-align: center;
}
.dc-as__head-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--dc-text); }
.dc-as__head-desc { margin: var(--dc-1) 0 0; font-size: 12px; line-height: 1.6; color: var(--dc-text-sub); }
.dc-as__btn {
  display: block; width: 100%;
  min-height: 56px; padding: var(--dc-3) var(--dc-4);
  border: 0; border-bottom: 1px solid var(--dc-line);
  background: var(--dc-surface); color: var(--dc-brand-text);
  font-family: inherit; font-size: 16px; font-weight: 600; text-align: center;
  transition: background var(--dc-fast);
}
.dc-as__btn:last-child { border-bottom: 0; }
.dc-as__btn:active { background: var(--dc-sunken); }
.dc-as__btn--danger { color: var(--dc-danger); }
.dc-as__btn--cancel { color: var(--dc-text); font-weight: 700; }
.dc-as__row {
  display: flex; align-items: center; gap: var(--dc-4);
  width: 100%; min-height: 60px; padding: var(--dc-3) var(--dc-5);
  border: 0; border-bottom: 1px solid var(--dc-line);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; text-align: left;
  transition: background var(--dc-fast);
}
.dc-as__row:last-child { border-bottom: 0; }
.dc-as__row:active { background: var(--dc-sunken); }
.dc-as__row--danger { color: var(--dc-danger); }
.dc-as__ico { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; color: currentColor; }
.dc-as__ico svg { width: 22px; height: 22px; }
.dc-as__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-as__name { font-size: 15px; font-weight: 600; color: currentColor; }
.dc-as__sub { font-size: 12px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-as--flat {
  padding: 0 0 calc(var(--dc-3) + var(--dc-safe-bottom));
  background: var(--dc-surface);
  border-radius: var(--dc-r-lg) var(--dc-r-lg) 0 0;
  box-shadow: var(--dc-sh-3);
}
.dc-as--flat .dc-as__head-title { padding: var(--dc-2) var(--dc-5) var(--dc-4); text-align: left; }
.dc-as--flat .dc-as__row { border-bottom: 0; }
.dc-as--flat .dc-as__btn--cancel { margin-top: var(--dc-2); border-top: 1px solid var(--dc-line); }
.dc-as__grab {
  display: block; width: 36px; height: 4px;
  margin: var(--dc-2) auto var(--dc-3);
  border-radius: var(--dc-r-full);
  background: var(--dc-line-bold);
}

Cách dùng

  • Chỉ 2–6 mục; nhiều hơn thì nên dẫn sang màn hình quản lý
  • Ghi rõ đang xử lý cái gì ở trên cùng — nhắc lại thứ vừa chạm, ví dụ đơn hàng và ngày
  • Viết mỗi mục thành động từ: 'Huỷ đơn này', không phải 'Huỷ'
  • Đặt mục nguy hiểm xuống cuối, tách nhóm riêng và phân biệt bằng màu

Điểm cần lưu ý

  • Đặt nút đóng là 'Huỷ' sẽ lẫn với 'Huỷ đơn' — hãy dùng chữ khác như 'Để nguyên'
  • Màu đỏ một mình không nói hết mức nguy hiểm; viết rõ hậu quả bằng chữ
  • Thêm --dc-safe-bottom vào padding dưới để sheet không chạm thanh home

Tiếp theo