How to properly close an action-sheet in Foundation Apps?

Question

I have the exact same action sheet as in the example:

<div zf-action-sheet="">
  <div zf-as-button="" title="I'm an Action Sheet"></div>
  <div zf-as-content="" position="bottom">
    <p>Tap to share</p>
    <ul>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Mail</a></li>
    </ul>
  </div>
</div>

How do I tell Foundation Apps to close the action sheet when clicking on the links? I'd rather not name my action sheet if possible. From the docs it seems I should be able to just add zf-hide="" or zf-close="" to the links but neither work.

Answer 1

From this it looks like by default it will close only if you click outside of it. And from this I think you have to name your action sheet within its id attribute. Then you can use zf-close inside your links.

This worked for me but the href attribute will be ignored and the link won't take you any where unless you use ui-sref instead :

<div id="MyActionSheet" zf-action-sheet="">
  <div zf-as-button="" title="I'm an Action Sheet"></div>
  <div zf-as-content="" position="bottom">
    <p>Tap to share</p>
    <ul>
      <li><a zf-close="MyActionSheet" href="#">Twitter</a></li>
      <!-- 'href' attribute will be ignored so this is same as href="#"-->
      <li><a zf-close="MyActionSheet" href="/Facebook">Facebook</a></li>
      <!-- this will take you to the 'mail' page -->
      <li><a zf-close="MyActionSheet" ui-sref="mail">Mail</a></li>
    </ul>
  </div>
</div>