@smui/paper

Svelte Material UI - Paper

Usage no npm install needed!

<script type="module">
  import smuiPaper from 'https://cdn.skypack.dev/@smui/paper';
</script>

README

Svelte Material UI - Paper

An elevated and/or colored surface.

Installation

npm install --save-dev @smui/paper

Examples and Usage Information

https://sveltematerialui.com/demo/paper

Exports

(default)

A paper surface.

Props / Defaults

  • use: [] - An array of Svelte actions and/or arrays of an action and its options.
  • class: '' - A CSS class string.
  • variant: "raised" - The paper's style variant. ('raised', 'unelevated', or 'outlined')
  • square: false - Whether the component has square or rounded corners.
  • color: 'default' - The component's color. ('primary', 'secondary', 'default', or a custom color string defined with SASS)
  • elevation: 1 - The component's elevation. (integer between 0 and 24, inclusive)
  • transition: false - Trigger a transition animation when elevation is changed.

Title

A fragment used as a title on the Paper.

Equivalent to the ClassAdder with H5 common component.

Subtitle

A fragment used as a subtitle on the Paper.

Equivalent to the ClassAdder with H6 common component.

Content

A fragment used as a body of the Paper.

Equivalent to the ClassAdder with Div common component.

More Information

See Elevation in the Material design spec.

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