Actions

Actions are way to add simple interactivity to a page without complicated code.

Add them as includes to the bottom of a content page, like this:

---
layout: default
header: false
---

# Create your account

{% include components/alert.html id="warning" %}

{% include text-input.html label="Full name" type="text" %}

{% include text-input.html label="Email address" type="email" %}

After creating your account, you'll receive a message with a link to set up your username and password.

{% include button.html label="Create" link="#" %}

<!-- Include actions here -->

{% include actions/show.html click-this="create" show-this="warning" focus-this="close" %}

{% include actions/hide.html click-this="close" hide-this="warning" %}

Hide

Why: Remove an element from the page in response to a user interaction.

How:

• Include actions/hide.html to a content page at the bottom.
• Define what element it responds to and what it affects using the click-this and hide-this settings.
• The names of the elements are the ids. In some cases, you may define this yourself using a setting. In other cases, like buttons and links, they are automatically generated from the label.
  • Automatically generated ids are "url-friendly," so the id for a button labeled "Close This Thing" will become close-this-thing.

Show

Why: Make a previously hidden element on the page visible in response to a user interaction.

How:

• Include actions/show.html to a content page at the bottom.
• Define what element it responds to and what it affects using the click-this and show-this settings.
• Note that when you have a component on the page that you reference in the show-this setting for the Show action, it is automatically hidden when the page loads.
• You can also specify an element to receive focus when the element is shown, using the focus-this setting.
• The names of the elements are the ids. In some cases, you may define this yourself using a setting. In other cases, like buttons and links, they are automatically generated from the label.
  • Automatically generated ids are "url-friendly," so the id for a button labeled "Close This Thing" will become close-this-thing.

Data

See the Data page for details on actions relating to saving, retrieving, reviewing, and clearing data.