កាតបង្រួម

សម្រាប់បង្ហាញសេចក្ដីសង្ខេបមុន ហើយអ្នកត្រូវការលម្អិតទើបបើកមើល។

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

ប្រភព

HTML CSS

<details class="dc-fold">
  <summary class="dc-fold__sum">
    <span class="dc-fold__main">
      <span class="dc-fold__title">3월 18일 출근 기록</span>
      <span class="dc-fold__sub">A현장 · 8시간 · 일급 140,000원</span>
    </span>
    <span class="dc-fold__mark" aria-hidden="true">⌄</span>
  </summary>
  <div class="dc-fold__body">
    <dl class="dc-fold__dl">
      <div class="dc-fold__line">
        <dt class="dc-fold__dt">출근</dt>
        <dd class="dc-fold__dd">오전 7시 02분</dd>
      </div>
      <div class="dc-fold__line">
        <dt class="dc-fold__dt">퇴근</dt>
        <dd class="dc-fold__dd">오후 4시 10분</dd>
      </div>
      <div class="dc-fold__line">
        <dt class="dc-fold__dt">확인한 사람</dt>
        <dd class="dc-fold__dd">최영호 소장</dd>
      </div>
    </dl>
    <p class="dc-fold__note">기록이 다르면 현장 관리자에게 알려 주세요.</p>
  </div>
</details>

.dc-fold {
  overflow: hidden;
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-fold__sum {
  display: flex; align-items: center; gap: var(--dc-3);
  min-height: 60px; padding: var(--dc-3) var(--dc-4);
  list-style: none; cursor: pointer;
  transition: background var(--dc-fast);
}
.dc-fold__sum::-webkit-details-marker { display: none; }
.dc-fold__sum:active { background: var(--dc-sunken); }
.dc-fold__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dc-fold__title { font-size: 15px; font-weight: 700; color: var(--dc-text); }
.dc-fold__sub { font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-fold__mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--dc-r-full);
  background: var(--dc-sunken); color: var(--dc-text-sub);
  font-size: 14px; line-height: 1;
  transition: transform var(--dc-slow);
}
.dc-fold[open] .dc-fold__mark { transform: rotate(180deg); }
.dc-fold__body {
  padding: 0 var(--dc-4) var(--dc-4);
  border-top: 1px solid var(--dc-line);
}
.dc-fold__dl {
  display: flex; flex-direction: column; gap: var(--dc-2);
  margin: var(--dc-3) 0 0;
}
.dc-fold__line { display: flex; justify-content: space-between; gap: var(--dc-3); }
.dc-fold__dt { margin: 0; font-size: 13px; color: var(--dc-text-mute); }
.dc-fold__dd { margin: 0; font-size: 13px; font-weight: 700; color: var(--dc-text); text-align: right; }
.dc-fold__note {
  margin: var(--dc-3) 0 0;
  font-size: 12px; line-height: 1.6; color: var(--dc-text-mute);
}
.dc-fold-stack {
  display: flex; flex-direction: column; gap: var(--dc-3);
  padding: var(--dc-4);
  background: var(--dc-bg);
}

របៀបប្រើ

សរសេរបន្ទាត់សង្ខេបឲ្យកាតបិទក៏ដឹងថាមានអ្វីនៅខាងក្នុង
ធាតុដែលគេបើកច្រើនបំផុត ទុកបើករួចស្រេច
មិនត្រូវបង្រួមអ្វីដែលគ្រប់គ្នាត្រូវអាន — បង្រួមស្មើនឹងមិនអាន

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

សង់ពី details/summary៖ បើកបានដោយគ្មានស្គ្រីប ហើយកម្មវិធីអានអេក្រង់ប្រាប់ស្ថានភាពផង
ចុចបានទាំងបន្ទាត់សង្ខេប — មិនត្រូវឲ្យចុចត្រូវតែព្រួញ

បន្ទាប់

ជួរបញ្ជី ការបង្ហាញព័ត៌មាន កម្មវិធី

បញ្ជីការកំណត់ ការបង្ហាញព័ត៌មាន កម្មវិធី

បញ្ជីកាត ការបង្ហាញព័ត៌មាន កម្មវិធី

សារពពុះ ការបង្ហាញព័ត៌មាន កម្មវិធី