Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@material/touch-target

Package Overview
Dependencies
Maintainers
15
Versions
1639
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/touch-target

Touch target mixins and variables for Material Components for the web

  • 14.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
764K
decreased by-6.78%
Maintainers
15
Weekly downloads
 
Created
Source

Touch Target

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:

  • Button
  • Chips
  • Checkbox
  • Radio
  • Mini FAB

Design & API Documentation

  • Material Design guidelines: Touch Targets

Installation

npm install @material/touch-target

Basic Usage

HTML Structure

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).

Styles

@use "@material/touch-target/mdc-touch-target";

Style Customization

Sass Mixins

MixinDescription
wrapperApplied to the wrapper touch target element.
touch-targetApplied to the inner touch target element.
marginApplied to the component root element. Adds margin to compensate for the increased touch target.

Keywords

FAQs

Package last updated on 28 Apr 2022

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc