Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@material/mwc-ripple
Advanced tools
<mwc-ripple>
IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.
Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect.
Material Design Guidelines: States
npm install @material/mwc-ripple
NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.
<mwc-ripple></mwc-ripple>
<mwc-ripple unbounded></mwc-ripple>
Name | Type | Default | Description |
---|---|---|---|
primary | boolean | false | When true, sets the ripple color to --mdc-theme-primary . Will be overridden by --mdc-ripple-color if set. |
accent | boolean | false | When true, sets the ripple color to --mdc-theme-secondary . Will be overridden by --mdc-ripple-color if set. |
unbounded | boolean | false | When true, the ripple will flow outside the component in a circle. |
activated | boolean | false | Set true when the container of the ripple should be in an activated state. |
selected | boolean | false | Set true when the container of the ripple should be in a selected state. |
disabled | boolean | false | Set true to disable the ripple when the container of the ripple is disabled. |
Name | Description |
---|---|
startPress(event?: Event) => void | Begin the press state of the ripple. Optional Event will be used to determine the beginning coordinates of the ripple animation when unbounded is false. |
endPress() => void | End the press state of the ripple. |
startFocus() => void | Begin the focus state of the ripple. |
endFocus() => void | End the focus state of the ripple. |
startHover() => void | Begin the hover state of the ripple. |
endHover() => void | End the hover state of the ripple. |
Name | Default | Description |
---|---|---|
--mdc-ripple-color | #000 | Color of the ripple will have when activated. |
--mdc-ripple-press-opacity | 0.12 | Opacity of the ripple when pressed. |
--mdc-ripple-hover-opacity | 0.04 | Opacity of the ripple when hovered. |
--mdc-ripple-focus-opacity | 0.12 | Opacity of the ripple when focused. |
--mdc-ripple-selected-opacity | 0.08 | Opacity of the ripple when the host component is "selected". This opacity is added to press , hover , and focus states. |
--mdc-ripple-activated-opacity | 0.12 | Opacity of the ripple when the host component is "activated". This opacity is added to press , hover , and focus states. |
--mdc-ripple-z-index | 0 | Z-index of the ripple. |
FAQs
Material Design ripple web component
The npm package @material/mwc-ripple receives a total of 17,657 weekly downloads. As such, @material/mwc-ripple popularity was classified as popular.
We found that @material/mwc-ripple demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.