@smui/layout-grid

Svelte Material UI - Layout Grid

A responsive grid layout component. It has 12 columns on large screens (desktop), 8 columns on medium screens (tablet), and 4 columns on small screens (phone).

Installation

npm install --save-dev @smui/layout-grid

Demo

See it in action.

See the demo code.

Basic Usage

<LayoutGrid>
  <Cell span={3}>I'm the first cell!</Cell>
  <Cell span={3}>I'm the second cell.</Cell>
  <Cell span={3}>Im the third cell</Cell>
  <Cell span={3}>im the 4th cell</Cell>
</LayoutGrid>

<script>
  import LayoutGrid, { Cell } from '@smui/layout-grid';
</script>

Exports

(default)

A layout grid container. It contains an inner grid.

Props / Defaults

• use: [] - An array of Svelte actions and/or arrays of an action and its options.
• class: '' - A CSS class string.
• fixedColumnWidth: false - Give the grid fixed column width.
• align: null - Specifies the alignment of the entire grid. ('left' or 'right')

Cell

A layout grid cell.

Props / Defaults

• use: [] - An array of Svelte actions and/or arrays of an action and its options.
• class: '' - A CSS class string.
• align: null - Specifies the alignment of the entire grid. ('top', 'middle', or 'bottom')
• order: null - Specify the display order of the cell. Normally cells are displayed in source order. This may affect accessibility, since screen readers usually follow source order. (integer between 1 and 12)
• span: null - Makes the cell span the given number of columns. If the number of columns on the viewing device is fewer than this, the cell will span the available number of columns. Cells default to spanning four columns. (integer between 1 and 12)
• spanDevices: {} - A map of device types to cell span sizes. These will override the span prop on the given device. ({ desktop?: integer; tablet?: integer; phone?: integer; })

Forwarded Props

• innerGrid$ - Props forwarded to the inner grid.

InnerGrid

An inner layout grid used for nesting. It is meant to be put directly under a cell to create a new nested grid layout.

Props / Defaults

• use: [] - An array of Svelte actions and/or arrays of an action and its options.
• class: '' - A CSS class string.

More Information

See Responsive layout grid in the Material design spec.

See Layout Grid in MDC-Web for information about the upstream library's architecture.

Changelog

4.1.0 (2021-04-28)

Bug Fixes

• remove duplicate change and input event forwarding (641acf1), closes #233
• required causes textfield to use native validation, label stops floating when value deleted (b13b2a0), closes #234
• slider external updates not reflected in UI (d46b854)
• textfield labels and notches show incorrect state and position (c935423), closes #236
• theme builder error when the output directory doesn't exist (36c2531)
• warnings about unexpected slot in Img and Hr (98a555f)

Features

• change event modifier syntax to allow use on all events (1fe4f82)
• include props for conditional icons on Textfield and Select (2d95dc7), closes #230

Reverts

• Revert "v4.1.0" (54dfd48)
• Revert "v4.1.0" (3e683d9)