Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
@material/touch-target
Advanced tools
Touch target mixins and variables for Material Components for the web
Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, a button may appear to be 48 x 36 px, but the padding surrounding it comprises the full 48 x 48 px touch target.
Material Design spec states that touch targets should be at least 48 x 48 px. The MDC Web library provides mixins and guidance on adding an increased touch target for the following components:
npm install @material/touch-target
For a given button component:
<button class="mdc-button">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">My Inaccessible Button</span>
</button>
You would add an increased touch target as follows:
<div class="mdc-touch-target-wrapper">
<button class="mdc-button mdc-button--touch">
<div class="mdc-button__ripple"></div>
<div class="mdc-button__touch"></div>
<span class="mdc-button__label">My Accessible Button</span>
</button>
</div>
Note that the outer mdc-touch-target-wrapper
element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
@use "@material/touch-target/mdc-touch-target";
Mixin | Description |
---|---|
wrapper | Applied to the wrapper touch target element. |
touch-target | Applied to the inner touch target element. |
margin | Applied to the component root element. Adds margin to compensate for the increased touch target. |
FAQs
Touch target mixins and variables for Material Components for the web
We found that @material/touch-target 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.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.