Đế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

Bảng bên

Trượt vào bên cạnh danh sách để xem kỹ một dòng hay chọn điều kiện, mà không mất chỗ đang đứng.

Lớp phủ

Xem trước trực tiếp

Nguồn

<div class="dc-sp-stage">
  <div class="dc-sp-stage__page" aria-hidden="true">
    <div class="dc-sp-stage__bar dc-sp-stage__bar--w45"></div>
    <div class="dc-sp-stage__bar"></div>
    <div class="dc-sp-stage__bar dc-sp-stage__bar--w70"></div>
    <div class="dc-sp-stage__bar"></div>
    <div class="dc-sp-stage__bar dc-sp-stage__bar--w70"></div>
  </div>
  <div class="dc-sp" role="dialog" aria-modal="true" aria-labelledby="dc-sp-t">
    <div class="dc-sp__head">
      <h2 class="dc-sp__title" id="dc-sp-t">주문 걸러 보기</h2>
      <button class="dc-sp__x" type="button"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span class="dc-sr">패널 닫기</span></button>
    </div>
    <div class="dc-sp__body">
      <fieldset class="dc-sp__group">
        <legend class="dc-sp__legend">진행 상태</legend>
        <label class="dc-sp__check" for="dc-sp-st-new"><input type="checkbox" id="dc-sp-st-new" checked> 접수</label>
        <label class="dc-sp__check" for="dc-sp-st-pack"><input type="checkbox" id="dc-sp-st-pack" checked> 포장 중</label>
        <label class="dc-sp__check" for="dc-sp-st-ship"><input type="checkbox" id="dc-sp-st-ship"> 배송 중</label>
        <label class="dc-sp__check" for="dc-sp-st-done"><input type="checkbox" id="dc-sp-st-done"> 배송 완료</label>
      </fieldset>
      <fieldset class="dc-sp__group">
        <legend class="dc-sp__legend">결제 방법</legend>
        <label class="dc-sp__check" for="dc-sp-pay-card"><input type="checkbox" id="dc-sp-pay-card" checked> 카드</label>
        <label class="dc-sp__check" for="dc-sp-pay-bank"><input type="checkbox" id="dc-sp-pay-bank"> 계좌 이체</label>
        <label class="dc-sp__check" for="dc-sp-pay-cash"><input type="checkbox" id="dc-sp-pay-cash"> 현장 결제</label>
      </fieldset>
    </div>
    <div class="dc-sp__foot">
      <button class="dc-sp__btn" type="button">모두 지우기</button>
      <button class="dc-sp__btn dc-sp__btn--primary" type="button">주문 128건 보기</button>
    </div>
  </div>
</div>
.dc-sp-stage {
  position: relative; display: flex; justify-content: flex-end;
  min-height: 420px; overflow: hidden;
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
  background: var(--dc-bg); font-family: var(--dc-font);
}
.dc-sp-stage--left { justify-content: flex-start; }
.dc-sp-stage__page { position: absolute; inset: 0; padding: var(--dc-5); }
.dc-sp-stage__page::after { content: ""; position: absolute; inset: 0; background: var(--dc-overlay); }
.dc-sp-stage__bar { height: 12px; margin-bottom: var(--dc-4); border-radius: var(--dc-r-xs); background: var(--dc-sunken); }
.dc-sp-stage__bar--w70 { width: 70%; }
.dc-sp-stage__bar--w45 { width: 45%; }
.dc-sp {
  position: relative; display: flex; flex-direction: column;
  width: 360px; max-width: 100%;
  background: var(--dc-surface);
  border-left: 1px solid var(--dc-line);
  box-shadow: var(--dc-sh-3);
}
.dc-sp--left { border-left: 0; border-right: 1px solid var(--dc-line); }
.dc-sp__head {
  display: flex; align-items: center; gap: var(--dc-3);
  padding: var(--dc-4) var(--dc-5);
  border-bottom: 1px solid var(--dc-line);
}
.dc-sp__title { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 700; color: var(--dc-text); }
.dc-sp__x {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  margin-right: -6px; padding: 0; border: 0; border-radius: var(--dc-r-sm);
  background: transparent; color: var(--dc-text-mute);
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-sp__x svg { width: 16px; height: 16px; }
.dc-sp__x:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-sp__body { flex: 1 1 auto; overflow-y: auto; padding: var(--dc-5); }
.dc-sp__group { margin: 0 0 var(--dc-5); padding: 0; border: 0; }
.dc-sp__legend { padding: 0; margin-bottom: var(--dc-1); font-size: 12px; font-weight: 700; color: var(--dc-text-mute); }
.dc-sp__check {
  display: flex; align-items: center; gap: var(--dc-3);
  min-height: 40px; font-size: 14px; color: var(--dc-text); cursor: pointer;
}
.dc-sp__check input { width: 18px; height: 18px; accent-color: var(--dc-brand); }
.dc-sp__foot {
  display: flex; gap: var(--dc-2); padding: var(--dc-4) var(--dc-5);
  border-top: 1px solid var(--dc-line); background: var(--dc-surface);
}
.dc-sp__btn {
  flex: 1 1 auto; min-height: 44px; padding: 0 var(--dc-3);
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-size: 14px; font-weight: 600;
  transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-sp__btn:hover { background: var(--dc-sunken); }
.dc-sp__btn--primary { flex: 2 1 auto; border-color: var(--dc-brand); background: var(--dc-brand); color: var(--dc-text-on); }
.dc-sp__btn--primary:hover { background: var(--dc-brand-hi); border-color: var(--dc-brand-hi); }
.dc-sp__dl { margin: 0; }
.dc-sp__dt { margin-top: var(--dc-4); font-size: 12px; font-weight: 700; color: var(--dc-text-mute); }
.dc-sp__dd { margin: var(--dc-1) 0 0; font-size: 14px; line-height: 1.6; color: var(--dc-text); }
@media (max-width: 560px) {
  .dc-sp { width: 100%; }
}

Cách dùng

  • Dùng khi danh sách phía sau vẫn phải nhìn thấy — lọc, hoặc xem một bản ghi
  • Ghim nút áp dụng ở đáy bảng để cuộn vẫn còn thấy
  • Để nội dung quyết định bề rộng — hẹp cho bộ lọc, rộng hơn cho chi tiết
  • Khi một dòng đang mở trong bảng, hãy đánh dấu dòng đó ở danh sách phía sau

Điểm cần lưu ý

  • Trên màn hình hẹp, đổi sang toàn màn hình hoặc tấm đáy — bảng 360px không nằm được trong 420px
  • Nếu đặt aria-modal thì phải giữ Tab ở trong; không giữ được thì bỏ aria-modal

Tiếp theo