@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

Examples and Usage Information

https://sveltematerialui.com/demo/layout-grid

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: undefined - Specifies the alignment of the entire grid. ('left' or 'right')

Forwarded Props

• innerGrid$ - Props forwarded to the inner grid.

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: undefined - Specifies the alignment of the entire grid. ('top', 'middle', or 'bottom')
• order: undefined - 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: undefined - 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; })

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

5.0.0-beta.6 (2021-09-27)

Bug Fixes

• forward blur and focus events from textfield (0a9b508), closes #328
• incorrect import path for scss file in button (126d764)
• internals causing issues being outside of class adder component (1c29076), closes #329
• lock sass to the last working minor release (62d4895), closes #334