Form layout manager

OFormLayoutManagerComponent

Directive: o-form-layout-manager

Component hierarchy

• o-form-layout-manager
  • o-form-layout-dialog-options
  • o-form-layout-split-pane-options
  • o-form-layout-tabgroup-options

Inputs

Name	Since	Description	Default
attr string		Field identifier. Registry property if component is inside a form.
dialog-class string		Deprecated. CSS class attached to the dialog when the dialog mode is active
dialog-height string		Deprecated. The dialog height
dialog-max-height string		Deprecated. The dialog maximum height
dialog-max-width string		Deprecated. The dialog maximum width
dialog-min-height string		Deprecated. The dialog minimum height
dialog-min-width string		Deprecated. The dialog minimum width
dialog-width string		Deprecated. The dialog width
label-columns string		Deprecated. Form data columns used in the detail form title. Separated by ‘;’
mode tab | dialog | split-pane		Form layout manager mode	dialog
separator string		Deprecated. Separator between multiple label columns values	’ ‘ (blank space)
store-state no | false | yes | true		Indicates whether or not to store component state	yes
title string		Deprecated. Detail form main title
title-data-origin string		Deprecated. attr of the form component used for retrieving the data used on the tabs title

* required inputs.

Outputs

Name	Since	Description
onCloseTab		Event triggered when a detail tab is closed
onMainTabSelected		Event triggered when the main tab is selected
onSelectedTabChange		Event triggered when a detail tab is changed

Dialog mode

Directive: o-form-layout-dialog-options

Inputs

Name	Since	Description	Default
backdrop-class string		Custom class for the backdrop.
class string | string[]		Custom class for the overlay pane.
close-on-navigation no | false | yes | true		Whether the dialog should close when the user goes backwards/forwards in history. Note that this usually doesn’t include clicking on links	yes
disable-close no | false | yes | true		Whether the user can use escape or clicking on the backdrop to close the modal	no
height string		Height of the dialog.
label-columns string		Form data columns used in the detail form title. Separated by ‘;’
max-height string | number		Max height of the dialog
max-width string | number		Max width of the dialog.
min-height string | number		Min height of the dialog
min-width string | number		Min width of the dialog.
position DialogPosition		Position overrides
separator string		Separator between multiple label columns values	’ ‘ (blank space)
title string		Detail form main title
width string		Width of the dialog.

Split pane mode

Directive: o-form-layout-split-pane-options

Inputs

Name	Since	Description	Default
detail-max-width string | number		Max width of the detail container.
detail-min-width string | number		Min width of the detail container.
detail-width string		Width of the detail container.
main-max-width string | number		Max width of the main container.
main-min-width string | number		Min width of the main container.
main-width string		Width of the main container.

Tabgroup mode

Directive: o-form-layout-tabgroup-options

Inputs

Name	Since	Description	Default
background-color ThemePalette ('primary' | 'accent' | 'warn')		Background color of the tab nav.
color ThemePalette ('primary' | 'accent' | 'warn')		Theme color palette for the component.
disable-animation no | false | yes | true		Disable the animations in the tabs	no
header-position 'above' | 'below'		Position of the tab header.	above
icon string		Icon name (see Google material design icons)
icon-position 'left' | right		Icon position
label-columns string		Form data columns used in the detail form title. Separated by ‘;’
separator string		Separator between multiple label columns values	’ ‘ (blank space)
title string		Detail form main title
title-data-origin string		attr of the form component used for retrieving the data used on the tabs title