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!