-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Action Sheet React Component
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.
Usage example
<!-- Actions -->
<Actions>
<!-- Actions Group -->
<ActionsGroup>
<!-- Actions Label -->
<ActionsLabel>Hello</ActionsLabel>
<!-- Actions Buttons -->
<ActionsButton>Button 1</ActionsButton>
<ActionsButton onClick={doSomething}>Button 2</ActionsButton>
</ActionsGroup>
<!-- Another Group -->
<ActionsGroup>
<!-- Cancel/Close Button -->
<ActionsButton color="red" bold>Cancel</ActionsButton>
</ActionsGroup>
</Actions>
Renders to:
<div class="actions-modal">
<div class="actions-modal-group">
<div class="actions-modal-label">Hello</div>
<div class="actions-modal-button">Button 1</div>
<div class="actions-modal-button">Button 2</div>
</div>
<div class="actions-modal-group">
<div class="actions-modal-button color-red actions-modal-button-bold">Cancel</div>
</div>
</div>
Properties
Prop | Type | Default | Description |
---|---|---|---|
<Actions> properties | |||
opened | boolean | Allows to open/close Action Sheet and set its initial state | |
<ActionsLabel> properties | |||
color | string | Actions label color. One of default colors | |
bold | boolean | Defines whether the label text is bold or not | |
<ActionsButton> properties | |||
color | string | Actions button color. One of default colors | |
bold | boolean | Defines whether the button text is bold or not | |
close | boolean | true | Should Action Sheet be closed on button click or not |
Event Properties
Event | Description |
---|---|
onActionsOpen | Event will be triggered when Action Sheet starts its opening animation |
onActionsOpened | Event will be triggered after Action Sheet completes its opening animation |
onActionsClose | Event will be triggered when Action Sheet starts its closing animation |
onActionsClosed | Event will be triggered after Action Sheet completes its closing animation |
Open and close Action Sheet
You can control Action Sheet state, open and closing it:
- using its JavaScript API
- by passing true or false to its
opened
prop