image-action
Polymer-based web components for D2L image-actions
[ This description is mirrored from README.md at github.com/BrightspaceUI/image-action on 2019-05-22 ]
Looking for SASS-based d2l-image-action? It's over here.
d2l-image-action
Polymer-based web component for D2L image actions, which are buttons or links associated with an image that perform an action when clicked.
For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.com.
Installation
d2l-image-action can be installed from Bower:
bower install d2l-image-action
Usage
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-image-action.html to get all three image-action web components:
<head>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../d2l-image-action/d2l-image-action.html">
</head>
Button-based actions
Use <d2l-image-action-button> in cases where an action is being performed, and not a navigation. Actions are typically done using a click event handler. Think about times you'd use a native <button> element instead of an <a>.
<d2l-image-action-button icon="d2l-tier1:bookmark-hollow">Bookmark</d2l-image-action-button>
Link-based actions
Alternatively, if you wish to perform a browser navigation when the action is clicked, use <d2l-image-action-link>. Think of places you'd use a native <a> element instead of a <button>.
<d2l-image-action-link href="settings.html" icon="d2l-tier1:gear">
Settings
</d2l-image-action-link>
Icons
As their name suggests, image-actions are intended to be used with an icon, specifically one which is 18px by 18px in size. To set the icon, use the icon attribute, which takes a reference to a Polymer iron-iconset-svg source.
The d2l-icons component exposes all of the D2L icons as iron-iconset-svg sources -- simply import them using the tier1 category (for 18x18 icons) and reference them by key:
<link rel="import" href="../d2l-icons/tier1-icons.html">
<button is="d2l-image-action" icon="d2l-tier1:print">Print</button>
You can also create your own custom icon set -- simply follow Polymer's documentation.
Groups of image-actions
Often, multiple image-actions will appear together as a group. In order to properly space the actions out, wrap them in a <d2l-image-action-group> custom element:
<d2l-image-action-group>
<d2l-image-action-button icon="d2l-tier1:print">Print</d2l-image-action-button>
<d2l-image-action-link icon="d2l-tier1:gear" href="http://www.google.ca">
Settings
</d2l-image-action-link>
<d2l-image-action-button icon="d2l-tier1:help">Help</d2l-image-action-button>
</d2l-image-action-group>
Developing, Testing and Contributing
After cloning the repo, run npm install to install dependencies.
If you don't have it already, install the Polymer CLI globally:
npm install -g polymer-cli
To start a local web server that hosts the demo page and tests:
polymer serve
To lint (eslint and Polymer lint):
npm run lint
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- d2l-button#^4.0.2
- d2l-colors#^3.1.2
- d2l-icons#^4.5.1
- d2l-link#^4.0.1
- d2l-polymer-behaviors#^1.3.0
- d2l-typography#^6.0.0
- polymer#1.9 - 2
- Released
- 2018-04-27
- Maturity
- IMPORTED
- License
- Apache License 2.0
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 1.0.1
- Browser
- Browser Independent
image-action - Vaadin Add-on Directory
Polymer-based web components for D2L image-actions
Online Demo
Documentation
GitHub Homepage
Issue tracker
image-action version 0.0.1
### Dependencies
* vui-focus#~0.7.1
* vui-link#~0.7.0
image-action version 0.0.2
### Dependencies
* vui-focus#~0.7.1
* vui-link#~0.7.0
image-action version 0.0.2-deploytest
### Dependencies
* vui-focus#~0.7.1
* vui-link#~0.7.0
image-action version 0.1.0
### Dependencies
* vui-focus#~0.7.1
* vui-colors#~0.2.0
image-action version 0.1.1
### Dependencies
* vui-focus#~0.7.1
* vui-colors#~0.2.0
image-action version 0.1.2
### Dependencies
* vui-focus#~0.7.1
* vui-colors#~0.2.0
image-action version 0.1.3
### Dependencies
* vui-focus#~0.7.1
* vui-typography#~2.0.0
image-action version 0.2.0
### Dependencies
* vui-focus#~0.7.1
* vui-typography#~2.0.0
image-action version 0.2.1
### Dependencies
* vui-typography#~2.0.0
image-action version 0.3.0
### Dependencies
* d2l-colors#~2.0.0
image-action version 0.4.0
### Dependencies
* d2l-colors#~2.0.0
* d2l-typography#~4.0.0
* polymer#Polymer#^1.5.0
* iron-icon#^1.0.8
image-action version 0.4.1
### Dependencies
* d2l-colors#~2.0.0
* d2l-typography#~4.0.0
* polymer#Polymer#^1.5.0
* iron-icon#^1.0.8
image-action version 0.4.2
### Dependencies
* d2l-colors#~2.0.0
* d2l-typography#~4.0.0
* polymer#Polymer#^1.5.0
* iron-icon#^1.0.8
image-action version 0.4.3
### Dependencies
* d2l-colors#~2.0.0
* d2l-typography#~4.0.0
* polymer#Polymer#^1.5.0
* iron-icon#^1.0.8
image-action version 0.4.4
### Dependencies
* d2l-colors#^2.1.0
* d2l-typography#^4.1.0
* polymer#Polymer#^1.5.0
* iron-icon#^1.0.8
image-action version 0.5.0
### Dependencies
* d2l-colors#^2.1.0
* d2l-icons#^2.8.0
* d2l-typography#^4.1.0
* polymer#^1.5.0
image-action version 0.5.1
### Dependencies
* d2l-colors#^2.1.0
* d2l-icons#^2.8.0
* d2l-typography#^4.1.0
* polymer#^1.5.0
image-action version 0.5.2
### Dependencies
* d2l-colors#^2.1.0
* d2l-icons#^2.8.0
* d2l-typography#^4.1.0
* polymer#^1.5.0
image-action version 0.5.3
### Dependencies
* d2l-colors#^2.1.0
* d2l-icons#^2.8.0
* d2l-typography#^5.0.0
* polymer#^1.5.0
image-action version 0.6.0
### Dependencies
* d2l-colors#^2.2.0
* d2l-icons#^2.14.0
* d2l-typography#^5.1.1
* polymer#^1.7.0
image-action version 0.6.1
### Dependencies
* d2l-colors#^2.2.2
* d2l-icons#^2.14.1
* d2l-typography#^5.1.2
* polymer#^1.7.0
image-action version 0.6.2
### Dependencies
* d2l-colors#^2.2.3
* d2l-icons#^2.15.2
* d2l-typography#^5.2.2
* polymer#^1.7.0
image-action version 0.6.3
### Dependencies
* d2l-colors#^2.2.3
* d2l-icons#^2.15.2
* d2l-typography#^5.2.2
* polymer#^1.7.0
image-action version 0.7.0
### Dependencies
* d2l-colors#^2.2.3
* d2l-icons#^3.0.0
* d2l-typography#^5.2.2
* polymer#^1.7.0
image-action version 0.8.0
### Dependencies
* d2l-colors#^2.2.3
* d2l-icons#^3.1.0
* d2l-typography#^5.3.0
* polymer#^1.7.0
image-action version 1.0.0
### Dependencies
* d2l-colors#^2.2.3
* d2l-icons#^3.1.0
* d2l-typography#^5.3.0
* polymer#^1.7.0
image-action version 1.0.1
### Dependencies
* d2l-colors#^2.4.0
* d2l-icons#^3.1.0
* d2l-typography#^5.3.0
* polymer#^1.9.0
image-action version 2.0.0
### Dependencies
* d2l-button#^4.0.0
* d2l-colors#^3.1.0 || ^2.4.0
* d2l-icons#^4.4.0 || ^3.6.0
* d2l-link#^4.0.0
* d2l-typography#^6.0.0 || ^5.4.0
* polymer#Polymer/polymer#1.9 - 2
image-action version 2.0.1
### Dependencies
* d2l-button#^4.0.2
* d2l-colors#^3.1.2
* d2l-icons#^4.5.1
* d2l-link#^4.0.1
* d2l-typography#^6.0.0
* polymer#1.9 - 2
image-action version 2.0.2
### Dependencies
* d2l-button#^4.0.2
* d2l-colors#^3.1.2
* d2l-icons#^4.5.1
* d2l-link#^4.0.1
* d2l-polymer-behaviors#^1.3.0
* d2l-typography#^6.0.0
* polymer#1.9 - 2
image-action version 2.1.0
### Dependencies
* d2l-button#^4.0.2
* d2l-colors#^3.1.2
* d2l-icons#^4.5.1
* d2l-link#^4.0.1
* d2l-polymer-behaviors#^1.3.0
* d2l-typography#^6.0.0
* polymer#1.9 - 2