{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bff4ee3c2d010262e79c0cf162bcfb6c0d39b2e","tarball":"https://registry.npmjs.org/@material/tab-bar/-/tab-bar-3.0.0-alpha.1.tgz","fileCount":32,"integrity":"sha512-4i1AS73BdDfzigCUj7esdWNrt6jIb9nSPp+tOykeQRrYmP1ujQ1xfrSVtqjt97kH6V/NoniU3z6PsK3QQQ9b3g==","signatures":[{"sig":"MEQCIAtXBRFdRTKTHytX3FdHQ2f32/m34YYxCQlUHZuQ8fyiAiB//bCmbbi4OIN+vqDZY4LcTOdJJPUb/bwZ8POXq35+Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1036912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxTCRA9TVsSAnZWagAAO/sP/RzgDD9OhZ1fBt6v8StV\nOUf6V1unqMkmpBZsuzaMOYekVQICXpURbLLgZ+dM0u/WBINtQhzy5Z+Hv2TW\np4iEC3oNuSQtaKAHaidzGOka3C4HyFgBxdQTuHKwQ/TfzSlHpklyBfTwCfU8\nnubOcVa6z++hSdyH9FiV2KLohz80Cfgaq+08Lyck9n6yiUqxU2Y3eoFRwPSD\nXGnew3o7e8FcqDkOkpAYkt35ncjZdmTqXROM8DdN17zo7d24ccWWeTl2HnZK\nGAqYGptmiJ9c1+J6Z8GGukDE0S0guc47L1ofKZ0OVh6LebADfxO1OK+a2mNo\nby+5L6r9knvsaDGsxahYs/KsGZgGNYZ7M9PpwRxyJPGJoJQRw1EtCGSQ/xuq\n1EzJO5EPLZxHzMqryRpH44PffsJpT/mV/B1zcT6s2Yp3j6sevdj3RRgUAuW9\nzPF/I4r6FrubLLucGcAmmX9VrdsyhtoMYpdG/AmmSDDN0X3IIrefKnarp4DV\nEdGJER486h2jBtYdiResviW6G0riY/w9X+Cf3N2Pl19C95VODNmh9CAaaIvu\nvq5OPwp5hHlFLLQypIglmU2v6tg06USzBqo2Gamx6yePZ42hbQI7JHfLsGmG\nHGh48GQUtGLSwsCMxH03zVobb9RCP3cwqsef5SD/7UdOWwn+TOB1FM5Aek1j\nYP4h\r\n=67ji\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### Tab Icons\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\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","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@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":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","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":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/tab":"^3.0.0-alpha.1","@material/base":"^1.0.0","@material/elevation":"^3.0.0-alpha.1","@material/tab-scroller":"^3.0.0-alpha.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-bar_3.0.0-alpha.1_1560366162724_0.24120235414826108","host":"s3://npm-registry-packages"},"_id":"@material/tab-bar@3.0.0-alpha.1","version":"3.0.0-alpha.1"}