Action Sheet / Actions - 图1

Action Sheet

Action Sheet is a slide-up pane for presenting the user with a set of alternatives for how to proceed with a given task.

You can also use action sheets to prompt the user to confirm a potentially dangerous action.

The action sheet contains an optional title and one or more buttons, each of which corresponds to an action to take.

Note that it is not recommended to use Action Sheet on large screens (iPad). On large screens you should use Popover instead.

Action Sheet App Methods

Lets look at related App methods to work with the Action Sheet:

app.actions.create(parameters)- create Action Sheet instance

  • parameters - object. Object with action sheet parameters

Method returns created Action Sheet’s instance

app.actions.destroy(el)- destroy Action Sheet instance

  • el - HTMLElement or string (with CSS Selector) or object. Action element instance to destroy.

app.actions.get(el)- get Action Sheet instance by HTML element

  • el - HTMLElement or string (with CSS Selector). Action Sheet element.

Method returns Action Sheet’s instance

app.actions.open(el, animate)- opens Action Sheet

  • el - HTMLElement or string (with CSS Selector). Action Sheet element to open.
  • animate - boolean. Open Actions Sheet with animation.

Method returns Action Sheet’s instance

app.actions.close(el, animate)- closes Action Sheet

  • el - HTMLElement or string (with CSS Selector). Action Sheet element to close.
  • animate - boolean. Close Actions Sheet with animation.

Method returns Action Sheet’s instance

Action Sheet Parameters

Now lets look at a list of available parameters we need to create the Action Sheet:

ParameterTypeDefaultDescription
elHTMLElementAction Sheet element. Can be useful if you already have Action Sheet element in your HTML and want to create new instance using this element
contentstringFull Action Sheet HTML content string. Can be useful if you want to create Action Sheet element with custom HTML
backdropbooleantrueEnables Action Sheet backdrop (dark semi transparent layer behind)
closeByBackdropClickbooleantrueWhen enabled, action sheet will be closed on backdrop click
closeByOutsideClickbooleanfalseWhen enabled, action sheet will be closed on when click outside of it
animatebooleantrueWhether the Action Sheet should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods
buttonsarrayAction sheet groups/buttons. In this case Actions layout will be generated dynamically based on passed groups and buttons. In case of groups it should array where each item represent array with buttons for group.
gridbooleanfalseEnables grid buttons layout
convertToPopoverbooleantrueWhen enabled, action sheet will be converted to Popover on large screens.
forceToPopoverbooleanfalseWhen enabled, action sheel will be always converted to Popover.
targetElHTMLElement
string		HTML element or string CSS selector of target element. Required when converstion to popover is in use
targetXnumberVirtual target element horizontal offset from left side of the screen. Required when converstion to popover is in use without using real target element (targetEl)
targetYnumberVirtual target element vertical offset from top of the screen. Required when converstion to popover is in use without using real target element (targetEl)
targetWidthnumber0Virtual target element width (in px). Required when converstion to popover is in use without using real target element (targetEl)
targetHeightnumber0Virtual target element height (in px). Required when converstion to popover is in use without using real target element (targetEl)
onClickfunction(actions, e)Callback function that will be executed after click on the Action Sheet button
renderfunctionCustom function to render Action Sheet. Must return Action Sheet html
renderPopoverfunctionCustom function to render Popover when conversition to popover is in use. Must return Popover html
onobjectObject with events handlers. For example:
  1. var actions = app.actions.create({
  2.   buttons: [ / … / ],
  3.   on: {
  4.     opened: function () {
  5.       console.log(‘Action Sheet opened’)
  6.     }
  7.   }
  8. })

Note that all of the following parameters can be used in the global app parameters under the actions property to set defaults for all action sheets. For example:

  1. var app = new Framework7({
  2.   actions: {
  3.     convertToPopover: false,
  4.     grid: true,
  5.   }
  6. });

Button Parameters

Each Button in buttons array must be presented as an object with button parameters:

ParameterTypeDefaultDescription
textstringString with Button’s text (could be HTML string)
iconstringHTML string of icon
boldbooleanfalseEnables bold button text
colorstringButton color, one of default colors
bgstringButton background color, one of default colors
labelbooleanfalseIf enabled then it will be rendered as label instead of button
disabledbooleanfalseDefines whether the button is disabled or not.
closebooleantrueIf enabled then button click will close Action Sheet
onClickfunction(actions, e)Callback function that will be executed after click on this button

Action Sheet Methods & Properties

So to create an Action Sheet we have to call:

  1. var actions = app.actions.create({ /* parameters */ })

After that we have its initialized instance (like actions variable in example above) with useful methods and properties:

Properties
actions.appLink to global app instance
actions.elAction sheet HTML element
actions.$elDom7 instance with action sheet HTML element
actions.backdropElBackdrop HTML element
actions.$backdropElDom7 instance with backdrop HTML element
actions.paramsAction sheet instance parameters
actions.openedBoolean prop indicating whether action sheet is opened or not
Methods
actions.open(animate)Open action sheet. Where
  • animate - boolean (by default true) - defines whether it should be opened with animation
actions.close(animate)Close action sheet. Where
  • animate - boolean (by default true) - defines whether it should be closed with animation
actions.destroy()Destroy action sheet
actions.on(event, handler)Add event handler
actions.once(event, handler)Add event handler that will be removed after it was fired
actions.off(event, handler)Remove event handler
actions.off(event)Remove all handlers for specified event
actions.emit(event, …args)Fire event on instance

Control Action Sheet With Links

It is possible to open and close required action sheets (if you have them in DOM) using special classes and data attributes on links:

  • To open action sheet we need to add “actions-open“ class to any HTML element (prefered to link)

  • To close action sheet we need to add “actions-close“ class to any HTML element (prefered to link)

  • If you have more than one action sheet in DOM, you need to specify appropriate action sheet via additional data-actions=”.my-actions” attribute on this HTML element

According to above note:

  1. <!-- In data-actions attribute we specify CSS selector of action sheet we need to open -->
  2. <p><a href="#" data-actions=".my-actions" class="actions-open">Open Actions</a></p>
  4. <!-- And somewhere in DOM -->
  5. <div class="actions-modal my-actions">
  6.   ...
  7. </div>

Action Sheet Events

Action sheet will fire the following DOM events on action sheet element and events on app and action sheet instance:

DOM Events

EventTargetDescription
actions:openAction Sheet Element<div class=”actions-modal”>Event will be triggered when Action Sheet starts its opening animation
actions:openedAction Sheet Element<div class=”actions-modal”>Event will be triggered after Action Sheet completes its opening animation
actions:closeAction Sheet Element<div class=”actions-modal”>Event will be triggered when Action Sheet starts its closing animation
actions:closedAction Sheet Element<div class=”actions-modal”>Event will be triggered after Action Sheet completes its closing animation

App and Action Sheet Instance Events

Action Sheet instance emits events on both self instance and app instance. App instance events has same names prefixed with actions.

EventArgumentsTargetDescription
openactionsactionsEvent will be triggered when Action Sheet starts its opening animation. As an argument event handler receives action sheet instance
actionsOpenactionsapp
openedactionsactionsEvent will be triggered after Action Sheet completes its opening animation. As an argument event handler receives action sheet instance
actionsOpenedactionsapp
closeactionsactionsEvent will be triggered when Action Sheet starts its closing animation. As an argument event handler receives action sheet instance
actionsCloseactionsapp
closedactionsactionsEvent will be triggered after Action Sheet completes its closing animation. As an argument event handler receives action sheet instance
actionsClosedactionsapp
beforeDestroyactionsactionsEvent will be triggered right before Action Sheet instance will be destroyed. As an argument event handler receives action sheet instance
actionsBeforeDestroyactionsapp

