Action sheet
Untuk menawarkan tiga atau empat tindakan atas satu item, muncul dari bawah setelah item itu disentuh.
Pratinjau langsung
Sumber
<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);
}Cara memakainya
- Cukup 2–6 item; lebih dari itu arahkan ke layar pengelolaan
- Tulis di bagian atas sedang membahas apa — ulangi item yang disentuh beserta tanggalnya
- Tulis setiap item sebagai kata kerja: 'Batalkan pesanan ini', bukan 'Batal'
- Letakkan tindakan berbahaya paling bawah, dalam grup sendiri, dan bedakan juga dengan warna
Hal yang perlu diwaspadai
- Tombol tutup berbunyi 'Batal' akan tertukar dengan 'Batalkan pesanan' — pakai kata lain
- Warna saja tidak menyampaikan risiko; tuliskan akibatnya dengan kata
- Tambahkan --dc-safe-bottom pada padding bawah agar tidak bertumpuk home indicator