--- name: action-sheet url: /action-sheet title: Action Sheet animateIn: fadeIn animateOut: fadeOut ---

Action Sheet

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.


Tap to share


Basic HTML

You can create an actionsheet with this basic directive.

Tap to share

Tap to share


Additional Options

To use a custom buttom, 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);