Contact us Create app

Directory

← Back

more-less

Polymer-based web component for a D2L more-less control

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/BrightspaceUI/more-less on 2019-05-22 ]

d2l-more-less

Published on webcomponents.org Bower version Build status

Polymer-based web component for D2L's more/less control.

For further information on this and other components, refer to The Brightspace UI Guide.

Installation

bower install d2l-more-less

Usage

Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-more-less.html:

<head>
  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../d2l-more-less/d2l-more-less.html">
</head>

You can now wrap a d2l-more-less element around any content:

<d2l-more-less>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies, ligula vulputate mattis aliquam, arcu arcu porttitor urna, ut pretium neque lorem venenatis elit. Fusce rutrum, nunc a tempor dictum, elit est lobortis libero, at lobortis nisl libero id enim. Vestibulum in lorem sed metus ornare faucibus a ac massa. Donec sodales massa vitae lacus blandit, at placerat erat blandit. Aenean consequat sapien ac viverra ornare. Nullam sem felis, ultrices nec egestas ut, mollis ac arcu. Nunc sit amet aliquam neque, fringilla lobortis justo. Sed pharetra, ipsum ut tempor tempor, sem risus tincidunt nisl, vitae feugiat lectus lorem a urna. In sit amet lobortis tellus. Sed suscipit magna et aliquam consequat. Pellentesque rhoncus ut dui at semper. Mauris vel ante euismod, tempus nunc eu, pellentesque lacus. Mauris consectetur ante eget consequat tempus.</p>
</d2l-more-less>

Attributes

height (4em)

The height attribute sets the maximum height of the content when in "less" mode. The d2l-more-less element itself will take up additional vertical space in order to provide the fading effect and the more/less controls themselves. If the content is not at least this height, d2l-more-less will become inactive and add nothing to the page.

<d2l-more-less height="10rem">
    <!-- content -->
</d2l-more-less>

expanded

The expanded attribute will be present when d2l-more-less is in "more" mode. The element can also be made expanded by default by using this attribute.

<d2l-more-less expanded>
    <!-- content -->
</d2l-more-less>

