សន្លឹកសកម្មភាព

ប្រើដើម្បីបង្ហាញរឿងបីបួនដែលអាចធ្វើជាមួយវត្ថុមួយ ដោយឡើងពីក្រោមពេលចុចលើវត្ថុនោះ។

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

ប្រភព

HTML CSS

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

របៀបប្រើ

ដាក់តែ ២–៦ ធាតុ; បើច្រើនជាងនេះ គួរនាំទៅអេក្រង់គ្រប់គ្រង
សរសេរនៅខាងលើថាកំពុងធ្វើលើអ្វី — និយាយឡើងវិញពីវត្ថុដែលបានចុច
សរសេរធាតុនីមួយៗជាកិរិយាសព្ទ៖ «បោះបង់ការបញ្ជាទិញនេះ» មិនត្រឹម «បោះបង់»
ដាក់ធាតុប្រថុយនៅក្រោមបំផុត ក្នុងក្រុមដោយឡែក ហើយបែងចែកដោយពណ៌ផង

ចំណុចត្រូវប្រុងប្រយ័ត្ន

ដាក់ប៊ូតុងបិទថា «បោះបង់» នឹងច្រឡំនឹង «បោះបង់ការបញ្ជាទិញ» — ប្រើពាក្យផ្សេង
ពណ៌តែម្នាក់ឯងមិនបញ្ជាក់ពីគ្រោះថ្នាក់; សរសេរផលវិបាកជាអក្សរផង
បន្ថែម --dc-safe-bottom ទៅ padding ខាងក្រោម ដើម្បីឲ្យផុតពីរបារ home

បន្ទាប់

សន្លឹកខាងក្រោម ស្រទាប់គ្រប កម្មវិធី

Modal ពេញអេក្រង់ ស្រទាប់គ្រប កម្មវិធី

ប្រអប់សន្ទនាដាស់តឿន ស្រទាប់គ្រប កម្មវិធី

Tooltip (ពពុះពាក្យ) ស្រទាប់គ្រប កម្មវិធី