glint-form

Provides form layout in combination with <glint-form-section>.

Each sections can define how many fieldsFieldA property of a DataElement expanded to a database column and user interface input element. to show side-by-side with the cols attribute. This value is a maximum. The actual number of columns can be lower than this if there is not enough space to fit all the fieldsFieldA property of a DataElement expanded to a database column and user interface input element.. This is reevaluated on resize so that the form remains legible when making the form panel smaller.

<glint-form>
  <glint-form-section label="DataElement" cols="2"
                      description="Some description">
    <!-- ... -->
  </glint-form-section>
  <glint-form-section label="Options" [hidden]="showOptions()">
    <!-- ... -->
  </glint-form-section>
  <div actions>
    <button>Save</button>
  </div>
</glint-form>

• <glint-form>
  • [actions]: Content with the actions attribute will be placed at the end of the form and can be used to add a submit button. This part will be omitted in readonly mode.
• <glint-form-section>
  • [label]: (optional) Section title.
  • [description]: (optional) A longer description appearing below the label.
  • [cols]: ('1', '2', '3' or '4', default = '1') Creates a responsive layout with n columns. If the form becomes too small to show the columns side by side, the component falls back to a smaller number of columns.
  • [hidden]: (default = false) Can be used to hide the section under certain conditions.