{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f8b90ad82bf2058e4b6b04d5cf053fa8732f6b","tarball":"https://registry.npmjs.org/@material/tab/-/tab-0.39.0-0.tgz","fileCount":13,"integrity":"sha512-LMLrLC9Toe5GtsUgpG4tVQ1np/FPv2qYxFGrYzspaH2IDfZcEtwnyXURnCTJqpHw7qoonJUl+BVouBMIjgbDbA==","signatures":[{"sig":"MEYCIQDWfi5T6As7Kot5MrONurIU9gRR+htpENTTTuCe70a0UgIhAPkoUbgKUsG40YZuDUfwXIG8iFhcNnisS6NM0627ET3Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZVECRA9TVsSAnZWagAAtbYP/0BSCHbh3Cc0DkX304Mr\nAwAwlNY1f82oXGGedsEsUW1ngPPAV2pAhSlcl/2dKmmtl/0cXS8B916RwYX9\ncKkcdBGHVrFp6QmTTYfD5jjYWGJlCBwhvHUvvu4NWwNNKulFRJ8bh6OVgGZG\nqwZ5WRvslm0UdiBjUGGFY/BqMsGYBIua+DsElV9AcB0rLMnhocLBujF6/OBi\nnFOyv8Fgsn0ubYu5XfulPbNATz5D9DcF/tMSVq60ODK42SPk8oLloFlN/J7f\n3N+aKq8T8XS7EXxp6u68GZL8H/dRwzPqOKYgiMyxN+m/pMdHv1kHuFniTtE3\n37L1YtluDI1v+/EGZkIS7CiQjFWDBsUJEZwjiy2qHbweKo8DuYv7dpQAYFNf\nZG9zElzEZA2p1/u5DeNOFqZpWpfnr70Kil+eJLHqTKlwStS9MC00k2W16Qkd\nNiaHfM431GLzx1jcahgNx267hmU8fRKAVkeB43Z/IEBzx2M4UCW5gw5F/aih\nHb9YnPLrEMYpu+rKylkaF03jYR3Va5H7uW5f+N7WDe9c9B+PP1DDfa982VyN\nCXVhvii/VqRChHaYLFWHw7Dsy9ScJcOc+VlAwjyNB4TIKPOjwSJoa18k9UsW\n9umddckDjma7ufgLZ8kXLvLTicEkNn9H0xNS+6n4KH01gFcvl8evx4uHho+0\nclKs\r\n=TwyD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/tab","readme":"<!--docs:\ntitle: \"Tab\"\nlayout: detail\nsection: components\nexcerpt: \"Governs the visibility of one of several groups of content.\"\niconId: tabs\npath: /catalog/tabs/tab/\n-->\n\n# Tab\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nEach Tab governs the visibility of one group of content.\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\">Material Design guidelines: 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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<button class=\"mdc-tab\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\">\n  <span class=\"mdc-tab__content\">\n    <span class=\"mdc-tab__icon\">heart</span>\n    <span class=\"mdc-tab__text-label\">Favorites</span>\n  </span>\n  <span class=\"mdc-tab-indicator\">\n    <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n  </span>\n  <span class=\"mdc-tab__ripple\"></span>\n</button>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTab} from '@material/tab';\n\nconst tab = new MDCTab(document.querySelector('.mdc-tab'));\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 Tab\n\n> *NOTE*: Don't forget to add the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` subcomponent.\n\n```html\n<button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\">\n  <span class=\"mdc-tab__content\">\n    <span class=\"mdc-tab__icon\">heart</span>\n    <span class=\"mdc-tab__text-label\">Favorites</span>\n  </span>\n  <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n    <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n  </span>\n  <span class=\"mdc-tab__ripple\"></span>\n</button>\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab` | Mandatory.\n`mdc-tab__content` | Mandatory. Indicates the text label of the tab.\n`mdc-tab__ripple` | Mandatory. Denotes the ripple surface for the tab.\n`mdc-tab--active` | Optional. Indicates that the tab is active.\n`mdc-tab--stacked` | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally.\n`mdc-tab--min-width` | Optional. Indicates that the tab should shrink in size to be as narrow as possible without causing text to wrap.\n`mdc-tab__text-label` | Optional. Indicates an icon in the tab.\n`mdc-tab__icon` | Optional. Indicates a leading icon in the tab.\n\n### Sass Mixins\n\nTo customize the colors of any part of the tab, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-tab-text-label-color($color)` | Customizes the color of the tab text label.\n`mdc-tab-icon-color($color)` | Customizes the color of the tab icon.\n`mdc-tab-parent-positioning` | Sets the positioning of the MDCTab's parent element so that `MDCTab.computeDimensions()` reports the same values in all browsers.\n`mdc-tab-fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width.\n\n## `MDCTab` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`active` | `boolean` | Allows getting the active state of the tab.\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the indicator.  `previousIndicatorClientRect` is an optional argument.\n`deactivate() => void` | Deactivates the indicator.\n`focus() => void` | Focuses the tab.\n`computeIndicatorClientRect() => ClientRect` | Returns the bounding client rect of the indicator.\n`computeDimensions() => MDCTabDimensions` | Returns the dimensions of the Tab.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTab:interacted` | `{\"detail\": {\"tab\": MDCTab}}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab 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### `MDCTabAdapter`\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`hasClass(className: string) => boolean` | Returns true if the root element contains the given class.\n`setAttr(attr: string, value: string) => void` | Sets the given attribute on the root element to the given value.\n`activateIndicator(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab indicator subcomponent. `previousIndicatorClientRect` is an optional argument.\n`deactivateIndicator() => void` | Deactivates the tab indicator subcomponent.\n`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect.\n`getOffsetLeft() => number` | Returns the `offsetLeft` value of the root element.\n`getOffsetWidth() => number` | Returns the `offsetWidth` value of the root element.\n`getContentOffsetLeft() => number` | Returns the `offsetLeft` value of the content element.\n`getContentOffsetWidth() => number` | Returns the `offsetWidth` value of the content element.\n`notifyInteracted() => void` | Emits the `MDCTab:interacted` event.\n`focus() => void` | Applies focus to the root element.\n\n### `MDCTabFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick() => void` | Handles the logic for the `\"click\"` event.\n`isActive() => boolean` | Returns whether the tab is active.\n`activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab. `previousIndicatorClientRect` is an optional argument.\n`deactivate() => void` | Deactivates the tab.\n`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect.\n`computeDimensions() => MDCTabDimensions` | Returns the dimensions of the tab.\n\n### `MDCTabFoundation` Event Handlers\n\nWhen wrapping the Tab component, it is necessary to register the following event handler. For an example of this, see the [MDCTab](index.js) component's `initialSyncWithDOM` method.\n\nEvent | Element | Foundation Handler\n--- | --- | ---\n`click` | Root element | `handleClick()`\n","license":"Apache-2.0","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","tab"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web tab 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"}],"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/typography":"^0.39.0-0","@material/tab-indicator":"^0.39.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab_0.39.0-0_1534432580248_0.5614296750164873","host":"s3://npm-registry-packages"},"_id":"@material/tab@0.39.0-0","version":"0.39.0-0"}