An elevated and/or colored surface.
npm install --save-dev @smui/paper
The latest SMUI v3 had a lot of changes, and these docs haven't been caught up yet. You should check out the demo page's code to see the latest usage.
<Paper>
<Title>Paper</Title>
<Subtitle>This is a sheet of paper.</Subtitle>
<Content>Paper is used to build an elevated surface.</Content>
</Paper>
<script>
import Paper, { Title, Subtitle, Content } from '@smui/paper';
</script>
A paper surface.
use
:[]
- An array of Svelte actions and/or arrays of an action and its options.class
:''
- A CSS class string.square
:false
- Whether the component has square or rounded corners.color
:'default'
- The component's color. ('primary', 'secondary' or 'default')elevation
:1
- The component's elevation. (integer between 0 and 24, inclusive)transition
:false
- Trigger a transition animation when elevation is changed.
A fragment used as a title on the Paper.
Equivalent to the ClassAdder
with H5
common component.
A fragment used as a subtitle on the Paper.
Equivalent to the ClassAdder
with H6
common component.
A fragment used as a body of the Paper.
Equivalent to the ClassAdder
with Div
common component.
See Elevation in the Material design spec.
See Elevation in MDC-Web for information about the upstream library's architecture.