Novice, Practiced, Mastered

    @capacitor/action-sheet
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.1 • Public • Published

    @capacitor/action-sheet

    The Action Sheet API provides access to native Action Sheets, which come up from the bottom of the screen and display actions a user can take.

    Install

    npm install @capacitor/action-sheet
    npx cap sync

    Variables

    This plugin will use the following project variables (defined in your app's variables.gradle file):

    • $androidxMaterialVersion: version of com.google.android.material:material (default: 1.6.1)

    PWA Notes

    PWA Elements are required for Action Sheet plugin to work.

    Example

    import { ActionSheet, ActionSheetButtonStyle } from '@capacitor/action-sheet';
    
    const showActions = async () => {
      const result = await ActionSheet.showActions({
        title: 'Photo Options',
        message: 'Select an option to perform',
        options: [
          {
            title: 'Upload',
          },
          {
            title: 'Share',
          },
          {
            title: 'Remove',
            style: ActionSheetButtonStyle.Destructive,
          },
        ],
      });
    
      console.log('Action Sheet result:', result);
    };

    API

    showActions(...)

    showActions(options: ShowActionsOptions) => Promise<ShowActionsResult>

    Show an Action Sheet style modal with various options for the user to select.

    Param Type
    options ShowActionsOptions

    Returns: Promise<ShowActionsResult>

    Since: 1.0.0


    Interfaces

    ShowActionsResult

    Prop Type Description Since
    index number The index of the clicked option (Zero-based) 1.0.0

    ShowActionsOptions

    Prop Type Description Since
    title string The title of the Action Sheet. 1.0.0
    message string A message to show under the title. This option is only supported on iOS. 1.0.0
    options ActionSheetButton[] Options the user can choose from. 1.0.0

    ActionSheetButton

    Prop Type Description Since
    title string The title of the option 1.0.0
    style ActionSheetButtonStyle The style of the option This option is only supported on iOS. 1.0.0
    icon string Icon for the option (ionicon naming convention) This option is only supported on Web. 1.0.0

    Enums

    ActionSheetButtonStyle

    Members Value Description Since
    Default 'DEFAULT' Default style of the option. 1.0.0
    Destructive 'DESTRUCTIVE' Style to use on destructive options. 1.0.0
    Cancel 'CANCEL' Style to use on the option that cancels the Action Sheet. If used, should be on the latest availabe option. 1.0.0

    Install

    npm i @capacitor/action-sheet

    DownloadsWeekly Downloads

    3,384

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    58.9 kB

    Total Files

    29

    Last publish

    Collaborators

    • itschaced
    • it_mike_s
    • larsmikkelsen
    • giralte-ionic
    • steven0351-ionic
    • jpender
    • ionicjs
    • maxlynch
    • mhartington
    • jcesarmobile
    • cmapoole
    • nhyatt