Examples

  1. <body>
  2. ...
  3.  <div class="page-content">
  4.   <div class="block">
  5.     <p><a class="ac-1" href="#">One group, three buttons</a></p>
  6.     <p><a class="ac-2" href="#">One group, title, three buttons</a></p>
  7.     <p><a class="ac-3" href="#">Two groups</a></p>
  8.     <p><a class="ac-4" href="#">Three groups</a></p>
  9.     <p><a class="ac-5" href="#">With callbacks on click</a></p>
  10.     <p><a class="ac-6" href="#">Actions grid</a></p>
  11.   </div>
  12. </div>
  13. ...
  14. </body>
  1. var app = new Framework7();
  3. var $$ = Dom7;
  5. //- One group, three buttons
  6. var ac1 = app.actions.create({
  7.   buttons: [
  8.     {
  9.       text: 'Button1',
  10.       bold: true
  11.     },
  12.     {
  13.       text: 'Button2'
  14.     },
  15.     {
  16.       text: 'Cancel',
  17.       color: 'red'
  18.     },
  19.   ]
  20. })
  21. //- One group, title, three buttons
  22. var ac2 = app.actions.create({
  23.   buttons: [
  24.     {
  25.       text: 'Do something',
  26.       label: true
  27.     },
  28.     {
  29.       text: 'Button1',
  30.       bold: true
  31.     },
  32.     {
  33.       text: 'Button2',
  34.     },
  35.     {
  36.       text: 'Cancel',
  37.       color: 'red'
  38.     },
  39.   ]
  40. });
  41. //- Two groups
  42. var ac3 = app.actions.create({
  43.   buttons: [
  44.     // First group
  45.     [
  46.       {
  47.         text: 'Do something',
  48.         label: true
  49.       },
  50.       {
  51.         text: 'Button1',
  52.         bold: true
  53.       },
  54.       {
  55.         text: 'Button2',
  56.       }
  57.     ],
  58.     // Second group
  59.     [
  60.       {
  61.         text: 'Cancel',
  62.         color: 'red'
  63.       }
  64.     ]
  65.   ]
  66. });
  67. //- Three groups
  68. var ac4 = app.actions.create({
  69.   buttons: [
  70.     [
  71.       {
  72.         text: 'Share',
  73.         label: true
  74.       },
  75.       {
  76.         text: 'Mail',
  77.       },
  78.       {
  79.         text: 'Messages',
  80.       }
  81.     ],
  82.     [
  83.       {
  84.         text: 'Social share',
  85.         label: true
  86.       },
  87.       {
  88.         text: 'Facebook',
  89.       },
  90.       {
  91.         text: 'Twitter',
  92.       }
  93.     ],
  94.     [
  95.       {
  96.         text: 'Cancel',
  97.         color: 'red'
  98.       }
  99.     ]
  100.   ],
  101. });
  102. //- With callbacks on click
  103. var ac5 = app.actions.create({
  104.   buttons: [
  105.     {
  106.       text: 'Button1',
  107.       onClick: function () {
  108.         app.dialog.alert('Button1 clicked')
  109.       }
  110.     },
  111.     {
  112.       text: 'Button2',
  113.       onClick: function () {
  114.         app.dialog.alert('Button2 clicked')
  115.       }
  116.     },
  117.     {
  118.       text: 'Cancel',
  119.       color: 'red',
  120.       onClick: function () {
  121.         app.dialog.alert('Cancel clicked')
  122.       }
  123.     },
  124.   ]
  125. });
  126. //- Actions Grid
  127. var ac6 = app.actions.create({
  128.   grid: true,
  129.   buttons: [
  130.     [
  131.       {
  132.         text: 'Button 1',
  133.         icon: '<img src="http://lorempixel.com/96/96/people/1" width="48"/>'
  134.       },
  135.       {
  136.         text: 'Button 2',
  137.         icon: '<img src="http://lorempixel.com/96/96/people/2" width="48">'
  138.       },
  139.       {
  140.         text: 'Button 3',
  141.         icon: '<img src="http://lorempixel.com/96/96/people/3" width="48">'
  142.       },
  143.     ],
  144.     [
  145.       {
  146.         text: 'Button 1',
  147.         icon: '<img src="http://lorempixel.com/96/96/fashion/4" width="48"/>'
  148.       },
  149.       {
  150.         text: 'Button 2',
  151.         icon: '<img src="http://lorempixel.com/96/96/fashion/5" width="48">'
  152.       },
  153.       {
  154.         text: 'Button 3',
  155.         icon: '<img src="http://lorempixel.com/96/96/fashion/6" width="48">'
  156.       },
  157.     ]
  158.   ]
  159. });
  161. $$('.ac-1').on('click', function () {
  162.     ac1.open();
  163. });
  164. $$('.ac-2').on('click', function () {
  165.     ac2.open();
  166. });
  167. $$('.ac-3').on('click', function () {
  168.     ac3.open();
  169. });
  170. $$('.ac-4').on('click', function () {
  171.     ac4.open();
  172. });
  173. $$('.ac-5').on('click', function () {
  174.     ac5.open();
  175. });
  176. $$('.ac-6').on('click', function () {
  177.     ac6.open();
  178. });