Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@material/line-ripple
Advanced tools
The Material Components for the web line-ripple component
@material/line-ripple is a package from the Material Components for the Web (MDC Web) library. It provides a line ripple component, which is typically used as an underline for text fields and other input elements. The line ripple is a visual effect that animates when the input element gains or loses focus, enhancing the user experience by providing a clear visual cue.
Initialize Line Ripple
This code initializes the line ripple component on an element with the class 'mdc-line-ripple'. The MDCLineRipple class is part of the @material/line-ripple package and is used to create and manage the line ripple effect.
const lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));
Activate Line Ripple
This code activates the line ripple effect, typically used when an input element gains focus. The activate method triggers the animation that makes the line ripple visible.
lineRipple.activate();
Deactivate Line Ripple
This code deactivates the line ripple effect, typically used when an input element loses focus. The deactivate method triggers the animation that hides the line ripple.
lineRipple.deactivate();
Set Ripple Center
This code sets the center of the ripple effect to a specific coordinate. The setRippleCenter method is useful for customizing the appearance of the ripple effect based on user interactions.
lineRipple.setRippleCenter(50);
Material-UI is a popular React component library that implements Google's Material Design. It provides a wide range of components, including input fields with underline effects similar to the line ripple in @material/line-ripple. Material-UI is more comprehensive and offers a broader set of components and utilities for building Material Design applications.
react-md is another React component library that follows Material Design guidelines. It includes components for text fields with underline effects, similar to the line ripple provided by @material/line-ripple. react-md focuses on providing a complete set of Material Design components for React applications.
Vuetify is a Material Design component framework for Vue.js. It offers a wide range of components, including input fields with underline effects similar to the line ripple in @material/line-ripple. Vuetify is designed to be a comprehensive solution for building Material Design applications with Vue.js.
The line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.
npm install @material/line-ripple
<span class="mdc-line-ripple"></span>
@use "@material/line-ripple/mdc-line-ripple";
import {MDCLineRipple} from '@material/line-ripple';
const lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));
CSS Class | Description |
---|---|
mdc-line-ripple | Mandatory. |
mdc-line-ripple--active | Styles the line ripple as an active line ripple. |
mdc-line-ripple--deactivating | Styles the line ripple as a deactivating line ripple. |
Mixin | Description |
---|---|
active-color($color) | Customizes the color of the line ripple when active. |
inactive-color($color) | Customizes the color of the line ripple when inactive. |
MDCLineRipple
Properties and MethodsMethod Signature | Description |
---|---|
activate() => void | Proxies to the foundation's activate() method. |
deactivate() => void | Proxies to the foundation's deactivate() method. |
setRippleCenter(xCoordinate: number) => void | Proxies to the foundation's setRippleCenter(xCoordinate: number) method. |
If you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCLineRippleAdapter
Method Signature | Description |
---|---|
addClass(className: string) => void | Adds a class to the root element. |
removeClass(className: string) => void | Removes a class from the root element. |
hasClass(className: string) => boolean | Determines whether the root element has the given CSS class name. |
setStyle(propertyName: string, value: string) => void | Sets the style property with propertyName to value on the root element. |
registerEventHandler(eventType: EventType, handler: EventListener) => void | Registers an event listener on the root element for a given event. |
deregisterEventHandler(eventType: EventType, handler: EventListener) => void | Deregisters an event listener on the root element for a given event. |
MDCLineRippleFoundation
Method Signature | Description |
---|---|
activate() => void | Activates the line ripple. |
deactivate() => void | Deactivates the line ripple. |
setRippleCenter(xCoordinate: number) => void | Sets the center of the ripple to the xCoordinate given. |
handleTransitionEnd(event: Event) => void | Handles a transitionend event. |
FAQs
The Material Components for the web line-ripple component
We found that @material/line-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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.