### What do you want to do?

Select an option below...

Close this tab
Close this tab New private tab New tab
Cancel

### What do you want to do?

Select an option below...

New private tab New tab
Cancel

### Welcome to actions

Select an option below...

New private tab New tab
Cancel
Puppertino

/

Examples

/

Actions

# Actions

Actions are a fundamental part of iOS design, so we couldn’t resist bringing them to Puppertino. Now, you can enjoy their intuitive functionality within your projects! To use actions, you can Download the CSS and Download the JS. Alternatively, you can use the Full CSS and currently, there's not full JS.

### Note on Previous Versions

In earlier versions of Puppertino, actions were exclusively links. In the latest version, you now have the option to use either Buttons or Links, offering greater flexibility for appropriate actions while maintaining proper semantics and accessibility.

## Let's talk about actions!

Actions in Puppertino function similarly to modals, prompting users to make a decision. The difference is that Actions can feature multiple decisions and are easier to acccess than modals.

## General usage.

Using Actions in Puppertino is nearly identical to Modals. To set up an Action, you need a container for the elements and a button to toggle it. The button should include the attribute `data-p-open-actions` with the `#id` of the Action you want to open, while the Action itself should have a matching ID.
Actions come with several layout variants, allowing you to arrange elements differently. However, it’s important to stick with one style per Action. Mixing variants, like combining options with icons and without, can confuse users and disrupt the visual flow, so it’s best to maintain consistency.
For added functionality, Actions also support the `data-p-close-on-outside="true"` attribute, which automatically closes the Action when the user clicks outside its area.

Usage:

    <!-- The button that toggles the action -->

    <button class="p-btn" data-p-open-actions="#actions_basic">Basic Actions</button>

    <!-- Action container, all the actions you use should be inside of it. -->

    <div class="p-action-background">

    	<!-- Your actions will be here -->
      <div class="p-action-big-container" id="actions_basic" data-p-close-on-outside="true">
        <div class="p-action-container">
          <div class="p-action-title">
            <h3 class="p-action-title--intern">Welcome to actions</h3>
            <p class="p-action-text">Select an option below...</p>
          </div>
          <a href="#" class="p-action--intern p-action-neutral">New private tab</a>
          <a href="#" class="p-action--intern">New tab</a>
        </div>
        <div class="p-action-container">
          <button class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel</button>
        </div>
      </div>

    </div>

Variations:

      <div class="p-action-big-container" id="actions" data-p-close-on-outside="true">
            <div class="p-action-container">
              <div class="p-action-title">
                <h3 class="p-action-title--intern">What do you want to do?</h3>
                <p class="p-action-text">Select an option below...</p></div>
              <a href="#" class="p-action--intern p-action-destructive p-action-icon"><!-- ICON --> Close this tab</a>
              <a href="#" class="p-action--intern p-action-destructive p-action-icon-inline" ><!-- ICON --> Close this tab</a>
              <a href="#" class="p-action--intern p-action-neutral">New private tab</a>
              <a href="#" class="p-action--intern">New tab</a>
            </div>
            <div class="p-action-container">
          <a href="#" class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel</a>
        </div>
      </div>

## JS API Methods

In newer versions, the old JavaScript has been replaced with the PuppertinoActionsMan class—a lightweight utility for managing action cards within the Puppertino framework.
While the way you use action cards remains unchanged thanks to automatic initialization, this class introduces programmatic methods for Opening or Closing action cards, and handling user interactions.
Here's what currently possible using Puppertino's Actions Manager.

### openAction(selector)

Opens the action card specified by the CSS selector.

Parameters:

- `selector` (string): CSS selector for the action card to open.

Usage:

        PuppertinoActionsManager.openAction("#exampleAction");

### closeActiveAction()

Closes the currently active (open) action card.

Usage:

        PuppertinoActionsManager.closeActiveAction();

### closeAction(selector)

Closes a specific action card specified by the CSS selector.

Parameters:

- `selector` (string): CSS selector for the action card to close.

Usage:

        PuppertinoActionsManager.closeAction("#exampleAction");

### isActionOpen(selector)

Checks if a specific action card is currently open.

Parameters:

- `selector` (string): CSS selector for the action card to check.

Returns:

- `true` if the action card is open, `false` otherwise.

Usage:

        if (PuppertinoActionsManager.isActionOpen("#exampleAction")) {
          console.log("The action card is open.");
        }