{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c1655ac1028d23d2f4de8ecaadea4144dedf02a","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-0.39.0-0.tgz","fileCount":12,"integrity":"sha512-Fs35BIN8U3pBI3sbnoUEeB921ho+nVNSfbrLTX+UN4jAVJY79rpRB/YtoXAjltXkOI9PRrmRXg5rtKkv2uRiRg==","signatures":[{"sig":"MEQCIHnBVu20PE/T5nQnGa9r4LrKpybB8tbrJCWeJslUHI3zAiAphsJg/URquxTRqQnCe0/88pJh9IJDYYyLpJZ33/f1Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZVlCRA9TVsSAnZWagAAhxoP/19QALqCGRySdk0IvSo1\nheAPu9v+ZKmfbW9pgCr+KaQQdQkTtIrN3X9lPgvTlR3iXXbDf28ImDBqVlet\nbNri/yBXPUDqkQJNX0hMbP7t4DBZvli/rE633tb8Y7dskTuJpjhnG2B/9Nwt\nb5Ygcr3F7u130ITOIe6iUSUwsNJv1MJuCFhfW9nazYmoCfUrnFN+shR+8I73\ntHZsxoHmvFZZHIf7vyLAK/Bxb9IN/Zuv+npKXlwlPrqAl8TKNbSiACRTH0rv\ncw6dhZ3+XjofgXDwgcCf2rt7bqqAFkYU/GQS2t6gH/Sl/NvfbXlUcJi72Q/h\nk6db2umjWiQBsP5H+LP8g80xs2gF8cjfPvKUKln2c0fdA/x7WrTlceugyzdy\n24The6ArstTlcnY91ly1m/ZuD4/6IKktKTZ2jXf7PnmSh4vLeT54S6Hu1ax0\n592W3nQJXVYn6iYnIE47ojTQiMwdOdidH7WsyAXmrXG/rnKEi2tToO6xrOv1\nQvo3jJQujOeVcA0EykScQf4bcOTqqGPTXCL6Eifcj6S0g8w9l7BD24oGPqtQ\nxDUlIWp1utdvqWNKYOC8PQ3PHt4if893f3lDYCbwPzggLHhx2erEheURoBhk\nodg8dI15J1dxlJ3RAouRX3PMMFAAwBULgqo/cksxUSuv4ugGKCVF6WfLccrA\n1rDZ\r\n=jMxt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@material/tab-bar","readme":"<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\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-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\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      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-bar/mdc-tab-bar\";\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n@import \"@material/tab-indicator/mdc-tab-indicator\";\n@import \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.\n\n## `MDCTabBar` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar 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### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getActiveTabIndex() => number` | Returns the index of the active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTab(tab: MDCTab) => number` | Returns the index of the given Tab instance.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the Tab at the given index.\n`handleKeyDown(evt: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(evt: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\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","bar"],"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 bar 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/tab":"^0.39.0-0","@material/base":"^0.35.0","@material/elevation":"^0.38.0","@material/tab-scroller":"^0.39.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_0.39.0-0_1534432612637_0.510258299945693","host":"s3://npm-registry-packages"},"_id":"@material/tab-bar@0.39.0-0","version":"0.39.0-0"}