npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@loipham/material-tab-indicator

v14.0.4

Published

The Material Components for the web tab indicator component

Downloads

3

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

phamloi7710phamloi7710

Keywords

material componentsmaterial designtabindicator

Readme

Tab Indicator

A Tab Indicator is a visual guide that shows which Tab is active.

Design & API Documentation

Installation

npm install @loipham/material-tab-indicator

Basic Usage

HTML Structure

<span class="mdc-tab-indicator">
  <span class="mdc-tab-indicator__content"></span>
</span>

Styles

@use "@loipham/material-tab-indicator/mdc-tab-indicator";

JavaScript Instantiation

import {MDCTabIndicator} from '@loipham/material-tab-indicator';

const tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));

See Importing the JS component for more information on how to import JavaScript.

Variants

Active Indicator

Add the mdc-tab-indicator--active class to the mdc-tab-indicator element to make the Tab Indicator active.

Indicator Types and Transitions

The Tab Indicator may be represented in one of two ways:

  • Underline, indicated by the mdc-tab-indicator__content--underline class
  • Icon, indicated by the mdc-tab-indicator__content--icon class

NOTE: One of these classes must be applied to the Tab Indicator's content element.

The Tab Indicator may transition in one of two ways:

  • Slide, the default behavior
  • Fade, indicated by the mdc-tab-indicator--fade class

Sliding Underline Indicator

<span class="mdc-tab-indicator">
  <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>

Icon Indicators

We recommend using Material Icons from Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

However, you can also use SVG, Font Awesome, or any other icon library you wish.

Remember to include aria-hidden="true", since the active indicator is already signified via the aria-selected attribute on the tab.

Fading Icon Indicator
<span class="mdc-tab-indicator mdc-tab-indicator--fade">
  <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons" aria-hidden="true">star</span>
</span>
Sliding Icon Indicator
<span class="mdc-tab-indicator">
  <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons" aria-hidden="true">star</span>
</span>

Style Customization

CSS Classes

CSS Class | Description --- | --- mdc-tab-indicator | Mandatory. Contains the tab indicator content. mdc-tab-indicator__content | Mandatory. Denotes the tab indicator content. mdc-tab-indicator--active | Optional. Visually activates the indicator. mdc-tab-indicator--fade | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation. mdc-tab-indicator__content--underline | Optional. Denotes an underline tab indicator. mdc-tab-indicator__content--icon | Optional. Denotes an icon tab indicator.

NOTE: Exactly one of the --underline or --icon content modifier classes should be present.

Sass Mixins

To customize the tab indicator, use the following mixins.

Mixin | Description --- | --- surface | Mandatory. Must be applied to the parent element of the mdc-tab-indicator. underline-color($color) | Customizes the color of the underline. icon-color($color) | Customizes the color of the icon subelement. underline-height($height) | Customizes the height of the underline. icon-height($height) | Customizes the height of the icon subelement. underline-top-corner-radius($radius) | Customizes the top left and top right border radius of the underline child element.

MDCTabIndicator Methods

Method Signature | Description --- | --- activate(previousIndicatorClientRect?: ClientRect) => void | Activates the tab indicator. deactivate() => void | Deactivates the tab indicator. computeContentClientRect() => ClientRect | Returns the content element bounding client rect.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator 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.

MDCTabIndicatorAdapter

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. setContentStyleProperty(property: string, value: string) => void | Sets the style property of the content element. computeContentClientRect() => ClientRect | Returns the content element's bounding client rect.

MDCTabIndicatorFoundation

Method Signature | Description --- | --- handleTransitionEnd(evt: Event) => void | Handles the logic for the "transitionend" event on the root element. activate(previousIndicatorClientRect?: ClientRect) => void | Activates the tab indicator. deactivate() => void | Deactivates the tab indicator. computeContentClientRect() => ClientRect | Returns the content element's bounding client rect.