blur-color (#fff)

The blur-color attribute will control the gradient color of the blurring effect. It must be a properly formatted HEX color code, either in shorthand or longform.

<d2l-more-less blur-color="#f00">
    <!-- content -->
</d2l-more-less>

h-align

The h-align attribute controls the horizontal alignment of the more-less button, as documented in the BrightspaceUI/button component.

<d2l-more-less h-align="text">
    <!-- content -->
</d2l-more-less>

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

Versioning

Commits and PR merges to master will automatically do a minor version bump which will:

  • Update the version in package.json
  • Add a tag matching the new version
  • Create a github release matching the new version

By using either [increment major] or [increment patch] notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.

Compatibility

(Loading compatibility data...)

Last updated: 2017-10-02

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

Released
2018-08-14
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 2.2.2
Browser
Browser Independent

more-less - Vaadin Add-on Directory

Polymer-based web component for a D2L more-less control more-less - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/BrightspaceUI/more-less](https://github.com//BrightspaceUI/more-less/blob/v5.3.0/README.md) on 2019-05-22 ]** # d2l-more-less [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/more-less) [![Bower version][bower-image]][bower-url] [![Build status][ci-image]][ci-url] [Polymer](https://www.polymer-project.org)-based web component for D2L's more/less control. For further information on this and other components, refer to [The Brightspace UI Guide](https://github.com/BrightspaceUI/guide/wiki). ## Installation ```shell bower install d2l-more-less ``` ## Usage Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-more-less.html`: ```html ``` You can now wrap a `d2l-more-less` element around any content: ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies, ligula vulputate mattis aliquam, arcu arcu porttitor urna, ut pretium neque lorem venenatis elit. Fusce rutrum, nunc a tempor dictum, elit est lobortis libero, at lobortis nisl libero id enim. Vestibulum in lorem sed metus ornare faucibus a ac massa. Donec sodales massa vitae lacus blandit, at placerat erat blandit. Aenean consequat sapien ac viverra ornare. Nullam sem felis, ultrices nec egestas ut, mollis ac arcu. Nunc sit amet aliquam neque, fringilla lobortis justo. Sed pharetra, ipsum ut tempor tempor, sem risus tincidunt nisl, vitae feugiat lectus lorem a urna. In sit amet lobortis tellus. Sed suscipit magna et aliquam consequat. Pellentesque rhoncus ut dui at semper. Mauris vel ante euismod, tempus nunc eu, pellentesque lacus. Mauris consectetur ante eget consequat tempus.

 ``` ### Attributes #### `height` _(4em)_ The `height` attribute sets the maximum height of the **content** when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space in order to provide the fading effect and the more/less controls themselves. If the content is not at least this height, `d2l-more-less` will become inactive and add nothing to the page. ```html ``` #### `expanded` The `expanded` attribute will be present when `d2l-more-less` is in "more" mode. The element can also be made expanded by default by using this attribute. ```html ``` #### `blur-color` _(#fff)_ The blur-color attribute will control the gradient color of the blurring effect. It must be a properly formatted HEX color code, either in shorthand or longform. ```html ``` #### `h-align` The `h-align` attribute controls the horizontal alignment of the more-less button, as documented in the [BrightspaceUI/button](https://github.com/BrightspaceUI/button) component. ```html ``` ## 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-more-less [bower-image]: https://badge.fury.io/bo//d2l-more-less.svg [ci-url]: https://travis-ci.org/BrightspaceUI/more-less [ci-image]: https://travis-ci.org/BrightspaceUI/more-less.svg ## Versioning Commits and PR merges to master will automatically do a minor version bump which will: * Update the version in `package.json` * Add a tag matching the new version * Create a github release matching the new version By using either **[increment major]** or **[increment patch]** notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.
GitHub Homepage
Online Demo
Issue tracker
View on GitHub
Documentation

more-less version 1.0.0
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.6.3 * d2l-icons#^2.18.0 * app-localize-behavior#^0.10.1

more-less version 1.0.1
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.6.3 * d2l-icons#^2.18.0 * app-localize-behavior#^0.10.1

more-less version 1.0.2
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.6.3 * d2l-icons#^2.18.0 * app-localize-behavior#^0.10.1

more-less version 1.0.3
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.6.3 * d2l-icons#^2.18.0 * app-localize-behavior#^0.10.1

more-less version 1.0.4
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.6.3 * d2l-icons#^2.18.0 * app-localize-behavior#^0.10.1

more-less version 1.0.5
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.6.3 * d2l-icons#^2.18.0 * app-localize-behavior#^0.10.1

more-less version 1.0.6
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.6.3 * d2l-icons#^2.18.0 * app-localize-behavior#^0.10.1

more-less version 2.0.0
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1

more-less version 2.0.1
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.0

more-less version 2.1.0
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.0

more-less version 2.1.1
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.1

more-less version 2.1.2
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2

more-less version 2.1.3
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-polymer-behaviors#^0.0.4

more-less version 2.1.4
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-polymer-behaviors#^0.0.4

more-less version 2.1.5
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-polymer-behaviors#^0.0.4

more-less version 2.1.6
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-polymer-behaviors#^0.0.4

more-less version 2.1.7
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-polymer-behaviors#^0.0.4

more-less version 2.1.8
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.7.0 * d2l-icons#^3.0.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-polymer-behaviors#^0.0.5

more-less version 2.2.0
### Dependencies * polymer#^1.7.1 * d2l-image-action#^0.8.0 * d2l-icons#^3.1.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-polymer-behaviors#^0.0.5

more-less version 2.2.1
### Dependencies * polymer#^1.7.1 * d2l-image-action#^1.0.0 * d2l-icons#^3.1.0 * app-localize-behavior#^0.10.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-polymer-behaviors#^0.0.5

more-less version 2.2.2
### Dependencies * polymer#^1.7.1 * d2l-image-action#^1.0.0 * d2l-icons#^3.2.0 * app-localize-behavior#^1.0.2 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-polymer-behaviors#^0.0.5

more-less version 3.0.0
### Dependencies * app-localize-behavior#^2.0.0 || ^1.0.2 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^4.4.0 || ^3.6.0 * d2l-image-action#^2.0.0 * d2l-polymer-behaviors#^1.0.0 || ^0.0.5 * polymer#Polymer/polymer#1 - 2

more-less version 3.1.0
### Dependencies * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^4.4.0 || ^3.6.0 * d2l-image-action#^2.0.0 * d2l-localize-behavior#^1.0.0 * d2l-polymer-behaviors#^1.0.0 || ^0.0.5 * polymer#Polymer/polymer#1 - 2

more-less version 3.1.1
### Dependencies * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^4.5.1 * d2l-image-action#^2.0.1 * d2l-localize-behavior#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * polymer#1 - 2

more-less version 4.0.0
### Dependencies * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^4.5.1 * d2l-image-action#^2.0.1 * d2l-localize-behavior#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * polymer#1 - 2

more-less version 4.1.0
### Dependencies * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^4.5.1 * d2l-image-action#^2.0.1 * d2l-localize-behavior#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * polymer#1 - 2

more-less version 4.2.0
### Dependencies * d2l-button#^4.2.1 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^4.5.1 * d2l-localize-behavior#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * polymer#1 - 2

more-less version 4.2.1
### Dependencies * d2l-button#^4.4.0 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^4.5.1 * d2l-localize-behavior#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * polymer#1 - 2 * d2l-resize-observer-polyfill-import#Brightspace/resize-observer-polyfill-import#^1.5.0

more-less version 4.2.2
### Dependencies * d2l-button#^4.4.0 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^4.5.1 * d2l-localize-behavior#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * polymer#1 - 2 * d2l-resize-observer-polyfill-import#Brightspace/resize-observer-polyfill-import#^1.5.0

more-less version 4.3.0
### Dependencies * d2l-button#^4.5.0 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^5.0.0 * d2l-localize-behavior#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * polymer#1 - 2 * d2l-resize-observer-polyfill-import#Brightspace/resize-observer-polyfill-import#^1.5.0

more-less version 4.3.1
### Dependencies * d2l-button#^4.5.0 * d2l-fastdom-import#https://github.com/Brightspace/fastdom-import.git#v1.0.2 * d2l-icons#^5.0.0 * d2l-localize-behavior#^1.1.0 * d2l-polymer-behaviors#^1.2.0 * polymer#1 - 2 * d2l-resize-observer-polyfill-import#Brightspace/resize-observer-polyfill-import#^1.5.1

Online