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:

var actions = app.actions.create({
  buttons: [ / … / ],
  on: {
    opened: function () {
      console.log(‘Action Sheet opened’)
    }
  }
})

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:

var app = new Framework7({
  actions: {
    convertToPopover: false,
    grid: true,
  }
});

Button Parameters

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

Action Sheet Methods & Properties

So to create an Action Sheet we have to call:

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

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

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:

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

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.

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  --f7-actions-grid-button-font-size: 12px;
  --f7-actions-grid-button-text-color: #757575;
}
.ios {
  --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
  --f7-actions-border-radius: 13px;
  --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
  /*
  --f7-actions-button-text-color: var(--f7-theme-color);
  */
  --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
  --f7-actions-button-padding: 0px;
  --f7-actions-button-text-align: center;
  --f7-actions-button-height: 57px;
  --f7-actions-button-height-landscape: 44px;
  --f7-actions-button-font-size: 20px;
  --f7-actions-button-icon-size: 28px;
  --f7-actions-button-justify-content: center;
  --f7-actions-label-padding: 8px 10px;
  --f7-actions-label-text-color: #8a8a8a;
  --f7-actions-label-font-size: 13px;
  --f7-actions-label-justify-content: center;
  --f7-actions-group-border-color: transparent;
  --f7-actions-group-margin: 8px;
  --f7-actions-grid-button-icon-size: 48px;
}
.md {
  --f7-actions-bg-color: #fff;
  --f7-actions-border-radius: 0px;
  --f7-actions-button-border-color: transparent;
  --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
  --f7-actions-button-pressed-bg-color: #e5e5e5;
  --f7-actions-button-padding: 0 16px;
  --f7-actions-button-text-align: left;
  --f7-actions-button-height: 48px;
  --f7-actions-button-height-landscape: 48px;
  --f7-actions-button-font-size: 16px;
  --f7-actions-button-icon-size: 24px;
  --f7-actions-button-justify-content: space-between;
  --f7-actions-label-padding: 12px 16px;
  --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
  --f7-actions-label-font-size: 16px;
  --f7-actions-label-justify-content: flex-start;
  --f7-actions-group-border-color: #d2d2d6;
  --f7-actions-group-margin: 0px;
  --f7-actions-grid-button-icon-size: 48px;
}
.aurora {
  --f7-actions-bg-color: #fff;
  --f7-actions-border-radius: 4px;
  --f7-actions-button-border-color: rgba(0, 0, 0, 0.12);
  /*
  --f7-actions-button-text-color: var(--f7-theme-color);
  */
  --f7-actions-button-pressed-bg-color: #e5e5e5;
  --f7-actions-button-padding: 0 15px;
  --f7-actions-button-text-align: center;
  --f7-actions-button-height: 32px;
  --f7-actions-button-height-landscape: 32px;
  --f7-actions-button-font-size: 14px;
  --f7-actions-button-icon-size: 18px;
  --f7-actions-button-justify-content: space-between;
  --f7-actions-label-padding: 10px 15px;
  --f7-actions-label-text-color: rgba(0, 0, 0, 0.5);
  --f7-actions-label-font-size: 12px;
  --f7-actions-label-justify-content: center;
  --f7-actions-group-border-color: rgba(0, 0, 0, 0.1);
  --f7-actions-group-margin: 15px;
  --f7-actions-grid-button-icon-size: 32px;
}

Examples

<body>
...
  <div class="page-content">
  <div class="block">
    <p><a class="ac-1" href="#">One group, three buttons</a></p>
    <p><a class="ac-2" href="#">One group, title, three buttons</a></p>
    <p><a class="ac-3" href="#">Two groups</a></p>
    <p><a class="ac-4" href="#">Three groups</a></p>
    <p><a class="ac-5" href="#">With callbacks on click</a></p>
    <p><a class="ac-6" href="#">Actions grid</a></p>
  </div>
</div>
...
</body>

var app = new Framework7();
var $$ = Dom7;
//- One group, three buttons
var ac1 = app.actions.create({
  buttons: [
    {
      text: 'Button1',
      bold: true
    },
    {
      text: 'Button2'
    },
    {
      text: 'Cancel',
      color: 'red'
    },
  ]
})
//- One group, title, three buttons
var ac2 = app.actions.create({
  buttons: [
    {
      text: 'Do something',
      label: true
    },
    {
      text: 'Button1',
      bold: true
    },
    {
      text: 'Button2',
    },
    {
      text: 'Cancel',
      color: 'red'
    },
  ]
});
//- Two groups
var ac3 = app.actions.create({
  buttons: [
    // First group
    [
      {
        text: 'Do something',
        label: true
      },
      {
        text: 'Button1',
        bold: true
      },
      {
        text: 'Button2',
      }
    ],
    // Second group
    [
      {
        text: 'Cancel',
        color: 'red'
      }
    ]
  ]
});
//- Three groups
var ac4 = app.actions.create({
  buttons: [
    [
      {
        text: 'Share',
        label: true
      },
      {
        text: 'Mail',
      },
      {
        text: 'Messages',
      }
    ],
    [
      {
        text: 'Social share',
        label: true
      },
      {
        text: 'Facebook',
      },
      {
        text: 'Twitter',
      }
    ],
    [
      {
        text: 'Cancel',
        color: 'red'
      }
    ]
  ],
});
//- With callbacks on click
var ac5 = app.actions.create({
  buttons: [
    {
      text: 'Button1',
      onClick: function () {
        app.dialog.alert('Button1 clicked')
      }
    },
    {
      text: 'Button2',
      onClick: function () {
        app.dialog.alert('Button2 clicked')
      }
    },
    {
      text: 'Cancel',
      color: 'red',
      onClick: function () {
        app.dialog.alert('Cancel clicked')
      }
    },
  ]
});
//- Actions Grid
var ac6 = app.actions.create({
  grid: true,
  buttons: [
    [
      {
        text: 'Button 1',
        icon: '<img src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg" width="48"/>'
      },
      {
        text: 'Button 2',
        icon: '<img src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg" width="48">'
      },
      {
        text: 'Button 3',
        icon: '<img src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg" width="48">'
      },
    ],
    [
      {
        text: 'Button 1',
        icon: '<img src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg" width="48"/>'
      },
      {
        text: 'Button 2',
        icon: '<img src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg" width="48">'
      },
      {
        text: 'Button 3',
        icon: '<img src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg" width="48">'
      },
    ]
  ]
});
$$('.ac-1').on('click', function () {
    ac1.open();
});
$$('.ac-2').on('click', function () {
    ac2.open();
});
$$('.ac-3').on('click', function () {
    ac3.open();
});
$$('.ac-4').on('click', function () {
    ac4.open();
});
$$('.ac-5').on('click', function () {
    ac5.open();
});
$$('.ac-6').on('click', function () {
    ac6.open();
});