Action sheets can be triggered in your app view to providing contextual actions on a component. They act as slide up menus on small devices and drop downs on larger screens.
To use custom content in the button, place the HTML mark up in between the custom zf tags.
I'm Fancy!
This is my fancy content!
This is my fancy content!
External Triggers
To use an entirely different element entirely to control the action sheet, use the following markup. Make sure that the ID for the action sheet and the toggle match up. The zf-as-button element is optional here, since you're using another element to trigger the action sheet.
Create an action sheet with custom class names using our mixins.
// This is the wrapper for your button and action sheet
.custom-action-sheet-container {
position: relative;
display: inline-block;
}
// This is the action sheet itself
.custom-action-sheet {
// These are the core styles for the sheet menu
$padding: 1rem,
$color: #000,
$border-color,
$background-hover: #ccc
);
// This mixin sets up styles for the mobile action sheet
@include action-sheet(
$position: bottom, // Can be top or bottom
$shadow: 0 3px 10px black,
$animate: transform opacity, // Properties to animate when the menu is shown and hidden. Remove "transform" or "opacity" to turn off those animations
$animation-speed: 0.25s, // Speed at which the menu animates in and out
$padding: 1rem,
$background: #fff // Background color
);
// This mixin sets up styles for the desktop popup menu
// Here we're only applying the styles on medium-sized screens and larger
@include breakpoint(medium) {
$position: bottom, // Can be top or bottom
$background: #fff, // Background color
$width: 300px, // Width of whole menu
$radius: 3px, // Border radius of menu
$shadow: 0 4px 10px black, // Box shadow of menu
$tail-size: 5px // Size of tail that is attached to the menu
}
}
Sass Variables
Customize the base styles for action sheets with these settings variables.