Action Sheet Svelte 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 Svelte component represents Action Sheet component.

Action Sheet Components

There are following components included:

Actions - action sheet element
ActionsGroup - action sheet buttons group
ActionsButton - action sheet button
ActionsLabel - 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
backdropUnique	boolean		If enabled it creates unique backdrop element exclusively for this modal
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
animate	boolean		Whether the modal should be opened/closed with animation or not
containerEl	HTMLElement string		Element to mount modal to (default to app root element)
<ActionsLabel> properties
strong	boolean	false	Defines whether the label text is bold or not
<ActionsButton> properties
strong	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 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 or false to its opened prop

Access To Action Sheet Instance

You can access Action Sheet initialized instance by calling .instance() component's method. For example:

<Actions bind:this={component}>...</Actions>

<script>
  let component;

  // to get instance in some method
  component.instance()
</script>

Examples

action-sheet.svelte

<script>
  import { onDestroy } from 'svelte';
  import {
    f7,
    Navbar,
    Page,
    BlockTitle,
    Block,
    Button,
    Actions,
    ActionsGroup,
    ActionsLabel,
    ActionsButton,
  } from 'framework7-svelte';

  let actionsOneGroupOpened = false;
  let actionGridOpened = false;

  let actionsToPopover;
  let buttonToPopoverWrapper;

  function openActionsPopover() {
    if (!actionsToPopover) {
      actionsToPopover = f7.actions.create({
        buttons: [
          {
            text: 'Do something',
            label: true,
          },
          {
            text: 'Button 1',
            strong: true,
          },
          {
            text: 'Button 2',
          },
          {
            text: 'Cancel',
            color: 'red',
          },
        ],
        // Need to specify popover target
        targetEl: buttonToPopoverWrapper.querySelector('.button-to-popover'),
      });
    }

    // Open
    actionsToPopover.open();
  }

  onDestroy(() => {
    if (actionsToPopover) {
      actionsToPopover.destroy();
    }
  });
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<Page>
  <Navbar title="Action Sheet" />
  <Block strong inset>
    <p class="grid grid-cols-2 grid-gap">
      <!-- One group, open by direct accessing instance .open() method -->
      <Button
        fill
        onClick={() => {
          actionsOneGroupOpened = true;
        }}
      >
        One group
      </Button>
      <!--  Two groups, open by "actionsOpen" attribute -->
      <Button fill actionsOpen="#actions-two-groups">Two groups</Button>
    </p>
    <p>
      <!-- Actions Grid, open by changing actionGridOpened state property -->
      <Button
        fill
        onClick={() => {
          actionGridOpened = true;
        }}
      >
        Action Grid
      </Button>
    </p>
  </Block>

  <BlockTitle>Action Sheet To Popover</BlockTitle>
  <Block strong inset>
    <p bind:this={buttonToPopoverWrapper}>
      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" class="button-to-popover" onClick={openActionsPopover}>
        Actions
      </Button>
    </p>
  </Block>

  <!-- One Group -->
  <Actions bind:opened={actionsOneGroupOpened}>
    <ActionsGroup>
      <ActionsLabel>Do something</ActionsLabel>
      <ActionsButton strong>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 strong>Button 1</ActionsButton>
      <ActionsButton>Button 2</ActionsButton>
    </ActionsGroup>
    <ActionsGroup>
      <ActionsButton color="red">Cancel</ActionsButton>
    </ActionsGroup>
  </Actions>

  <!-- Grid -->
  <Actions grid={true} bind:opened={actionGridOpened}>
    <ActionsGroup>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 1</span>
      </ActionsButton>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 2</span>
      </ActionsButton>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 3</span>
      </ActionsButton>
    </ActionsGroup>
    <ActionsGroup>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 4</span>
      </ActionsButton>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 5</span>
      </ActionsButton>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 6</span>
      </ActionsButton>
    </ActionsGroup>
  </Actions>
</Page>

Improve this Doc

On this page

Action Sheet Components
Action Sheet Properties
Action Sheet Events
Open And Close Action Sheet
Access To Action Sheet Instance
Examples