From 91d58961e6c76a779c0110cdf39f6918cf9dc7ba Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Wed, 18 Jul 2018 11:04:44 -0400 Subject: [PATCH 1/3] docs(tabs): Update READMEs to new format --- demos/tab-indicator.html | 2 +- packages/mdc-tab-indicator/README.md | 61 ++++++++++++++++++++++++---- packages/mdc-tab-scroller/README.md | 27 +++++++++++- packages/mdc-tab/README.md | 46 ++++++++++++++++----- 4 files changed, 113 insertions(+), 23 deletions(-) diff --git a/demos/tab-indicator.html b/demos/tab-indicator.html index 62a6e96d88b..0ad65cf9d15 100644 --- a/demos/tab-indicator.html +++ b/demos/tab-indicator.html @@ -228,7 +228,7 @@

Mix and Match

- + diff --git a/packages/mdc-tab-indicator/README.md b/packages/mdc-tab-indicator/README.md index df56c93f250..291e1584d0c 100644 --- a/packages/mdc-tab-indicator/README.md +++ b/packages/mdc-tab-indicator/README.md @@ -25,11 +25,12 @@ A Tab Indicator is a visual guide that shows which Tab is active. --> ## Installation + ``` -npm install --save @material/tab-indicator +npm install @material/tab-indicator ``` -## Usage +## Basic Usage ### HTML Structure @@ -39,11 +40,44 @@ npm install --save @material/tab-indicator ``` -#### Active Indicator +### Styles + +```scss +@import "@material/tab/mdc-tab-indicator"; +``` + +### JavaScript Instantiation + +```js +import {MDCTabIndicator} from '@material/tab-indicator'; + +const button = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator')); +``` + +> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. + +## Variants + +### Active Indicator Add the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active. +### Indicator Types and Transitions + +The Tab Indicator may be represented in one of two ways: + +* Underline, indicated by the `mdc-tab-indicator__content--underline` class +* Icon, indicated by the `mdc-tab-indicator__content--icon` class + +One of these classes _must_ be applied to the Tab Indicator's content element. + +The Tab Indicator may transition in one of two ways: + +* Slide, the default behavior +* Fade, indicated by the `mdc-tab-indicator--fade` class + #### Sliding Underline Indicator + ```html @@ -61,22 +95,27 @@ You can use [Material Icons](https://material.io/icons/) from Google Fonts withi ``` #### Sliding Icon Indicator + ```html star ``` +## Style Customization + ### CSS Classes CSS Class | Description --- | --- `mdc-tab-indicator` | Mandatory. Contains the tab indicator content. `mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content. -`mdc-tab-indicator--active` | Optional. Visually activates the indicator -`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation -`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator -`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator +`mdc-tab-indicator--active` | Optional. Visually activates the indicator. +`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation. +`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator. +`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator. + +> *NOTE*: Indicators *must* apply either the `--underline` or `--icon` modifier. ### Sass Mixins @@ -84,14 +123,14 @@ To customize the tab indicator, use the following mixins. Mixin | Description --- | --- -`mdc-tab-indicator-surface` | Mandatory. Applied to the parent element of the `mdc-tab-indicator`. +`mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`. `mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline `mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement `mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline `mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement `mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline subelement -### `MDCTabIndicator` +## `MDCTabIndicator` Methods Method Signature | Description --- | --- @@ -99,6 +138,10 @@ Method Signature | Description `deactivate() => void` | Deactivates the tab indicator `computeContentClientRect() => ClientRect` | Returns the content element bounding client rect +## Usage within Web Frameworks + +If you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator 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). + ### `MDCTabIndicatorAdapter` Method Signature | Description diff --git a/packages/mdc-tab-scroller/README.md b/packages/mdc-tab-scroller/README.md index 2bd20c2e68c..b04b3cb7982 100644 --- a/packages/mdc-tab-scroller/README.md +++ b/packages/mdc-tab-scroller/README.md @@ -12,11 +12,12 @@ path: /catalog/tabs/scroller/ A Tab Scroller allows for smooth native and animated scrolling of tabs. ## Installation + ``` npm install @material/tab-scroller ``` -## Usage +## Basic Usage ### HTML Structure @@ -28,6 +29,24 @@ npm install @material/tab-scroller
``` +### Styles + +```scss +@import "@material/tab/mdc-tab-scroller"; +``` + +### JavaScript Instantiation + +```js +import {MDCTabScroller} from '@material/tab-scroller'; + +const button = new MDCTabScroller(document.querySelector('.mdc-tab-scroller')); +``` + +> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. + +## Style Customization + ### CSS Classes CSS Class | Description @@ -36,7 +55,7 @@ CSS Class | Description `mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area. `mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content. -### `MDCTabScroller` +## `MDCTabScroller` Methods Method Signature | Description --- | --- @@ -44,6 +63,10 @@ Method Signature | Description `incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value `getScrollPosition() => number` | Returns the current visual scroll position +## Usage within Web Frameworks + +If you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller 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). + ### `MDCTabScrollerAdapter` Method Signature | Description diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md index 2a4e7e23f19..8ed1cdf55a5 100644 --- a/packages/mdc-tab/README.md +++ b/packages/mdc-tab/README.md @@ -24,11 +24,12 @@ Each Tab governs the visibility of one group of content. ## Installation + ``` -npm install --save @material/tab +npm install @material/tab ``` -## Usage +## Basic Usage ### HTML Structure @@ -45,9 +46,27 @@ npm install --save @material/tab ``` -#### Active Tab +### Styles + +```scss +@import "@material/tab/mdc-tab"; +``` + +### JavaScript Instantiation + +```js +import {MDCTab} from '@material/tab'; + +const button = new MDCTab(document.querySelector('.mdc-tab')); +``` + +> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. + +## Variants ->*NOTE*: Don't forget to add the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` subcomponent. +### Active Tab + +> *NOTE*: Don't forget to add the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` subcomponent. ```html ``` +## Style Customization + ### CSS Classes CSS Class | Description --- | --- `mdc-tab` | Mandatory. -`mdc-tab__content` | Mandatory. Indicates the text label of the tab -`mdc-tab__ripple` | Mandatory. Denotes the ripple surface for the tab -`mdc-tab--active` | Optional. Indicates that the tab is active -`mdc-tab--stacked` | Optional. Indicates that the tab content should be displayed vertically instead of horizontally -`mdc-tab__text-label` | Optional. Indicates an icon in the tab -`mdc-tab__icon` | Optional. Indicates a leading icon in the tab +`mdc-tab__content` | Mandatory. Indicates the text label of the tab. +`mdc-tab__ripple` | Mandatory. Denotes the ripple surface for the tab. +`mdc-tab--active` | Optional. Indicates that the tab is active. +`mdc-tab--stacked` | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally. +`mdc-tab__text-label` | Optional. Indicates an icon in the tab. +`mdc-tab__icon` | Optional. Indicates a leading icon in the tab. ### Sass Mixins @@ -83,7 +104,7 @@ Mixin | Description `mdc-tab-text-label-color($color)` | Customizes the color of the tab text label `mdc-tab-icon-color($color)` | Customizes the color of the tab icon -### `MDCTab` +## `MDCTab` Properties and Methods Property | Value Type | Description --- | --- | --- @@ -94,6 +115,9 @@ Method Signature | Description `activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the indicator. `previousIndicatorClientRect` is an optional argument `deactivate() => void` | Deactivates the indicator +## Usage within Web Frameworks + +If 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). ### `MDCTabAdapter` From 47d465a9e33ded0d79f273948fd4061e332b53df Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Wed, 18 Jul 2018 14:13:57 -0400 Subject: [PATCH 2/3] WIP tweaks --- packages/mdc-tab-indicator/README.md | 12 +++++------- packages/mdc-tab-scroller/README.md | 13 ++++++++++++- packages/mdc-tab/README.md | 2 +- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/mdc-tab-indicator/README.md b/packages/mdc-tab-indicator/README.md index 291e1584d0c..f7ec9cdb3f4 100644 --- a/packages/mdc-tab-indicator/README.md +++ b/packages/mdc-tab-indicator/README.md @@ -13,16 +13,14 @@ A Tab Indicator is a visual guide that shows which Tab is active. ## Design & API Documentation - ## Installation @@ -51,7 +49,7 @@ npm install @material/tab-indicator ```js import {MDCTabIndicator} from '@material/tab-indicator'; -const button = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator')); +const tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator')); ``` > See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. @@ -69,7 +67,7 @@ The Tab Indicator may be represented in one of two ways: * Underline, indicated by the `mdc-tab-indicator__content--underline` class * Icon, indicated by the `mdc-tab-indicator__content--icon` class -One of these classes _must_ be applied to the Tab Indicator's content element. +> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element. The Tab Indicator may transition in one of two ways: @@ -115,7 +113,7 @@ CSS Class | Description `mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator. `mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator. -> *NOTE*: Indicators *must* apply either the `--underline` or `--icon` modifier. +> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present. ### Sass Mixins diff --git a/packages/mdc-tab-scroller/README.md b/packages/mdc-tab-scroller/README.md index b04b3cb7982..7aec39a711e 100644 --- a/packages/mdc-tab-scroller/README.md +++ b/packages/mdc-tab-scroller/README.md @@ -11,6 +11,17 @@ path: /catalog/tabs/scroller/ A Tab Scroller allows for smooth native and animated scrolling of tabs. +## Design & API Documentation + + + ## Installation ``` @@ -40,7 +51,7 @@ npm install @material/tab-scroller ```js import {MDCTabScroller} from '@material/tab-scroller'; -const button = new MDCTabScroller(document.querySelector('.mdc-tab-scroller')); +const tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller')); ``` > See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md index 8ed1cdf55a5..c2c1e84e7ce 100644 --- a/packages/mdc-tab/README.md +++ b/packages/mdc-tab/README.md @@ -57,7 +57,7 @@ npm install @material/tab ```js import {MDCTab} from '@material/tab'; -const button = new MDCTab(document.querySelector('.mdc-tab')); +const tab = new MDCTab(document.querySelector('.mdc-tab')); ``` > See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. From 877486b20093d83a9028e081005dea2eb70e3a49 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Thu, 19 Jul 2018 10:20:14 -0400 Subject: [PATCH 3/3] WIP tweaks --- packages/mdc-tab-indicator/README.md | 36 +++++++++++++------------- packages/mdc-tab-scroller/README.md | 28 ++++++++++---------- packages/mdc-tab/README.md | 38 ++++++++++++++-------------- 3 files changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/mdc-tab-indicator/README.md b/packages/mdc-tab-indicator/README.md index f7ec9cdb3f4..2e8860a3720 100644 --- a/packages/mdc-tab-indicator/README.md +++ b/packages/mdc-tab-indicator/README.md @@ -122,19 +122,19 @@ To customize the tab indicator, use the following mixins. Mixin | Description --- | --- `mdc-tab-indicator-surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`. -`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline -`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement -`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline -`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement -`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline subelement +`mdc-tab-indicator-underline-color($color)` | Customizes the color of the underline. +`mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement. +`mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline. +`mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement. +`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element. ## `MDCTabIndicator` Methods Method Signature | Description --- | --- -`activate(previousIndicatorClientRect: ClientRect) => void` | Activates the tab indicator -`deactivate() => void` | Deactivates the tab indicator -`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect +`activate(previousIndicatorClientRect: ClientRect) => void` | Activates the tab indicator. +`deactivate() => void` | Deactivates the tab indicator. +`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect. ## Usage within Web Frameworks @@ -144,18 +144,18 @@ If you are using a JavaScript framework, such as React or Angular, you can creat Method Signature | Description --- | --- -`addClass(className: string) => void` | Adds a class to the root element -`removeClass(className: string) => void` | Removes a class from the root element -`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element -`deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element -`setContentStyleProp(property: string, value: string) => void` | Sets the style property of the content element -`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect +`addClass(className: string) => void` | Adds a class to the root element. +`removeClass(className: string) => void` | Removes a class from the root element. +`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element. +`deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element. +`setContentStyleProp(property: string, value: string) => void` | Sets the style property of the content element. +`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect. ### `MDCTabIndicatorFoundation` Method Signature | Description --- | --- -`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `"transitionend"` event on the root element -`activate(previousIndicatorClientRect: ClientRect) => void` | Activates the tab indicator -`deactivate() => void` | Deactivates the tab indicator -`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect +`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `"transitionend"` event on the root element. +`activate(previousIndicatorClientRect: ClientRect) => void` | Activates the tab indicator. +`deactivate() => void` | Deactivates the tab indicator. +`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect. diff --git a/packages/mdc-tab-scroller/README.md b/packages/mdc-tab-scroller/README.md index 7aec39a711e..f6703769da9 100644 --- a/packages/mdc-tab-scroller/README.md +++ b/packages/mdc-tab-scroller/README.md @@ -70,9 +70,9 @@ CSS Class | Description Method Signature | Description --- | --- -`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value -`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value -`getScrollPosition() => number` | Returns the current visual scroll position +`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value. +`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value. +`getScrollPosition() => number` | Returns the current visual scroll position. ## Usage within Web Frameworks @@ -82,19 +82,19 @@ If you are using a JavaScript framework, such as React or Angular, you can creat Method Signature | Description --- | --- -`addClass(className: string) => void` | Adds a class to the root element -`removeClass(className: string) => void` | Removes a class from the root element -`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the style property of the scroll content element -`getScrollContentStyleValue(property: string) => string` | Returns the style property value of the scroll content element -`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element scrollLeft -`getScrollAreaScrollLeft() => number` | Returns the scroll area element scroll left -`getScrollContentOffsetWidth() => number` | Returns the scroll content element's offsetWidth -`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's offsetWidth +`addClass(className: string) => void` | Adds a class to the root element. +`removeClass(className: string) => void` | Removes a class from the root element. +`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the style property of the scroll content element. +`getScrollContentStyleValue(property: string) => string` | Returns the style property value of the scroll content element. +`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`. +`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`. +`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`. +`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`. ### `MDCTabScrollerFoundation` Method Signature | Description --- | --- -`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value -`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value -`getScrollPosition() => number` | Returns the current visual scroll position +`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value. +`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value. +`getScrollPosition() => number` | Returns the current visual scroll position. diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md index c2c1e84e7ce..fa57eec04ca 100644 --- a/packages/mdc-tab/README.md +++ b/packages/mdc-tab/README.md @@ -101,19 +101,19 @@ To customize the colors of any part of the tab, use the following mixins. Mixin | Description --- | --- -`mdc-tab-text-label-color($color)` | Customizes the color of the tab text label -`mdc-tab-icon-color($color)` | Customizes the color of the tab icon +`mdc-tab-text-label-color($color)` | Customizes the color of the tab text label. +`mdc-tab-icon-color($color)` | Customizes the color of the tab icon. ## `MDCTab` Properties and Methods Property | Value Type | Description --- | --- | --- -`active` | `boolean` | Allows getting the active state of the tab +`active` | `boolean` | Allows getting the active state of the tab. Method Signature | Description --- | --- -`activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the indicator. `previousIndicatorClientRect` is an optional argument -`deactivate() => void` | Deactivates the indicator +`activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the indicator. `previousIndicatorClientRect` is an optional argument. +`deactivate() => void` | Deactivates the indicator. ## Usage within Web Frameworks @@ -123,22 +123,22 @@ If you are using a JavaScript framework, such as React or Angular, you can creat Method Signature | Description --- | --- -`addClass(className: string) => void` | Adds a class to the root element -`removeClass(className: string) => void` | Removes a class from the root element -`hasClass(className: string) => boolean` | Returns true if the root element contains the given class -`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element -`deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element -`setAttr(attr: string, value: string) => void` | Sets the given attribute on the root element to the given value -`activateIndicator(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab indicator subcomponent. `previousIndicatorClientRect` is an optional argument -`deactivateIndicator() => void` | Deactivates the tab indicator subcomponent -`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect +`addClass(className: string) => void` | Adds a class to the root element. +`removeClass(className: string) => void` | Removes a class from the root element. +`hasClass(className: string) => boolean` | Returns true if the root element contains the given class. +`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element. +`deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element. +`setAttr(attr: string, value: string) => void` | Sets the given attribute on the root element to the given value. +`activateIndicator(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab indicator subcomponent. `previousIndicatorClientRect` is an optional argument. +`deactivateIndicator() => void` | Deactivates the tab indicator subcomponent. +`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect. ### `MDCTabFoundation` Method Signature | Description --- | --- -`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `"transitionend"` event -`isActive() => boolean` | Returns whether the tab is active -`activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab. `previousIndicatorClientRect` is an optional argument -`deactivate() => void` | Deactivates the tab -`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect +`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `"transitionend"` event. +`isActive() => boolean` | Returns whether the tab is active. +`activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab. `previousIndicatorClientRect` is an optional argument. +`deactivate() => void` | Deactivates the tab. +`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect.