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 is not recommended to use Action Sheet on large screens (iPad). On large screens you should use Popover instead or Action Sheet To Popover coversion.
Action sheet is the dynamic element, it could be created and opened only using JavaScript. Let's look at the related App's method to create Action Sheet:
myApp.actions(groups, animated) - create and open Action Sheet with specified amount of buttons groups
or
myApp.actions(buttons, animated) - create and open Action Sheet with one group and specified buttons
Each Button in buttons should be presented as Object with button parameters:
| Parameter | Type | Default | Description |
|---|---|---|---|
| text | string | String with Button's text (could be HTML string) | |
| bold | boolean | false | Optional. Set to true for bold button text |
| color | string | Optional. Button color, one of 10 default colors | |
| bg | string | Optional. Button background color, one of 10 default colors | |
| label | boolean | true | Optional. If "true" then it will be title instead of button |
| disabled | boolean | false | Optional. Set to "true" if you want to make button disabled |
| onClick | function | Optional. Callback function that will be executed when user click this button |
Let's look at examples
<body>
...
<div class="page-content">
<div class="content-block">
<p><a href="#" class="ac-1">One group, three buttons</a></p>
<p><a href="#" class="ac-2">One group, title, three buttons</a></p>
<p><a href="#" class="ac-3">Two groups</a></p>
<p><a href="#" class="ac-4">Three groups</a></p>
<p><a href="#" class="ac-5">With callbacks on click</a></p>
</div>
</div>
...
</body>var myApp = new Framework7();
var $$ = Dom7;
//- One group, three buttons
$$('.ac-1').on('click', function () {
var buttons = [
{
text: 'Button1',
bold: true
},
{
text: 'Button2'
},
{
text: 'Cancel',
color: 'red'
},
];
myApp.actions(buttons);
});
//- One group, title, three buttons
$$('.ac-2').on('click', function () {
var buttons = [
{
text: 'Do something',
label: true
},
{
text: 'Button1',
bold: true
},
{
text: 'Button2',
},
{
text: 'Cancel',
color: 'red'
},
];
myApp.actions(buttons);
});
//- Two groups
$$('.ac-3').on('click', function () {
var buttons1 = [
{
text: 'Do something',
label: true
},
{
text: 'Button1',
bold: true
},
{
text: 'Button2',
}
];
var buttons2 = [
{
text: 'Cancel',
color: 'red'
}
];
var groups = [buttons1, buttons2];
myApp.actions(groups);
});
//- Three groups
$$('.ac-4').on('click', function () {
var buttons1 = [
{
text: 'Share',
label: true
},
{
text: 'Mail',
},
{
text: 'Messages',
}
];
var buttons2 = [
{
text: 'Social share',
label: true
},
{
text: 'Facebook',
},
{
text: 'Twitter',
}
];
var buttons3 = [
{
text: 'Cancel',
color: 'red'
}
];
var groups = [buttons1, buttons2, buttons3];
myApp.actions(groups);
});
//- With callbacks on click
$$('.ac-5').on('click', function () {
var buttons = [
{
text: 'Button1',
onClick: function () {
myApp.alert('Button1 clicked');
}
},
{
text: 'Button2',
onClick: function () {
myApp.alert('Button2 clicked');
}
},
{
text: 'Cancel',
color: 'red',
onClick: function () {
myApp.alert('Cancel clicked');
}
},
];
myApp.actions(buttons);
}); Because it is not recommended to use Popover on phones (iPhone) and not recommended to use Action Sheet on tablets (iPad) you can use extended Action Sheet syntax that will convert Action Sheet to Popover automatically on tablets:
myApp.actions(target, groups, animated) - create and open Action Sheet (or Popover on tablets) with specified amount of buttons groups
or
myApp.actions(target, buttons, animated) - create and open Action Sheet (or Popover on tablets) with one group and specified buttons
var myApp = new Framework7();
var $$ = Dom7;
$$('.something').on('click', function (e) {
var target = this;
var buttons = [
{
text: 'Button 1'
},
{
text: 'Button 2'
}
];
myApp.actions(target, buttons);
});By default, Action sheet will be automatically closed when:
modalActionsCloseByOutside App initialization parameter)To close Action sheet manually we can use appropriate App's method:
myApp.closeModal(actionSheet) - close Popup
Action Sheet has the same events as any Modal
| Event | Target | Description |
|---|---|---|
| actions:open | Action Sheet Element<div class="actions-modal"> | Event will be triggered when Action Sheet starts its opening animation |
| actions:opened | Action Sheet Element<div class="actions-modal"> | Event will be triggered after Action Sheet completes its opening animation |
| actions:close | Action Sheet Element<div class="actions-modal"> | Event will be triggered when Action Sheet starts its closing animation |
| actions:closed | Action Sheet Element<div class="actions-modal"> | Event will be triggered after Action Sheet completes its closing animation |
If you want to customize Action Sheet template, you may customize it by passing modalActionsTemplate parameter on App initialization. This parameter accepts Template7 formatted HTML string that will be compiled by Template7 with passed groups context.
So the acceptable template could look like:
<!-- This template equalt to default layout -->
<div class="actions-modal">
<!-- this is a single group -->
{{#each this}}
<div class="actions-modal-group">
<!-- now this represents a single button -->
{{#each this}}
{{#if label}}
<span class="actions-modal-label">{{text}}</span>
{{else}}
<div class="actions-modal-button {{#if color}}color-{{color}}{{/if}} {{#if bold}}actions-modal-button-bold{{/if}}">{{text}}</div>
{{/if}}
{{/each}}
</div>
{{/each}}
</div> If you use convertation of Action Sheet to Popover, then you may customize Popover template by passing modalActionsToPopoverTemplate parameter on App initialization. This parameter accepts Template7 formatted HTML string that will be compiled by Template7 with passed groups context.
Here is the default template:
<div class="popover actions-popover">
<div class="popover-inner">
{{#each this}}
<div class="list-block">
<ul>
{{#each this}}
{{#if label}}
<li class="actions-popover-label {{#if color}}color-{{color}}{{/if}} {{#if bold}}actions-popover-bold{{/if}}">{{text}}</li>
{{else}}
<li><a href="#" class="item-link list-button {{#if color}}color-{{color}}{{/if}} {{#if bg}}bg-{{bg}}{{/if}} {{#if bold}}actions-popover-bold{{/if}} {{#if disabled}}disabled{{/if}}">{{text}}</a></li>
{{/if}}
{{/each}}
</ul>
</div>
{{/each}}
</div>
</div>