{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ff390a62500ae3562b12bc6c86bb006dade368e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-1.0.0-0.tgz","fileCount":31,"integrity":"sha512-6irIBiVhD1CWSeHvwJw4PYf7G1eT/bSiqaBgi7UFKuXl0XrYY1AnXYW6fmCEZin5R8F0TDNPUPNmDrB5SNPN4A==","signatures":[{"sig":"MEYCIQC1j1fmu8VjUMtOX2i3UzsprwGmElKUcoQG6Fz3OxCeYgIhAL4Evc5iE+1HBVzZEObw7ROmxpE49Mf4zeGxCbNrccUf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1207537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdySTCRA9TVsSAnZWagAA5esQAJwzxZ5668o/+3cBzGfN\n3M8U4f7CIdBCqHZ7jXIe905B/d/WMyEtA1eXbBeG7ky/CPyTh6kTCU/2URc5\nhFtgR24b8Zb6zfV0m93umsyoENZ/+QWf7IHVkHfl3hBhjcVc2SKf3UnAJe6f\nUch7rr5M9sgxLEvjCU44mtgAx8u2uKDzy2MLIRRH+al0ul2cHDx65qUEyi5p\ngJfhW/iZtAtbmfmeVDj+cZGwLaAyyQmZ52zOaERAff8kIWwHK3+EUxUrfHM1\nfb4NFphNg/9dzGCVo3MVLexpbjWeY/WXzAnW5HDfA+4Dyn/4/g+1ShgIy32h\nhHKQ7A7uLQRD5yfboRFx2xY+zFafYaw4aI+kiUy6Gx5LVP2OVNMjFNTpT3jQ\n9ceApF72Qw9COA8t50o5/TjScp1r9Wphw3/JFi0THHSYdNyCIHBqwhGc5uLU\nELXJU4iP/rjUFZaE5exe8IwvTUeiVyR3lveeVDh1FD29gnvqJUR1Ln4IX5d+\npnVNU69zYpFsMMwZYJNbhCtJxGm7LqcJ1/tM4Bdsfy1CVFtIhLllTXukVaA9\nPoyFrMenfglrQJswFsRixr3IZCQjeEoQhRdeAoKMEY+pjunkHXTnePITchTU\nPUAS2M3C7KjiV6ra7UGLVNXD3TVHtsxp8+W22qnbsboSy833cwmjn6Os9Eat\n5u3T\r\n=DHk0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabBar.js","name":"@material/tab-bar","types":"dist/mdc.tabBar.d.ts","module":"index.js","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 material-icons\" aria-hidden=\"true\">favorite</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### Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\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\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\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`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\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`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\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`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\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":"MIT","_npmUser":{"name":"acdvorak","email":"acdvorak@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.8.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"}],"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/tab":"^1.0.0-0","@material/base":"^1.0.0-0","@material/elevation":"^1.0.0-0","@material/tab-scroller":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_1.0.0-0_1551312019003_0.10003076149858914","host":"s3://npm-registry-packages"},"_id":"@material/tab-bar@1.0.0-0","version":"1.0.0-0"}