Select an option below...
Actions are a big part of iOS, and we couldn't stop thinking of adding them. That's why we added it into Puppertino! To use actions, you can Download the CSS and Download the JS. Alternatively, you can use the Full CSS and Full JS
Actions in Puppertino are very similar to modals. They prompt the user to take an decision. The difference is that Actions can feature multiple decisions and are easier to acccess than modals.
The usage it's the practically the same as modals. You need a container for the Actions and the button that you want to toggle actions needs to have the attribute data-p-open-actions with the #id of the actions you want to open. And the actions with the according ID.
There are also variants so you can arrange the elements differently, but please try to use just one variant at a time, one action with icon, then another one without action and so on can cause confusion on users and it also looks visually unpleasant, so handle with care.
Actions also support the attribute data-p-close-on-outside="true" to close the action on click outside of the 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">
<a href="#" class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel</a>
</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>