mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
Merge branch 'master' into icon-button
This commit is contained in:
commit
b305546467
@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
|||||||
|
|
||||||
## Unreleased
|
## Unreleased
|
||||||
<!-- add new unreleased changes here -->
|
<!-- add new unreleased changes here -->
|
||||||
|
- Move event listeners to the class with lit-element 0.6.2
|
||||||
|
- Add `@eventOptions({passive: true})` to event handlers in tab-bar-scroller
|
||||||
|
- More efficient scrolling behavior, as `preventDefault` is never called
|
||||||
- Implement icon-button in typescript
|
- Implement icon-button in typescript
|
||||||
|
|
||||||
## [0.3.1] - 2018-10-08
|
## [0.3.1] - 2018-10-08
|
||||||
|
@ -120,13 +120,13 @@ limitations under the License.
|
|||||||
<span class="mdc-list-item__secondary-text">Interactive presentation of important information</span>
|
<span class="mdc-list-item__secondary-text">Interactive presentation of important information</span>
|
||||||
</span>
|
</span>
|
||||||
</a> -->
|
</a> -->
|
||||||
<!-- <a role="listitem" class="mdc-list-item" href="drawer.html">
|
<a role="listitem" class="mdc-list-item" href="drawer.html">
|
||||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
||||||
<span class="mdc-list-item__text">
|
<span class="mdc-list-item__text">
|
||||||
Drawer
|
Drawer
|
||||||
<span class="mdc-list-item__secondary-text">Multi-selection controls</span>
|
<span class="mdc-list-item__secondary-text">Multi-selection controls</span>
|
||||||
</span>
|
</span>
|
||||||
</a> -->
|
</a>
|
||||||
<a role="listitem" class="mdc-list-item" href="formfield.html">
|
<a role="listitem" class="mdc-list-item" href="formfield.html">
|
||||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_text_field_24px.svg"></span>
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_text_field_24px.svg"></span>
|
||||||
<span class="mdc-list-item__text">
|
<span class="mdc-list-item__text">
|
||||||
@ -148,13 +148,13 @@ limitations under the License.
|
|||||||
<span class="mdc-list-item__secondary-text">Toggling icon states</span>
|
<span class="mdc-list-item__secondary-text">Toggling icon states</span>
|
||||||
</span>
|
</span>
|
||||||
</a> -->
|
</a> -->
|
||||||
<!-- <a role="listitem" class="mdc-list-item" href="linear-progress.html">
|
<a role="listitem" class="mdc-list-item" href="linear-progress.html">
|
||||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_progress_activity.svg"></span>
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_progress_activity.svg"></span>
|
||||||
<span class="mdc-list-item__text">
|
<span class="mdc-list-item__text">
|
||||||
Linear Progress
|
Linear Progress
|
||||||
<span class="mdc-list-item__secondary-text">Fills from 0% to 100%, represented by bars</span>
|
<span class="mdc-list-item__secondary-text">Fills from 0% to 100%, represented by bars</span>
|
||||||
</span>
|
</span>
|
||||||
</a> -->
|
</a>
|
||||||
<!-- <a role="listitem" class="mdc-list-item" href="menu.html">
|
<!-- <a role="listitem" class="mdc-list-item" href="menu.html">
|
||||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_menu_24px.svg"></span>
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_menu_24px.svg"></span>
|
||||||
<span class="mdc-list-item__text">
|
<span class="mdc-list-item__text">
|
||||||
@ -204,13 +204,13 @@ limitations under the License.
|
|||||||
<span class="mdc-list-item__secondary-text">On off switches</span>
|
<span class="mdc-list-item__secondary-text">On off switches</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<!-- <a role="listitem" class="mdc-list-item" href="tabs.html">
|
<a role="listitem" class="mdc-list-item" href="tabs.html">
|
||||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_tabs_24px.svg"></span>
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_tabs_24px.svg"></span>
|
||||||
<span class="mdc-list-item__text">
|
<span class="mdc-list-item__text">
|
||||||
Tabs
|
Tabs
|
||||||
<span class="mdc-list-item__secondary-text">Tabs with support for icon and text labels</span>
|
<span class="mdc-list-item__secondary-text">Tabs with support for icon and text labels</span>
|
||||||
</span>
|
</span>
|
||||||
</a> -->
|
</a>
|
||||||
<!-- <a role="listitem" class="mdc-list-item" href="textfield.html">
|
<!-- <a role="listitem" class="mdc-list-item" href="textfield.html">
|
||||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_text_field_24px.svg"></span>
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_text_field_24px.svg"></span>
|
||||||
<span class="mdc-list-item__text">
|
<span class="mdc-list-item__text">
|
||||||
@ -218,13 +218,13 @@ limitations under the License.
|
|||||||
<span class="mdc-list-item__secondary-text">Single and multiline text fields</span>
|
<span class="mdc-list-item__secondary-text">Single and multiline text fields</span>
|
||||||
</span>
|
</span>
|
||||||
</a> -->
|
</a> -->
|
||||||
<!-- <a role="listitem" class="mdc-list-item" href="top-app-bar.html">
|
<a role="listitem" class="mdc-list-item" href="top-app-bar.html">
|
||||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
||||||
<span class="mdc-list-item__text">
|
<span class="mdc-list-item__text">
|
||||||
Top App Bar
|
Top App Bar
|
||||||
<span class="mdc-list-item__secondary-text">Single and multiline text fields</span>
|
<span class="mdc-list-item__secondary-text">Single and multiline text fields</span>
|
||||||
</span>
|
</span>
|
||||||
</a> -->
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -5,12 +5,12 @@ A [Material Components](https://material.io/components/) icon implementation usi
|
|||||||
|
|
||||||
* The easiest way to try out mwc-checkbox is to use one of these online tools:
|
* The easiest way to try out mwc-checkbox is to use one of these online tools:
|
||||||
|
|
||||||
* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
|
* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-checkbox-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-checkbox-example?path=index.html)
|
||||||
|
|
||||||
* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
|
* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](https://jsbin.com/qobefic/edit?html,output),
|
||||||
[CodePen](https://codepen.io/azakus/pen/deZLja).
|
[CodePen](https://codepen.io/jcrestel/pen/KGWBLd).
|
||||||
|
|
||||||
* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
|
* You can also copy [this HTML file](https://gist.githubusercontent.com/JCrestel/9ed0acbd4d372a174b89cd6c58457636/raw/eadc711e5c4b89d9de3dea0d89e1d3797e0eaba3/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
|
||||||
|
|
||||||
* When you're ready to use mwc-checkbox in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
|
* When you're ready to use mwc-checkbox in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
|
||||||
|
|
||||||
|
@ -91,7 +91,6 @@ export class Checkbox extends FormElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
console.log('render', this.checked);
|
|
||||||
return html`
|
return html`
|
||||||
${this.renderStyle()}
|
${this.renderStyle()}
|
||||||
<div class="mdc-checkbox" @animationend="${this._animationEndHandler}" .ripple="${ripple()}">
|
<div class="mdc-checkbox" @animationend="${this._animationEndHandler}" .ripple="${ripple()}">
|
||||||
@ -113,13 +112,13 @@ export class Checkbox extends FormElement {
|
|||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _changeHandler = () => {
|
private _changeHandler() {
|
||||||
this.checked = this.formElement.checked;
|
this.checked = this.formElement.checked;
|
||||||
this.indeterminate = this.formElement.indeterminate;
|
this.indeterminate = this.formElement.indeterminate;
|
||||||
this.mdcFoundation.handleChange();
|
this.mdcFoundation.handleChange();
|
||||||
}
|
}
|
||||||
|
|
||||||
private _animationEndHandler = () => {
|
private _animationEndHandler() {
|
||||||
this.mdcFoundation.handleAnimationEnd();
|
this.mdcFoundation.handleAnimationEnd();
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -86,7 +86,9 @@ export class Drawer extends BaseElement {
|
|||||||
// TODO(sorvell): integrate focus trapping.
|
// TODO(sorvell): integrate focus trapping.
|
||||||
private _previousFocus: HTMLElement|null = null;
|
private _previousFocus: HTMLElement|null = null;
|
||||||
|
|
||||||
private _handleScrimClick = () => this.mdcFoundation.handleScrimClick();
|
private _handleScrimClick() {
|
||||||
|
this.mdcFoundation.handleScrimClick()
|
||||||
|
};
|
||||||
|
|
||||||
@observer(function(this: Drawer, value: boolean) {
|
@observer(function(this: Drawer, value: boolean) {
|
||||||
if (this.type === '') {
|
if (this.type === '') {
|
||||||
|
@ -102,11 +102,11 @@ export class Formfield extends BaseElement {
|
|||||||
return html`${this.renderStyle()}
|
return html`${this.renderStyle()}
|
||||||
<div class="mdc-form-field ${classMap({'mdc-form-field--align-end': this.alignEnd})}">
|
<div class="mdc-form-field ${classMap({'mdc-form-field--align-end': this.alignEnd})}">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<label class="mdc-label" @click="${this.labelClick}">${this.label}</label>
|
<label class="mdc-label" @click="${this._labelClick}">${this.label}</label>
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected labelClick = () => {
|
private _labelClick() {
|
||||||
const input = this.input;
|
const input = this.input;
|
||||||
if (input) {
|
if (input) {
|
||||||
input.focus();
|
input.focus();
|
||||||
|
@ -118,20 +118,20 @@ export class Radio extends FormElement {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
private _changeHandler = () => {
|
private _changeHandler() {
|
||||||
this.checked = this.formElement.checked;
|
this.checked = this.formElement.checked;
|
||||||
if (this._selectionController) {
|
if (this._selectionController) {
|
||||||
this._selectionController.update(this);
|
this._selectionController.update(this);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private _focusHandler = () => {
|
private _focusHandler() {
|
||||||
if (this._selectionController) {
|
if (this._selectionController) {
|
||||||
this._selectionController.focus(this);
|
this._selectionController.focus(this);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private _clickHandler = () => {
|
private _clickHandler() {
|
||||||
// Firefox has weird behavior with radios if they are not focused
|
// Firefox has weird behavior with radios if they are not focused
|
||||||
this.formElement.focus();
|
this.formElement.focus();
|
||||||
}
|
}
|
||||||
|
@ -62,7 +62,7 @@ export class Switch extends FormElement {
|
|||||||
|
|
||||||
protected mdcFoundation!: SwitchFoundation;
|
protected mdcFoundation!: SwitchFoundation;
|
||||||
|
|
||||||
private _changeHandler = (e: Event) => {
|
private _changeHandler(e: Event) {
|
||||||
this.mdcFoundation.handleChange(e);
|
this.mdcFoundation.handleChange(e);
|
||||||
// catch "click" event and sync properties
|
// catch "click" event and sync properties
|
||||||
this.checked = this.formElement.checked;
|
this.checked = this.formElement.checked;
|
||||||
|
@ -72,9 +72,13 @@ export class TabBar extends BaseElement {
|
|||||||
|
|
||||||
private _previousActiveIndex = -1;
|
private _previousActiveIndex = -1;
|
||||||
|
|
||||||
private _handleTabInteraction = (e) => this.mdcFoundation.handleTabInteraction(e);
|
private _handleTabInteraction(e: Event) {
|
||||||
|
this.mdcFoundation.handleTabInteraction(e);
|
||||||
|
}
|
||||||
|
|
||||||
private _handleKeydown = (e) => this.mdcFoundation.handleKeyDown(e);
|
private _handleKeydown(e: Event) {
|
||||||
|
this.mdcFoundation.handleKeyDown(e);
|
||||||
|
}
|
||||||
|
|
||||||
renderStyle() {
|
renderStyle() {
|
||||||
return style;
|
return style;
|
||||||
|
@ -14,7 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||||||
See the License for the specific language governing permissions and
|
See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
import {BaseElement, html, query, customElement, Adapter, Foundation} from '@material/mwc-base/base-element';
|
import {BaseElement, html, query, customElement, Adapter, Foundation, eventOptions} from '@material/mwc-base/base-element';
|
||||||
import MDCTabScrollerFoundation from '@material/tab-scroller/foundation.js';
|
import MDCTabScrollerFoundation from '@material/tab-scroller/foundation.js';
|
||||||
import * as util from '@material/tab-scroller/util.js';
|
import * as util from '@material/tab-scroller/util.js';
|
||||||
import {style} from './mwc-tab-scroller-css.js';
|
import {style} from './mwc-tab-scroller-css.js';
|
||||||
@ -54,11 +54,16 @@ export class TabScroller extends BaseElement {
|
|||||||
@query('.mdc-tab-scroller__scroll-content')
|
@query('.mdc-tab-scroller__scroll-content')
|
||||||
protected scrollContentElement!: HTMLElement;
|
protected scrollContentElement!: HTMLElement;
|
||||||
|
|
||||||
private _handleInteraction = (e) => this.mdcFoundation.handleInteraction(e);
|
@eventOptions({passive: true})
|
||||||
|
private _handleInteraction(e: Event) {
|
||||||
|
this.mdcFoundation.handleInteraction(e);
|
||||||
|
}
|
||||||
|
|
||||||
private _handleTransitionEnd = (e) => this.mdcFoundation.handleTransitionEnd(e);
|
private _handleTransitionEnd(e: Event) {
|
||||||
|
this.mdcFoundation.handleTransitionEnd(e);
|
||||||
|
}
|
||||||
|
|
||||||
private _srollbarHeight = -1;
|
private _scrollbarHeight = -1;
|
||||||
|
|
||||||
renderStyle() {
|
renderStyle() {
|
||||||
return style;
|
return style;
|
||||||
@ -69,6 +74,7 @@ export class TabScroller extends BaseElement {
|
|||||||
${this.renderStyle()}
|
${this.renderStyle()}
|
||||||
<div class="mdc-tab-scroller">
|
<div class="mdc-tab-scroller">
|
||||||
<div class="mdc-tab-scroller__scroll-area"
|
<div class="mdc-tab-scroller__scroll-area"
|
||||||
|
@wheel="${this._handleInteraction}"
|
||||||
@touchstart="${this._handleInteraction}"
|
@touchstart="${this._handleInteraction}"
|
||||||
@pointerdown="${this._handleInteraction}"
|
@pointerdown="${this._handleInteraction}"
|
||||||
@mousedown="${this._handleInteraction}"
|
@mousedown="${this._handleInteraction}"
|
||||||
@ -101,12 +107,12 @@ export class TabScroller extends BaseElement {
|
|||||||
computeScrollAreaClientRect: () => this.scrollAreaElement.getBoundingClientRect(),
|
computeScrollAreaClientRect: () => this.scrollAreaElement.getBoundingClientRect(),
|
||||||
computeScrollContentClientRect: () => this.scrollContentElement.getBoundingClientRect(),
|
computeScrollContentClientRect: () => this.scrollContentElement.getBoundingClientRect(),
|
||||||
computeHorizontalScrollbarHeight: () => {
|
computeHorizontalScrollbarHeight: () => {
|
||||||
if (this._srollbarHeight === -1) {
|
if (this._scrollbarHeight === -1) {
|
||||||
this.scrollAreaElement.style.overflowX = 'scroll';
|
this.scrollAreaElement.style.overflowX = 'scroll';
|
||||||
this._srollbarHeight = this.scrollAreaElement.offsetHeight - this.scrollAreaElement.clientHeight;;
|
this._scrollbarHeight = this.scrollAreaElement.offsetHeight - this.scrollAreaElement.clientHeight;;
|
||||||
this.scrollAreaElement.style.overflowX = '';
|
this.scrollAreaElement.style.overflowX = '';
|
||||||
}
|
}
|
||||||
return this._srollbarHeight;
|
return this._scrollbarHeight;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -90,7 +90,7 @@ export class Tab extends BaseElement {
|
|||||||
@query('.mdc-tab__content')
|
@query('.mdc-tab__content')
|
||||||
private _contentElement!: HTMLElement;
|
private _contentElement!: HTMLElement;
|
||||||
|
|
||||||
private _handleClick = (e) => {
|
private _handleClick(e: Event) {
|
||||||
this.mdcFoundation.handleClick(e);
|
this.mdcFoundation.handleClick(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user