--- name: action-sheet url: /action-sheet title: Action Sheet ---

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.


Share this


Basic HTML

You can create an action sheet with this basic directive. The position attribute can be set as "top" or "bottom."

Tap to share

Tap to share


Additional Options

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.

Toggle Hide

Message for you, sir!

Message for you, sir!

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.