Polymer-based web components for D2L tiles.
d2l-tile can be installed from Bower:
bower install d2l-tileInclude the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import either d2l-tile.html or d2l-image-tile.html as needed:
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- imports here -->
</head><d2l-tile> is a barebones bordered container for arbitrary content.
<link rel="import" href="bower_components/d2l-tile/d2l-tile.html">
<d2l-tile hover-effect="low-lift">
<p>Anything can go in here!</p>
</d2l-tile>You can make the tile into a link by passing in a href property
You can specify the tabindex of the tile using the specified-tab-index property (default 0)
An extension of <d2l-tile>, <d2l-image-tile> adds an image at the top, content at the bottom, and an optional ... "more" menu which can launch a d2l-dropdown-menu.
<d2l-image-tile
img-url="https://s.brightspace.com/course-images/images/51fbf3cc-2149-4d88-890c-46efaca3ef8c/tile-high-density-mid-size.jpg"
dropdown-label="This is my menu"
hover-effect="low-lift"
>
<p>Tile content</p>
<d2l-dropdown-menu slot="d2l-image-tile-dropdown">
<d2l-menu>
<d2l-menu-item text="Menu item one"></d2l-menu-item>
<d2l-menu-item text="Menu item two"></d2l-menu-item>
<d2l-menu-item text="Menu item three"></d2l-menu-item>
</d2l-menu>
</d2l-dropdown-menu>
</d2l-image-tile>Basic example using a URL-based image:
<link rel="import" href="bower_components/d2l-tile/d2l-image-tile.html">
<d2l-image-tile img-url="path-to-image.png">
Content below image.
</d2l-image-tile>Alternatively, you can provide custom image content in the d2l-image-tile-image slot instead of the image-url attribute:
<d2l-image-tile>
<div slot="d2l-image-tile-image">
<p>Custom image content</p>
</div>
</d2l-image-tile>You can make the tile into a link by passing in a href property
You can specify the tabindex of the tile using the specified-tab-index property (default 0)
To display a ... "more" dropdown, provide content inside the d2l-image-tile-dropdown slot.
Note: always provide an accessible label for the menu using the dropdown-label attribute.
The ... menu will always show on mobile, unless you set the no-mobile-more-button attribute to true.
If you need to add an element to the right of the "more" menu, you can use the d2l-image-tile-menu-adjacent slot.
The image tile can be placed in an initial "loading" state:
<d2l-image-tile loading>
...
</d2l-image-tile>You can set the height of the image in the tile using the --d2l-image-tile-image-height CSS property:
<style>
d2l-image-tile {
--d2l-image-tile-image-height: 100px;
}
</style>A custom background can also be supplied for where the image is placed using the --d2l-image-tile-image-background CSS property:
<style>
d2l-image-tile {
--d2l-image-tile-image-background: #0000ff;
}
</style>Both <d2l-tile> and <d2l-image-tile> support setting an effect for when the user hovers over the tile. It's a space separated list of hover effects, which can currently include:
- low-lift: tile lifts slightly off the page
d2l-image-tile specific hover effects:
- emphasize-image: The image zooms in and it's colors saturate
- lower-menu: the menu lowers slightly when the tile is hovered
<d2l-tile hover-effect="low-lift">
...
</d2l-tile>Stick it in the d2l-image-tile-image slot along with the image and an offset.
Add a click event handler onto the tile, and on the inner clickable element add an event handler with: e.stopPropagation();
You can get around this by wrapping the d2l-tile element in something other than react (like polymer!)
After cloning the repo, run npm install to install dependencies.
Install the Polymer CLI globally:
npm install -g polymer-cliTo start a local web server that hosts the demo page and tests:
polymer serveTo lint (eslint and Polymer lint):
npm run lintTo run unit tests locally using Polymer test:
npm run test:polymer:localTo lint AND run local unit tests:
npm test