{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc83410f450f2ce77a74c0d15d0f107fbef5cbd6","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-4.0.0-alpha.0.tgz","fileCount":35,"integrity":"sha512-hsTPMyxlGrawB/IlseqqIXgDJo5/2CAR/D2qTxJEgRoXDRJTgzzQ8iRRfy1zhIPH/H5YVaKiBu7MU9H2dTY/bA==","signatures":[{"sig":"MEQCIBCC2F9RsUl1j9/9wIG3qHru9Q42BBgWYlpDFqNRaaeGAiB34UsykJCyMCRvL/gwowk1V6aZGtTSObt6uOpwKtx8Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":166112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz3/CRA9TVsSAnZWagAAirsP/0Pzu5NPZk+GOi93gIJ4\ndPOmKidXnWNh/U2QWK/80JM3d8aNekG5ca8jvlyK/UycAmrHUU4GNUawRbUH\npia+ZR7+xHeTzwRTVetwXgMDiMS2rxd+HJ5ml3XXQu16JLHrkAJs6zXzub8i\nCGcyfPXY/YGqvTw/CtNvicfUAAv+qS+xPAq1S46O5i/BsaKOvrR4/WdfRJiX\nYb97WDtX+si0ocKT6jraXhK6GAPeJNkvMRg1643puF5thiD4Lbb5ELx15Onv\nCdl874aAaEk1jo2PlmEp9aZApwL08FNhaWTyy3bgtoj8EJkpYTMZMn1RtrJ0\nP7jgzqvLhW1nd/aTIx8wYepdJH+vdZfyjatrS6Oe+xYQuP/ClCwYEYIMTxuS\nKBi7frcT73l/czwzLnEhH7dEucpiyO1w2kcfEtaawG0wNN4c9auuHMJZDj95\nWYKyhhVgL/f8ksqzp5oIsToaG5CXuK5kfMIj72r3e8zLTCT28L9TBiQN7KdF\nxQxmRi7povA7n7R13mgpzjumn/I7mizC/bCmrLgLxwvs14iEp+2GkRrUkz4y\nQk6yygiVOTTM41oAbyieEFUx+v3i+IpdzmEEYP5lQ0rzviXt5PMV//bFWipx\n5wFO05I217xG1X84eu4KYlAjOS/GQeR8TKDDPFP52E5ZXsRRJ5PPjW8FtbpR\nNBBl\r\n=z4t4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabIndicator.js","name":"@material/tab-indicator","types":"dist/mdc.tabIndicator.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Tab Indicator\"\nlayout: detail\nsection: components\nexcerpt: \"A visual guide that shows which Tab is active.\"\niconId: tabs\npath: /catalog/tabs/indicator/\n-->\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs#anatomy\">Material Design guidelines: Anatomy of Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-tab-indicator\">\n  <span class=\"mdc-tab-indicator__content\"></span>\n</span>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n<span class=\"mdc-tab-indicator\">\n  <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n</span>\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n<span class=\"mdc-tab-indicator mdc-tab-indicator--fade\">\n  <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons\" aria-hidden=\"true\">star</span>\n</span>\n```\n\n##### Sliding Icon Indicator\n\n```html\n<span class=\"mdc-tab-indicator\">\n  <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons\" aria-hidden=\"true\">star</span>\n</span>\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline.\n`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement.\n`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline.\n`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement.\n`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf 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](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","tab","indicator"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-indicator"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab indicator component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_4.0.0-alpha.0_1565212158588_0.31633203186439185","host":"s3://npm-registry-packages"},"_id":"@material/tab-indicator@4.0.0-alpha.0","version":"4.0.0-alpha.0"}