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

Nút hành động nổi

Dành cho việc người dùng mở danh sách để làm — tạo mục mới — luôn nổi trên nội dung khi cuộn.

Nút và hành động

Xem trước trực tiếp

Nguồn

<div class="dc-fabstage">
  <ul class="dc-fabstage__list">
    <li class="dc-fabstage__row">현장 점검 일지</li>
    <li class="dc-fabstage__row">자재 입고 확인</li>
    <li class="dc-fabstage__row">안전 교육 기록</li>
  </ul>
  <button class="dc-fab" type="button">
    <svg class="dc-fab__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
    <span class="dc-sr">새 기록 쓰기</span>
  </button>
</div>
.dc-fabstage {
  position: relative;
  min-height: 360px;
  background: var(--dc-bg);
  font-family: var(--dc-font);
  overflow: hidden;
}
.dc-fabstage__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dc-fabstage__row {
  padding: var(--dc-4);
  border-bottom: 1px solid var(--dc-line);
  background: var(--dc-surface);
  font-size: 15px;
  color: var(--dc-text);
}
.dc-fab {
  position: absolute;
  right: var(--dc-4);
  bottom: calc(var(--dc-4) + var(--dc-safe-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand);
  color: var(--dc-text-on);
  box-shadow: var(--dc-sh-3);
  cursor: pointer;
  transition: background var(--dc-fast), transform var(--dc-fast);
}
.dc-fab:hover { background: var(--dc-brand-hi); }
.dc-fab:active { transform: scale(.96); }
.dc-fab__ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.dc-fab--wide {
  width: auto;
  min-width: 56px;
  padding: 0 var(--dc-5);
  gap: var(--dc-2);
  border-radius: var(--dc-r-full);
}
.dc-fab__label {
  font-family: var(--dc-font);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.dc-fab--above {
  bottom: calc(64px + var(--dc-4) + var(--dc-safe-bottom));
}
.dc-fabstage__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding-bottom: var(--dc-safe-bottom);
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-line);
}
.dc-fabstage__tab {
  flex: 1;
  min-height: 56px;
  border: 0;
  background: none;
  color: var(--dc-text-sub);
  font-family: var(--dc-font);
  font-size: 12px;
  cursor: pointer;
}
.dc-fabstage__tab[aria-current="page"] {
  color: var(--dc-brand-text);
  font-weight: 600;
}

Cách dùng

  • Chỉ một nút trên mỗi màn hình; cần hai thì nên chuyển xuống thanh dưới
  • Chỉ dùng cho hành động thường gặp nhất, thường là tạo mới
  • Dùng dạng rộng có nhãn khi biểu tượng một mình chưa đủ rõ

Điểm cần lưu ý

  • Nút chỉ có biểu tượng phải kèm tên trong dc-sr, nếu không trình đọc chỉ đọc “nút”
  • Khi có thanh tab dưới, nâng nút lên bằng chiều cao thanh để không che dòng cuối

Tiếp theo