cookie-consent - Vaadin Add-on Directory
A material design cookie consent.
**[ This description is mirrored from README.md at [github.com/Dabolus/cookie-consent](https://github.com//Dabolus/cookie-consent/blob/2.0.2/README.md) on 2019-05-22 ]**
# \
[](https://www.webcomponents.org/element/Dabolus/cookie-consent)
[](https://travis-ci.org/Dabolus/cookie-consent)
[](https://github.com/Dabolus/cookie-consent)
_[Demo and API docs](https://www.webcomponents.org/element/Dabolus/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 `
```
#### 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`.
```html
This website uses cookies
```
_**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`.
LicenseView 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