---
name: action-sheet
url: /action-sheet
title: Action Sheet
animateIn: fadeIn
animateOut: fadeOut
---
Action Sheet
Basic HTML
You can create an actionsheet with this basic directive.
Additional Options
To use a custom button, ammend the `zf-as-button` declaration with your custom HTML like so:
toggle
my button goes here
My content goes here
Sass Mixins
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.
$actionsheet-background: white;
$actionsheet-border-color: #ccc;
$actionsheet-animate: transform opacity;
$actionsheet-animation-speed: 0.25s;
$actionsheet-width: 300px;
$actionsheet-radius: 4px;
$actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
$actionsheet-padding: $global-padding;
$actionsheet-tail-size: 10px;
$actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
$actionsheet-link-color: #000;
$actionsheet-link-background-hover: smartscale($actionsheet-background);