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");
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.
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.
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.
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>
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.
Opens the action card specified by the CSS selector.
Parameters:
selector (string): CSS selector for the action card to open.Usage:
PuppertinoActionsManager.openAction("#exampleAction");
Closes the currently active (open) action card.
Usage:
PuppertinoActionsManager.closeActiveAction();
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");
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.");
}