{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f614e1deab962156d620a226c8ba4f0ebfd7f897","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-1.0.0-1.tgz","fileCount":34,"integrity":"sha512-nmSHicbJ8BJSnIAQ30l4dmVXhW4O6VKFXfXO50lY3WKP9CKVivxkjO6ppM0aYeTzQkt8Lm5FcLn2MBcmi6mq9Q==","signatures":[{"sig":"MEQCIFAYoJr2ptNzwSL7pBeg2wLMXZv1lcesfLCMmYVCmjH1AiAT67LvN6nL1AR6Pala+C/nAQ/hFSlyTDJ2nmt85F9n5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbW+CRA9TVsSAnZWagAAhMAP/3f2DUcswaee5+x3AZ/2\nlHb37lhqV7ExuBqXkHb9Oh0sX34lz6cXLKO4Dog1Ig1JOgpl/o+3fu0RU2r6\nmvyVfQ42/j6cEIfkIy/gN0hBkMIqhm5VBrhKWyTeSg7flIpgx8dMV+0kmh7A\nJGbsfbXc+OyhVexICJUjkLt0oTXhSuXN+x8W5ZiTsf/WBch7swzvUX/LGCbG\nf+/0GGcT3EvVvYd9AUoPNf/C9XgFCS+VsLsxrYIut58qeD8/wo/0XeLAEt0U\nP7A31pLZfml6q9jz1/K4jbvKoGm+lzCc5DZLpgFUt3quUymB3dL2BLcKXD2A\noDirdYzYSfAz8fCh3i0qg0QdDxo5x0BQXaeBYD+22h3Po86DA5Yzif0+o9rs\n0kj8CwHkN1bTJsO5a8G9JhzlWrbnauDOeU6rkzre6yNMX06QED5rRYmykPdK\ngAJUOjJ8qtM1IytyPZXyEhthW8jjpP710MJt0+k9FVThL3R2FJW05+85i/L1\n4QT2zSn4UrzFIbw7Lto5tryZFhFUc3bnqBYjC0+DiZ4Y7SshTyZOSIlUoccg\n34Dwie8cueNPMGK/j9Z8KluYQDIWaQ7cQOe/1v7bY2kmsian0w/zwu7hyo+k\nMpF7gcan/p/reMDGmN3zYe9NC5LqO2AJSTfkezo7WwR30GmexQr7QiSkfxhJ\n6PK8\r\n=/3y6\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`setContentStyleProp(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","license":"MIT","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@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"},"_npmVersion":"6.7.0","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":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/animation":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_1.0.0-1_1551742397782_0.8034589377238313","host":"s3://npm-registry-packages"},"_id":"@material/tab-indicator@1.0.0-1","version":"1.0.0-1"}