furo-form-layouter #

@furo/layout v2.2.14
import '@furo/layout/src/furo-form-layouter.js';
exports FuroFormLayouter js
exports <furo-form-layouter> custom-element-definition
superclass LitElement
mixes FBP
summary Grid based form field row

furo-form-layouter

Use furo-form-layouter to structure your forms. It is based on a grid system with the following properties:

• full-width row (Standard)
• two columns
• four columns

The required variant is set using an attribute. e.g. two, three, four and six

1
2
3
4
5
6
7

<!-- four coulumn layout -->
<furo-form-layouter four>
   <input-element></input-element>
   <input-element double></input-element>
   <input-element newline></input-element>
   <input-element full></input-element>
</furo-form-layouter>

To customize the slotted elements inside furo-form-layouter there are several attributes.

• double | stretches the element over two units
• full | stretches the element to full width
• newline | forces a new line

Responsiveness #

Attributes and Properties #

narrow #

default: false

narrower #

default: false

breakpointBig #

breakpoint-big reflects number default: 810

Set custom breakpoint big Default: “810”

breakpointSmall #

breakpoint-small reflects number default: 405

Set custom breakpoints small Default: “405”

narrowFix #

narrow-fix reflects Boolean

Set narrow-fix attribute to force the layout analog to breakpoint big

narrowerFix #

narrower-fix reflects Boolean

Set narrower-fix attribute to force 1 column view (analog breakpoint small)

Events #

layout-changed #

at-layout-changed → CustomEvent

Methods #

Slots #

default #

Type: HTMLElement [0..n]

default slot to add content.

Styling #

The following custom properties available for styling: