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>