furo-ui5-z-grid #

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

Summary: grid with a z pattern

Description #

z-grid is a grid which places your elements in a z pattern. It creates a grid which can be imagined as a grid with cells of the size 8rem x 8rem.~

The size on the x-axis can vary a little bit, according to the the available space.

This component is nestable.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

 <furo-z-grid>
   <your-component hspace="2" vspace="4"></your-component>
   <your-component hspace="2" vspace="2"></your-component>
 </furo-z-grid>

 <!-- with automatic padding -->
 <furo-z-grid padding>
   <your-component hspan="2" vspan="4"></your-component>
   <your-component hspan="2" vspan="2"></your-component>
 </furo-z-grid>

sizes #

The sizes are calculated from the available space that the grid becomes from its parent.

Sizes are calculated as following #

 |  small  |   medium   |    large    |    xlarge   |
 |         |            |             |             |
 | 0...599 | 600...1023 | 1024...1439 | 1440...nnnn |

hspan #

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

Available ranges are from 1 to 9 and full.

To tell a element that it has to use the full width use hspan="full" or use the alias full or full-width.

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

vspan #

Set the vertical space (the height) with the vspan attribute.

Available ranges are from 1 to 9.

vspan="1", vspan="2",…,vspan="9"

newline #

To force a placement on a new line use newline

padding #

Set the attribute padding to add paddings according to the size of the furo-z-grid automatically.

:host([size=‘size-s’]) ==> 0.25rem 1rem;

:host([size=‘size-m’] ==> 0.25rem 2rem;

:host([size=‘size-l’] ==> 1rem 2rem;

:host([size=‘size-xl’] ==> 1rem 3rem;

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.

hide-on-[size] #

To hide a element on a specific current size, use hide-on-size-small , hide-on-size-medium , hide-on-size-large ,hide-on-size-xlarge.

show-on-[size] #

To show a element only on a specific current size, use show-on-size-small , show-on-size-medium , show-on-size-large ,show-on-size-xlarge.

custom span sizes on different sizes (hspan-on-[size]) #

To set a specific width (hspan) on a specific current size, use hspan-on-size-small="1...9" , hspan-on-size-medium="1...9" , hspan-on-size-large="1...9" , hspan-on-size-xlarge="1...9" .

Ohter attributes #

The attributes full and full-width are aliases for hspan="full".

Named lines and columns #

last-col refers to the last column. last-row refers to the last line/row.

Sample #

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

Look at furo-ui5-flexible-grid for more examples.

1
2
3
4
5
6
7
8
9

<furo-ui5-z-grid>
  <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>

Attributes and Properties #

Methods #

Slots #

default #

Type: HTMLElement [0..n]

default slot to add content.

Styling #

The following custom properties available for styling: