cookie-consent
A material design cookie consent.
[ This description is mirrored from README.md at github.com/Dabolus/cookie-consent on 2019-05-22 ]
<cookie-consent>
A great, simple and fully customizable material design cookie consent that automatically shows up only to the users subject to the cookie law (EU users).
Features
- Ready out of the box. Just include it and insert a
<cookie-consent></cookie-consent>in your web app and you are ready to go! - Fully customizable. It can be completely styled and it supports a lot of properties that allows you to easily change its default behavior.
- Easily detect what the user does. The readonly
cookies-statusproperty can be binded to detect whether the user consent ispending,acceptedorrejected. It also fires acookies-status-changedevent when the user responds, so you can wait for the user to accept or reject the cookies before doing something with their data. - Tested using the web-component-tester
Installation
bower install --save Dabolus/cookie-consent#^2.0.0
Usage
Basic usage
<cookie-consent></cookie-consent>
Custom text, policy link and consent rejection
<cookie-consent
text="This website uses yummy cookies"
policy-link="/policy"
rejectable>
</cookie-consent>
Full customization
You can even set an empty text and then use a span with the slot text to insert anything
you want (icons, etc.). The same can be done with the policy link. Just use the policy-link
slot in an anchor tag inside the cookie-consent.
<cookie-consent text="" use-local-storage>
<span slot="text">
This website uses cookies
<iron-icon icon="editor:insert-emoticon"></iron-icon>
</span>
<a href="/policy" slot="policy-link">Yay!</a>
</cookie-consent>
Note: the user response is saved by default in a permanent cookie.
You can change this behavior by adding the use-local-storage
or the use-session-storage properties.
Styling
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
--cookie-consent-background-color |
The background color of the cookie consent | #323232 |
--cookie-consent-text-color |
The color of text in the cookie consent | #f1f1f1 |
--cookie-consent-policy-link-color |
The color of the link to the cookie policy | --light-accent-color |
--cookie-consent-reject-text-color |
The main color of the button to reject the cookie policy | --disabled-text-color |
--cookie-consent-reject-background |
The background of the button to reject the cookie policy | transparent |
--cookie-consent-reject-ink-color |
The color of the ink displayed when the reject button is pressed | --disabled-text-color |
--cookie-consent-accept-text-color |
The main color of the button to accept the cookie policy | --accent-color |
--cookie-consent-accept-background |
The background of the button to accept the cookie policy | transparent |
--cookie-consent-accept-ink-color |
The color of the ink displayed when the accept button is pressed | --accent-color |
--cookie-consent-accept-button |
Mixin applied to the accept button | {} |
--cookie-consent-reject-button |
Mixin applied to the reject button | {} |
--cookie-consent-buttons |
Mixin applied to both the accept and reject buttons | {} |
--cookie-consent-policy-link |
Mixin applied to the policy link | {} |
--cookie-consent-text |
Mixin applied to the cookie consent text | {} |
--cookie-consent-toast |
Mixin applied to the cookie consent toast | {} |
--cookie-consent |
Mixin applied to the cookie consent | {} |
This element uses paper-toast to display the consent. paper-toast applies the mixin --paper-font-common-base but does not import paper-styles/typography.html.
In order to apply the Roboto font to this element, make sure you've imported paper-styles/typography.html.
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
Polymer/polymer#^2.0.0
- iron-ajax#^2.0.0
- paper-toast#^2.0.0
- paper-button#^2.0.0
- iron-flex-layout#^2.0.0
- paper-styles#2.0.0
- Released
- 2017-05-21
- Maturity
- TESTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 1.0.0
- Browser
- Browser Independent
cookie-consent - Vaadin Add-on Directory
A material design cookie consent.
View on GitHub
Online Demo
Documentation
GitHub Homepage
Issue tracker
cookie-consent version 1.0.0
### Dependencies
Polymer/polymer#^1.4.0
* iron-ajax#^1.4.4
* paper-toast#^1.3.1
* paper-button#^1.0.15
* iron-flex-layout#^1.3.7
cookie-consent version 1.0.1
### Dependencies
Polymer/polymer#^1.4.0
* iron-ajax#^1.4.4
* paper-toast#^1.3.1
* paper-button#^1.0.15
* iron-flex-layout#^1.3.7
cookie-consent version 2.0.0
### Dependencies
Polymer/polymer#^2.0.0
* iron-ajax#^2.0.0
* paper-toast#^2.0.0
* paper-button#^2.0.0
* iron-flex-layout#^2.0.0
* paper-styles#2.0.0
cookie-consent version 2.0.1
### Dependencies
Polymer/polymer#^2.0.0
* iron-ajax#^2.0.0
* paper-toast#^2.0.0
* paper-button#^2.0.0
* iron-flex-layout#^2.0.0
* paper-styles#2.0.0
cookie-consent version 2.0.2
### Dependencies
Polymer/polymer#^2.0.0
* iron-ajax#^2.0.0
* paper-toast#^2.0.0
* paper-button#^2.0.0
* iron-flex-layout#^2.0.0
* paper-styles#2.0.0
cookie-consent version 1.0.2
### Dependencies
Polymer/polymer#^1.4.0
* iron-ajax#^1.4.4
* paper-toast#^1.3.1
* paper-button#^1.0.15
* iron-flex-layout#^1.3.7