Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(tabs): Update new READMEs to match standard #3142

Merged
merged 4 commits into from
Jul 19, 2018
Merged

docs(tabs): Update new READMEs to match standard #3142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
91d5896
docs(tabs): Update READMEs to new format
Jul 18, 2018
47d465a
WIP tweaks
Jul 18, 2018
877486b
WIP tweaks
Jul 19, 2018
c03338d
Merge branch 'feat/tabs/tabs' into feat/tabs/docs-readme-standards
kfranqueiro Jul 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion demos/tab-indicator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ <h2>Mix and Match</h2>
</span>
</div>
<div class="demo-item demo-item--wide">
<span class="mdc-tab-indicator mdc-tab-indicator--icon custom-sliding-icon">
<span class="mdc-tab-indicator custom-sliding-icon">
<svg class="mdc-tab-indicator__content mdc-tab-indicator__content--icon custom-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/>
<path fill="none" d="M0 0h24v24H0V0z"/>
Expand Down
103 changes: 72 additions & 31 deletions packages/mdc-tab-indicator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,22 @@ A Tab Indicator is a visual guide that shows which Tab is active.

## Design & API Documentation

<!--
<ul class="icon-list">
<li class="icon-list-item icon-list-item--spec">
<a href="https://material.io/guidelines/components/tabs.html">Material Design guidelines: Tab Indicator</a>
<a href="https://material.io/go/design-tabs#anatomy">Material Design guidelines: Anatomy of Tabs</a>
</li>
<li class="icon-list-item icon-list-item--link">
<a href="https://material-components-web.appspot.com/tab-indicator.html">Demo</a>
<a href="https://material-components.github.io/material-components-web-catalog/#/component/tabs">Demo</a>
</li>
</ul>
-->

## Installation

```
npm install --save @material/tab-indicator
npm install @material/tab-indicator
```

## Usage
## Basic Usage

### HTML Structure

Expand All @@ -39,11 +38,44 @@ npm install --save @material/tab-indicator
</span>
```

#### Active Indicator
### Styles

```scss
@import "@material/tab/mdc-tab-indicator";
```

### JavaScript Instantiation

```js
import {MDCTabIndicator} from '@material/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.

## 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

> *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:

* Slide, the default behavior
* Fade, indicated by the `mdc-tab-indicator--fade` class

#### Sliding Underline Indicator

```html
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
Expand All @@ -61,60 +93,69 @@ You can use [Material Icons](https://material.io/icons/) from Google Fonts withi
```

#### Sliding Icon Indicator

```html
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">star</span>
</span>
```

## 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*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.

### Sass Mixins

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-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-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 child element.

### `MDCTabIndicator`
## `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

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
--- | ---
`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.
66 changes: 50 additions & 16 deletions packages/mdc-tab-scroller/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,24 @@ path: /catalog/tabs/scroller/

A Tab Scroller allows for smooth native and animated scrolling of tabs.

## Design & API Documentation

<ul class="icon-list">
<li class="icon-list-item icon-list-item--spec">
<a href="https://material.io/go/design-tabs#scrollable-tabs">Material Design guidelines: Scrollable 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-scroller
```

## Usage
## Basic Usage

### HTML Structure

Expand All @@ -28,6 +40,24 @@ npm install @material/tab-scroller
</div>
```

### Styles

```scss
@import "@material/tab/mdc-tab-scroller";
```

### JavaScript Instantiation

```js
import {MDCTabScroller} from '@material/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.

## Style Customization

### CSS Classes

CSS Class | Description
Expand All @@ -36,31 +66,35 @@ 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
--- | ---
`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

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
--- | ---
`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.
Loading