Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@material/tab-indicator
Advanced tools
Changelog
14.0.0 (2022-04-27)
unset
is unsupported in IE. (f460e23)validateTooltipWithCaretDistances
method. (3e30054)theme-styles
mixin... the value being retreived from the $theme
map and css property name was swapped. The mixin would request font-size
/font-weight
/letter-spacing
from the $theme
map (which expects size
/weight
/tracking
)... so these values would always be null
. (32b3913)attachTo
. (05db65e)showTimeout
is not set (indicating that this tooltip is about to be re-shown). (6ca8b8f)minRange
param to range sliders to request a minimum gap between the two thumbs. (8fffcb5)valueToAriaValueTextFn
and valueToValueIndicatorTextFn
functions are called for. (b6510c8)PiperOrigin-RevId: 444830518
PiperOrigin-RevId: 419837612
Readme
A Tab Indicator is a visual guide that shows which Tab is active.
npm install @material/tab-indicator
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content"></span>
</span>
@use "@material/tab-indicator/mdc-tab-indicator";
import {MDCTabIndicator} from '@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.
Add the mdc-tab-indicator--active
class to the mdc-tab-indicator
element to make the Tab Indicator active.
The Tab Indicator may be represented in one of two ways:
mdc-tab-indicator__content--underline
classmdc-tab-indicator__content--icon
classNOTE: One of these classes must be applied to the Tab Indicator's content element.
The Tab Indicator may transition in one of two ways:
mdc-tab-indicator--fade
class<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
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.
<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>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons" aria-hidden="true">star</span>
</span>
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.
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
MethodsMethod 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. |
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. |
FAQs
The Material Components for the web tab indicator component
The npm package @material/tab-indicator receives a total of 896,876 weekly downloads. As such, @material/tab-indicator popularity was classified as popular.
We found that @material/tab-indicator 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.