foundation.link¶
foundation.link
is an action of foundation-collection-action.
When the action is triggered, it will cause the user agent to navigate to a URI, using window.open. It supports the following parameters:
- config.data.href
The URI Template that will be expanded into a URI that the user agent navigates to. The URI Template is expanded using variables satisfying the following interface:
interface FoundationCollectionActionFoundationLinkVariables { /** * The value of <code>data-foundation-collection-id</code> attribute of the given <code>collection</code> parameter. */ id: string; /** * The array of values of <code>data-foundation-collection-item-id</code> attribute of the given <code>selections</code> parameter. */ item: string[]; }
- config.data.target
- The target of the navigation. This is the
strWindowName
parameter of the window.open().
Example¶
Given a simple button:
<button>Navigate</button>
You can annotate it with foundation-collection-action
to navigate to a URL based on collection selections when the user click it:
<button class="foundation-collection-action" data-foundation-collection-action='{"target": ".myapp-mycollection", "activeSelectionCount": "multiple", "action": "foundation.link", "data": {"href": "/my/link.html{?item*}", "target": "_blank"}}'>Navigate</button>