Off-Canvas

Namespace

using Blazor_Foundation_6.Components.Containers;

Attributes

OffCanvasWrapper

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.

OffCanvasContent

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.

OffCanvas

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
Positionposition-top, position-bottom, position-left or position-right.
DataTransitionoverlap or push. Transition Style.
AbsoluteTrue/False. If off-canvas is absolute position.
CloseOnClickTrue/False. Off-Canvas will close if used click outside the window.
ContentOverlayTrue/False. Off-Canvas has tint layer to cover the background.
AutoManagedTrue/False. Blazor will auto manage Foundation Zurb’s Javascript.
DataOptionsCan 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>