furo-ui5-flexible-grid #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-flexible-grid.js';
exports FuroUi5FlexibleGrid js
exports <furo-ui5-flexible-grid> custom-element-definition
superclass LitElement
mixes FBP

Summary: a grid splitter

Description #

The furo-ui5-flexible-grid will split your screen contents horizontally (in cols) and put them vertically (left at top) when the available space is to small.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

 <!-- a simple layout manager with two columns  -->
<furo-ui5-flexible-grid>
  <div hspan="2" full-on-size-medium full-on-size-small class="left">
     <slot name="left"></slot>
  </div>
  <!-- this will start at pos 3 and goes to the end of the screen -->
  <furo-z-grid hstart="3" fill>
    <slot></slot>
  </furo-z-grid>
</furo-ui5-flexible-grid>

Setting column width #

To set the width of a column use the hspan attribute.

Fill column to the end of the screen #

To make a column that uses the available space you have to set a starting point. This can be done with hstart="3" (begin on cell 3) and the attribute fill (fill to the right)

full-on-[size] #

To set full width on a specific current size, use full-on-size-small , full-on-size-medium , full-on-size-large ,full-on-size-xlarge.

When the available space has the given size, the default hspan are overridden and the full width is used.

hstart #

Set the starting point of a filling row with hstart="3".

Available values are hstart="2",…,hstart="9"

hspan #

Set the horizontal space (the width) with the hspan attribute.

Available ranges are from 1 to 9.

hspan="1", hspan="2",…,hspan="9"

Named lines and columns #

last-col refers to the last column. There is no line name available

Sample split z-grids in 2 sections #

Switch the demo to fullscreen and resize your screen to see the effect.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<style>
  /* needed because the contents get positioned vertically on small screens*/
  .left[size='size-s'] {
    height: 22rem;
  }
  .left[size='size-m'] {
    height: 16rem;
  }
</style>

<furo-ui5-flexible-grid>
  <furo-ui5-z-grid class="left" hspan="3" full-on-size-medium="" full-on-size-small="">
    <div vspan="1" hspan="2" style="background: lightblue;">2x1</div>
    <div vspan="1" hspan="2" style="background: lightblue;">2x1</div>
    <div vspan="1" hspan="4" style="background: rebeccapurple;">4x1</div>
  </furo-ui5-z-grid>
  <furo-ui5-z-grid hstart="4" fill="">
    <div vspan="2" hspan="1" style="background: whitesmoke;">1x2</div>
    <div vspan="1" hspan="1" style="background: pink;">1x1</div>
    <div vspan="2" hspan="2" style="background: papayawhip;">2x2</div>
    <div vspan="1" hspan="2" style="background: lightblue;">2x1</div>
    <div hspan="full" style="background: papayawhip;">
      full width, no height given
    </div>
  </furo-ui5-z-grid>
</furo-ui5-flexible-grid>

Attributes and Properties #

sizeSmall #

size-small Number

Breakpoint size for small

Methods #

Slots #

left #

Type: ``

{HTMLElement} - slot to add a component on the left hand side.

default #

Type: HTMLElement [0..n]

default slot to add content.