{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65158a4c0373935b790684d3508f0a074571ce19","tarball":"https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-1.0.0-0.tgz","fileCount":34,"integrity":"sha512-WpXMYJAZp+oKKoTqj5pqfs6fA1aeFHUqCmXbVMQBR+aQ8VOpM0Qmv/ON16ZuIU19C1kuKlQLotPSAJ74pkThZw==","signatures":[{"sig":"MEQCICl0x+uXTqiUWygXcsHgHz73xH9H8jKFqx+BsarrCPVkAiAvrFnXSKlG5iDmnn2m8sPVFBrfPfQ40E9iGoLG+JYV3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":331112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyReCRA9TVsSAnZWagAAtuIP/1hJZBjO4IBPyUC4tNCz\nppMErKIRa9hQXsjAYVnxNsIXQO9IDJceY1DT9COVmg2c2b9kDl+2fdXp9rhG\nP0BSnnZyTr1ijp7CwnJSQ2wNieUD2KNnwmvJJbhbNo3OKJtz1lakTgHJbSeP\nJugXyjWCG/q3ubCmMRt8q1OBGfRUOoXEyfykbe+VnaOSlWtIahJjpEDYzfI6\nHSxgJVHhqRmKEVXLj0ZxN/uR4Bk68EDSSpGexg+HDBX89KzspLGX3Anp+A5X\nTVrEa0Tdfvrdeclky5Cnu61fiDX4QGp6AQzlA3vozPpgamkqk3PEiK4h23F0\nZvQEGAwoWQciwd+ijWGAUB81oFlSt/f48vmCqeokXGvh64zdGMWxJ/QlNl19\nkbDIAAMlgbsOrGfpCU31cUbvOD3fXOkn0Y8z6iYzHppgnNakc23ducFFvB9R\ncQi5AYRf3JLjL1IoMDqnxH23KmZZx102g9Wyjd5S6vuABRaXJR4QE8pbaOtU\nsjpdMmy5doM3V1HX6cMZDwuOkt61syCRndw9pV1fVC7jh1A8D2DNd4yNskzj\nSQNjUVmWrr0YIXh4FBdun+WkPq2FhRZp6/Mh9bHzufdpzmPBJx7m5To/rYqc\n7oR9160Gy30y5OlgKCdk9VYFHm8wQmeMlX9S1StHG08r1phkiCd3I36/Em4R\nn6te\r\n=qNdd\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":"acdvorak","email":"acdvorak@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.8.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.14.2","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/animation":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-indicator_1.0.0-0_1551311965878_0.28107092646513965","host":"s3://npm-registry-packages"},"_id":"@material/tab-indicator@1.0.0-0","version":"1.0.0-0"}