Documentation

Off-Canvas

Namespace

using Blazor_Foundation_6.Components.Containers;

Attributes

OffCanvasWrapper

Name	Description
Id	Default html id=”” attribute.
Class	Extra/Custom Classes appended to the default class.

OffCanvasContent

Name	Description
Id	Default html id=”” attribute.
Class	Extra/Custom Classes appended to the default class.

OffCanvas

Name	Description
Id	Default html id=”” attribute.
Class	Extra/Custom Classes appended to the default class.
Position	position-top, position-bottom, position-left or position-right.
DataTransition	overlap or push. Transition Style.
Absolute	True/False. If off-canvas is absolute position.
CloseOnClick	True/False. Off-Canvas will close if used click outside the window.
ContentOverlay	True/False. Off-Canvas has tint layer to cover the background.
AutoManaged	True/False. Blazor will auto manage Foundation Zurb’s Javascript.
DataOptions	Can include any option available. (See Plugin Options)

Examples

To see visual example, visit Foundation or Download and Run Blazor_Foundation_Test in Visual Studio.

 <OffCanvasWrapper>
                <OffCanvas Id="MainCanvasBottom" DataTransition="push" Position="position-bottom" CloseOnClick="true" ContentOverlay="true">
                    <p>My Menu</p>
                </OffCanvas>
                <OffCanvas Id="MainCanvasLeft" DataTransition="overlap" Position="position-left" CloseOnClick="true" ContentOverlay="true">
                    <p>My Menu</p>
                </OffCanvas>
                <OffCanvas Id="MainCanvasRight" DataTransition="overlap" Position="position-right" CloseOnClick="true" ContentOverlay="true">
                    <p>My Menu</p>
                </OffCanvas>
                <OffCanvas Id="MainCanvasTop" DataTransition="push" Position="position-top" CloseOnClick="true" ContentOverlay="true">
                    <p>My Menu</p>
                </OffCanvas>
                <OffCanvasContent>
		<ButtonGroup Size="small" Color="success">
                        <Button DataToggle="MainCanvasBottom">Open Bottom</Button>
                        <Button DataToggle="MainCanvasTop">Open Top</Button>
                        <Button DataToggle="MainCanvasLeft">Open Left</Button>
                        <Button DataToggle="MainCanvasRight">Open Right</Button>
                    </ButtonGroup>
	</OffCanvasContent>
</OffCanvasWrapper>