image-action - Vaadin Add-on Directory

Name: image-action
Availability: InStock
Rating: 4.0 (94 reviews)
Author: BrightspaceUI

Polymer-based web components for D2L image-actions

**[ This description is mirrored from README.md at [github.com/BrightspaceUI/image-action](https://github.com//BrightspaceUI/image-action/blob/v2.0.2/README.md) on 2019-05-22 ]** **Looking for SASS-based `d2l-image-action`?** It's [over here](https://github.com/BrightspaceUI/image-action/tree/sass). # d2l-image-action [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/image-action) [![Bower version][bower-image]][bower-url] [![Build status][ci-image]][ci-url] [Polymer](https://www.polymer-project.org/1.0/)-based web component for D2L image actions, which are buttons or links associated with an image that perform an action when clicked. ![screenshot of image actions](/screenshot.gif) For further information on this and other Brightspace UI components, see the docs at [ui.developers.brightspace.com](http://ui.developers.brightspace.com/). ## Installation `d2l-image-action` can be installed from [Bower][bower-url]: ```shell bower install d2l-image-action ``` ## Usage Include the [webcomponents.js](http://webcomponents.org/polyfills/) "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: ```html ``` ### Button-based actions Use `` 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 ` ``` You can also create your own custom icon set -- simply follow [Polymer's documentation](https://github.com/PolymerElements/iron-iconset-svg). ### 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 `` custom element: ```html

Settings

Help

``` ## 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](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally: ```shell npm install -g polymer-cli ``` To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests: ```shell polymer serve ``` To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)): ```shell npm run lint ``` [bower-url]: http://bower.io/search/?q=d2l-image-action [bower-image]: https://badge.fury.io/bo/d2l-image-action.svg [ci-url]: https://travis-ci.org/BrightspaceUI/image-action [ci-image]: https://travis-ci.org/BrightspaceUI/image-action.svg

View on GitHub
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