This repository has been archived by the owner on Jan 13, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
44c9261
commit eb23e22
Showing
25 changed files
with
2,151 additions
and
31 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| // | ||
| // Copyright 2018 Google Inc. All Rights Reserved. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
| // | ||
|
|
||
| @import "./common"; | ||
| @import "../packages/mdc-tab/mdc-tab"; | ||
| @import "../packages/mdc-tab/mixins"; | ||
| @import "../packages/mdc-tab-indicator/mdc-tab-indicator"; | ||
| @import "../packages/mdc-tab-indicator/mixins"; | ||
| @import "../packages/mdc-tab-scroller/mdc-tab-scroller"; | ||
| @import "../packages/mdc-tab-bar/mdc-tab-bar"; | ||
| @import "../packages/mdc-tab-bar/mixins"; | ||
| @import "../packages/mdc-elevation/mixins"; | ||
| @import "../packages/mdc-ripple/mixins"; | ||
| @import "../packages/mdc-theme/color-palette"; | ||
|
|
||
| .demo { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .hero-demo-tab-bar { | ||
| @include mdc-tab-bar-width(420px); | ||
| } | ||
|
|
||
| .custom-demo-tab-bar { | ||
| .mdc-tab { | ||
| @include mdc-typography(subtitle1); | ||
| @include mdc-tab-fixed-width(120px); | ||
| @include mdc-tab-text-label-color($material-color-blue-600); | ||
| @include mdc-tab-icon-color($material-color-blue-600); | ||
| } | ||
|
|
||
| .mdc-tab__ripple { | ||
| @include mdc-states($material-color-yellow-700); | ||
| } | ||
|
|
||
| .mdc-tab--active { | ||
| @include mdc-tab-text-label-color($material-color-blue-900); | ||
| @include mdc-tab-icon-color($material-color-blue-900); | ||
| } | ||
|
|
||
| .mdc-tab-indicator { | ||
| @include mdc-tab-indicator-underline-height(5px); | ||
| @include mdc-tab-indicator-underline-color($material-color-yellow-700); | ||
| } | ||
| } | ||
|
|
||
| .demo-controls { | ||
| padding: 0 16px; | ||
| } | ||
|
|
||
| .rtl-container { | ||
| margin: 24px; | ||
| padding: 24px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| <!--docs: | ||
| title: "Tab Bar" | ||
| layout: detail | ||
| section: components | ||
| excerpt: "Manages a set of Tabs." | ||
| iconId: tabs | ||
| path: /catalog/tabs/tab-bar/ | ||
| --> | ||
|
|
||
| # Tab Bar | ||
|
|
||
| Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. | ||
| The Tab Bar contains the Tab Scroller and Tab components. | ||
|
|
||
| ## Design & API Documentation | ||
|
|
||
| <ul class="icon-list"> | ||
| <li class="icon-list-item icon-list-item--spec"> | ||
| <a href="https://material.io/go/design-tabs">Material Design guidelines: Tabs</a> | ||
| </li> | ||
| <li class="icon-list-item icon-list-item--link"> | ||
| <a href="https://material-components.github.io/material-components-web-catalog/#/component/tabs">Demo</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| ## Installation | ||
|
|
||
| ``` | ||
| npm install @material/tab-bar | ||
| ``` | ||
|
|
||
| ## Basic Usage | ||
|
|
||
| ### HTML Structure | ||
|
|
||
| ```html | ||
| <div class="mdc-tab-bar" role="tablist"> | ||
| <div class="mdc-tab-scroller"> | ||
| <div class="mdc-tab-scroller__scroll-area"> | ||
| <div class="mdc-tab-scroller__scroll-content"> | ||
| <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0"> | ||
| <div class="mdc-tab__content"> | ||
| <span class="mdc-tab__icon">heart</div> | ||
| <span class="mdc-tab__text-label">Favorites</div> | ||
| </div> | ||
| <span class="mdc-tab-indicator mdc-tab-indicator--active"> | ||
| <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span> | ||
| </span> | ||
| <div class="mdc-tab__ripple"></div> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </button> | ||
| ``` | ||
|
|
||
| ### Styles | ||
|
|
||
| ```scss | ||
| @import "@material/tab-bar/mdc-tab-bar"; | ||
| @import "@material/tab-scroller/mdc-tab-scroller"; | ||
| @import "@material/tab-indicator/mdc-tab-indicator"; | ||
| @import "@material/tab/mdc-tab"; | ||
| ``` | ||
|
|
||
| ### JavaScript Instantiation | ||
|
|
||
| ```js | ||
| import {MDCTabBar} from '@material/tab-bar'; | ||
|
|
||
| const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar')); | ||
| ``` | ||
|
|
||
| > See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. | ||
| ## Style Customization | ||
|
|
||
| ### CSS Classes | ||
|
|
||
| CSS Class | Description | ||
| --- | --- | ||
| `mdc-tab-bar` | Mandatory. | ||
|
|
||
| ### Sass Mixins | ||
|
|
||
| To customize the width of the tab bar, use the following mixin. | ||
|
|
||
| Mixin | Description | ||
| --- | --- | ||
| `mdc-tab-bar-width($width)` | Customizes the width of the tab bar. | ||
|
|
||
| ## `MDCTabBar` Properties and Methods | ||
|
|
||
| Method Signature | Description | ||
| --- | --- | ||
| `activateTab(index: number) => void` | Activates the tab at the given index. | ||
| `scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view. | ||
|
|
||
| Event Name | Event Data Structure | Description | ||
| --- | --- | --- | ||
| `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. | ||
|
|
||
| ## Usage within Web Frameworks | ||
|
|
||
| If 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). | ||
|
|
||
| ### `MDCTabBarAdapter` | ||
|
|
||
| Method Signature | Description | ||
| --- | --- | ||
| `scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position. | ||
| `incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value. | ||
| `getScrollPosition() => number` | Returns the scroll position of the Tab Scroller. | ||
| `getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element. | ||
| `getOffsetWidth() => number` | Returns the offsetWidth of the root element. | ||
| `isRTL() => boolean` | Returns if the text direction is RTL. | ||
| `activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect. | ||
| `deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index. | ||
| `getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index. | ||
| `getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index. | ||
| `getTabListLength() => number` | Returns the number of child Tab components. | ||
| `getActiveTabIndex() => number` | Returns the index of the active Tab. | ||
| `getIndexOfTab(tab: MDCTab) => number` | Returns the index of the given Tab instance. | ||
| `notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event. | ||
|
|
||
| ### `MDCTabBarFoundation` | ||
|
|
||
| Method Signature | Description | ||
| --- | --- | ||
| `activateTab(index: number) => void` | Activates the Tab at the given index. | ||
| `handleKeyDown(evt: Event) => void` | Handles the logic for the `"keydown"` event. | ||
| `handleTabInteraction(evt: Event) => void` | Handles the logic for the `"MDCTab:interacted"` event. | ||
| `scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2018 Google Inc. All Rights Reserved. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License") | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| @mixin mdc-tab-bar-width($width) { | ||
| width: $width; | ||
| } |
Oops, something went wrong.