Action Sheet React Component
- Action Sheet Components
- Action Sheet Properties
- Action Sheet Methods
- Action Sheet Events
- Open And Close Action Sheet
- Access To Action Sheet Instance
- Examples
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.
Action Sheet React component represents Action Sheet component.
Action Sheet Components
There are following components included:
Actions
/F7Actions
- action sheet elementActionsGroup
/F7ActionsGroup
- action sheet buttons groupActionsButton
/F7ActionsButton
- action sheet buttonActionsLabel
/F7ActionsLabel
- action sheet label
Action Sheet Properties
Prop | Type | Default | Description |
---|---|---|---|
<Actions> properties | |||
opened | boolean | false | Allows to open/close Action Sheet and set its initial state |
grid | boolean | false | Enables grid buttons layout |
convertToPopover | boolean | When enabled, action sheet will be converted to Popover on large screens. By default inherits same app parameter value | |
forceToPopover | boolean | When enabled, action sheet will be always converted to Popover. By default inherits same app parameter value | |
target | HTMLElement string | HTML element or string CSS selector of target element. Required when conversion to popover is in use | |
backdrop | boolean | Enables action sheet backdrop (dark semi transparent layer behind). By default inherits same app parameter value (true ) | |
backdropEl | string object | HTML element or string CSS selector of custom backdrop element | |
closeByBackdropClick | boolean | true | When enabled, action sheet will be closed on backdrop click. By default inherits same app parameter value |
closeByOutsideClick | boolean | false | When enabled, action sheet will be closed on when click outside of it. By default inherits same app parameter value |
closeOnEscape | boolean | When enabled, action sheet will be closed on ESC keyboard key press | |
<ActionsLabel> properties | |||
bold | boolean | false | Defines whether the label text is bold or not |
<ActionsButton> properties | |||
bold | boolean | false | Defines whether the button text is bold or not |
close | boolean | true | Should Action Sheet be closed on button click or not |
Action Sheet Methods
<Actions> methods | |
---|---|
.open(animate) | Open Action Sheet |
.close(animate) | Close Action Sheet |
Action Sheet Events
Event | Description |
---|---|
<Actions> events | |
actionsOpen | Event will be triggered when Action Sheet starts its opening animation |
actionsOpened | Event will be triggered after Action Sheet completes its opening animation |
actionsClose | Event will be triggered when Action Sheet starts its closing animation |
actionsClosed | Event will be triggered after Action Sheet completes its closing animation |
Open And Close Action Sheet
In addition to Action Sheet open()/close() methods, you can open and close it:
- using Action Sheet API
- by passing
true
orfalse
to itsopened
prop
Access To Action Sheet Instance
You can access Action Sheet initialized instance by accessing .f7Actions
component's property.
Examples
export default class extends React.Component {
constructor() {
super();
this.state = {
actionGridOpened: false,
oneGroupOpened: false
};
}
render() {
return (
<Page>
<Navbar title="Action Sheet"></Navbar>
<Block strong>
<p className="row">
{/* One group, open by direct accessing instance .open() method */}
<Button className="col" raised onClick={() => this.refs.actionsOneGroup.open()}>One group</Button>
{/* Two groups, open by "actionsOpen" attribute */}
<Button className="col" raised actionsOpen="#actions-two-groups">Two groups</Button>
</p>
<p>
{/* Actions Grid, open by changing actionGridOpened state property */}
<Button raised onClick={() => this.setActionsGridOpened(true)}>Action Grid</Button>
</p>
</Block>
<BlockTitle>Action Sheet To Popover</BlockTitle>
<Block strong>
<p ref={e => this.buttonToPopoverWrapper = e}>
Action Sheet can be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones:
<Button
style={{ display: 'inline-block' }}
className="button-to-popover"
onClick={this.openActionsPopover.bind(this)}>
Actions
</Button>
</p>
</Block>
{/* One Group */}
<Actions ref="actionsOneGroup">
<ActionsGroup>
<ActionsLabel>Do something</ActionsLabel>
<ActionsButton bold>Button 1</ActionsButton>
<ActionsButton>Button 2</ActionsButton>
<ActionsButton color="red">Cancel</ActionsButton>
</ActionsGroup>
</Actions>
{/* Two Groups */}
<Actions id="actions-two-groups">
<ActionsGroup>
<ActionsLabel>Do something</ActionsLabel>
<ActionsButton bold>Button 1</ActionsButton>
<ActionsButton>Button 2</ActionsButton>
</ActionsGroup>
<ActionsGroup>
<ActionsButton color="red">Cancel</ActionsButton>
</ActionsGroup>
</Actions>
{/* Grid */}
<Actions grid={true} opened={this.state.actionGridOpened} onActionsClosed={() => this.setActionsGridOpened(false)}>
<ActionsGroup>
<ActionsButton>
<img slot="media" src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg" width="48"/>
<span>Button 1</span>
</ActionsButton>
<ActionsButton>
<img slot="media" src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg" width="48"/>
<span>Button 2</span>
</ActionsButton>
<ActionsButton>
<img slot="media" src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg" width="48"/>
<span>Button 3</span>
</ActionsButton>
</ActionsGroup>
<ActionsGroup>
<ActionsButton>
<img slot="media" src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg" width="48"/>
<span>Button 4</span>
</ActionsButton>
<ActionsButton>
<img slot="media" src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg" width="48"/>
<span>Button 5</span>
</ActionsButton>
<ActionsButton>
<img slot="media" src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg" width="48"/>
<span>Button 6</span>
</ActionsButton>
</ActionsGroup>
</Actions>
</Page>
)
}
componentWillUnmount() {
if (this.actionsToPopover) {
this.actionsToPopover.destroy();
}
}
openActionsPopover() {
const app = this.$f7;
if (!this.actionsToPopover) {
this.actionsToPopover = app.actions.create({
buttons: [
{
text: 'Do something',
label: true,
},
{
text: 'Button 1',
bold: true,
},
{
text: 'Button 2',
},
{
text: 'Cancel',
color: 'red',
},
],
// Need to specify popover target
targetEl: this.buttonToPopoverWrapper.querySelector('.button-to-popover'),
});
}
// Open
this.actionsToPopover.open();
}
setOneGroupOpened(oneGroupOpened) {
this.setState({
oneGroupOpened
});
}
setActionsGridOpened(actionGridOpened) {
this.setState({
actionGridOpened
});
}
}