Paper: Blazor paper component

Examples

Elevation

Elevation maps to Tailwind's shadow scale; 0 removes the shadow.

Elevation

website/Examples/Layout/PaperElevationExample.razor Source

Outlined and square

Outlined swaps the shadow for a border; Square drops the rounding.

Outlined

A base-300 border instead of a shadow, for flat layouts.

Square

Drops the theme's rounded-box radius.

website/Examples/Layout/PaperOutlinedExample.razor Source

Clickable

OnClick makes the whole surface a target.

Nightly build

Ran 0 times

website/Examples/Layout/PaperClickableExample.razor Source

Playground

Monthly report

ChildContent

Elevation

Outlined

Square

<Paper
       Elevation="6"
       Class="px-10 py-8 font-display text-xl font-semibold">
    Monthly report
</Paper>

API

<Paper>

DaisyBlazor

Parameters

Elevation int
= 1
Shadow depth: 0 none, 1 shadow-xs, 2-3 shadow-sm, 4-6 shadow-md, 7-12 shadow-lg, 13-18 shadow-xl, above 18 shadow-2xl; ignored when Outlined.
Height string
= null
CSS height appended to the inline style (e.g. 320px, 100%).
MaxWidth string
= null
CSS max-width appended to the inline style (e.g. 320px, 100%).
Outlined bool
= false
Replaces the shadow with a border border-base-300 outline.
Square bool
= false
Uses square corners (rounded-none) instead of rounded-box.
Width string
= null
CSS width appended to the inline style (e.g. 320px, 100%).
Class string
= null
Extra CSS classes added to the panel.
Style string
= null
Inline CSS style applied to the panel.

Name	Type	Default	Description
Elevation	int	1	Shadow depth: 0 none, 1 shadow-xs, 2-3 shadow-sm, 4-6 shadow-md, 7-12 shadow-lg, 13-18 shadow-xl, above 18 shadow-2xl; ignored when Outlined.
Height	string	null	CSS height appended to the inline style (e.g. 320px, 100%).
MaxWidth	string	null	CSS max-width appended to the inline style (e.g. 320px, 100%).
Outlined	bool	false	Replaces the shadow with a border border-base-300 outline.
Square	bool	false	Uses square corners (rounded-none) instead of rounded-box.
Width	string	null	CSS width appended to the inline style (e.g. 320px, 100%).
Class	string	null	Extra CSS classes added to the panel.
Style	string	null	Inline CSS style applied to the panel.

Events

OnClick EventCallback<MouseEventArgs>
Raised when the panel is clicked, or activated with Enter/Space; the panel then acts as a focusable button.

Name	Type	Description
OnClick	EventCallback<MouseEventArgs>	Raised when the panel is clicked, or activated with Enter/Space; the panel then acts as a focusable button.

Content

ChildContent RenderFragment
Content rendered inside the panel.

Name	Type	Description
ChildContent	RenderFragment	Content rendered inside the panel.

From MudPaper

Paper keeps MudPaper's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

Width, Height and MaxWidth are accepted but not applied yet; size the surface with Class or Style.