Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@smui/layout-grid

Package Overview
Dependencies
Maintainers
0
Versions
66
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@smui/layout-grid

Svelte Material UI - Layout Grid

  • 8.0.0-beta.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5.3K
increased by4.6%
Maintainers
0
Weekly downloads
 
Created
Source

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.

Keywords

FAQs

Package last updated on 19 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc