@material/touch-target

v14.0.0

Touch target mixins and variables for Material Components for the web For more information about how to use this package see README

Latest version published 3 years ago

License: MIT

NPM

GitHub

Package Health Score

85 / 100

security
No known security issues
popularity
Influential project
maintenance
Sustainable
community
Active

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version			Vulnerabilities	License Risk
14.0.0	\|	04/2022	0 C 0 H 0 M 0 L	0 H 0 M 0 L
13.0.0	\|	09/2021	0 C 0 H 0 M 0 L	0 H 0 M 0 L
12.0.0	\|	07/2021	0 C 0 H 0 M 0 L	0 H 0 M 0 L
11.0.0	\|	04/2021	0 C 0 H 0 M 0 L	0 H 0 M 0 L
10.0.0	\|	02/2021	0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Influential project

Weekly Downloads (649,574)

GitHub Stars: 17.14K
Forks: 2.14K
Contributors: 380

Direct Usage Popularity

The npm package @material/touch-target receives a total of 649,574 downloads a week. As such, we scored @material/touch-target popularity level to be Influential project.

Based on project statistics from the GitHub repository for the npm package @material/touch-target, we found that it has been starred 17,143 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Active

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: Yes
Contributors: 380
Funding: No

A good and healthy external contribution signal for @material/touch-target project, which invites more than one hundred open source maintainers to collaborate on the repository.

Embed Package Health Score Badge

Maintenance

Sustainable

Commit Frequency

Open Issues: 402
Open PR: 119
Last Release: 3 years ago
Last Commit: 1 month ago

Further analysis of the maintenance status of @material/touch-target based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

An important project maintenance signal to consider for @material/touch-target is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 5 years
Dependencies: 4 Direct
Versions: 1.64K
Install Size: 15.3 kB
Dist-tags: 4
# of Files: 14
Maintainers: 14
TS Typings: No

@material/touch-target has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

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

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.

@material/touch-target dependencies

tslib @material/rtl @material/base @material/feature-targeting

FAQs

What is @material/touch-target?

Touch target mixins and variables for Material Components for the web. Visit Snyk Advisor to see a full health score report for @material/touch-target, including popularity, security, maintenance & community analysis.

Is @material/touch-target popular?

The npm package @material/touch-target receives a total of 649,574 weekly downloads. As such, @material/touch-target popularity was classified as an influential project. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is @material/touch-target well maintained?

We found indications that @material/touch-target maintenance is sustainable demonstrating some project activity. We saw a total of 380 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is @material/touch-target safe to use?

The npm package @material/touch-target was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 21 December-2024, at 04:00 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP