footer-toolbar 底部工具栏

固定在底部的工具栏。

何时使用

固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。

import { FooterToolbarModule } from '@delon/abc/footer-toolbar';

代码演示

基础

浮动固定页脚，常用于表单页。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'components-footer-toolbar-basic',
  template: `
    <form nz-form [formGroup]="form">
      <nz-form-item>
        <nz-form-control [nzValidateStatus]="name">
          <input nz-input formControlName="name" placeholder="required" />
        </nz-form-control>
      </nz-form-item>
      <footer-toolbar errorCollect extra="This is extra area">
        <button nz-button nzType="primary">Submit</button>
      </footer-toolbar>
    </form>
  `,
})
export class ComponentsFooterToolbarBasicComponent implements OnInit {
  form: FormGroup;
  constructor(fb: FormBuilder) {
    this.form = fb.group({
      name: [null, Validators.required],
    });
  }
  get name() {
    return this.form.controls.name;
  }
  ngOnInit(): void {
    this.name.markAsDirty();
  }
}

API

footer-toolbar