mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
FAB in TypeScript
This commit is contained in:
Steven Orvell
parent
d0b6d31fb0
commit
3a4ef18349
@ -14,7 +14,7 @@
|
||||
"lint": "npm-run-all --parallel lint:*",
|
||||
"test": "karma start --single-run",
|
||||
"bootstrap": "npm install && ./scripts/bootstrap.sh",
|
||||
"build": "npm run build-styling && tsc -b packages/base packages/switch packages/ripple packages/button",
|
||||
"build": "npm run build-styling && tsc -b packages/base packages/switch packages/ripple packages/button packages/fab",
|
||||
"build-styling": "./scripts/build-styling.sh",
|
||||
"update-gh-pages": "npm run bootstrap && ./scripts/publish-demos.sh"
|
||||
},
|
||||
|
||||
@ -14,12 +14,13 @@ 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 {LitElement, html, property} from '@polymer/lit-element/lit-element.js';
|
||||
import {LitElement, html, property, customElement} from '@polymer/lit-element/lit-element.js';
|
||||
import {classMap} from 'lit-html/directives/classMap.js';
|
||||
import {style} from './mwc-button-css';
|
||||
import {ripple} from '@material/mwc-ripple/ripple-directive.js';
|
||||
import '@material/mwc-icon/mwc-icon-font.js';
|
||||
|
||||
@customElement('mwc-button' as any)
|
||||
export class Button extends LitElement {
|
||||
|
||||
@property({type: Boolean})
|
||||
@ -69,4 +70,8 @@ export class Button extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-button', Button);
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mwc-button': Button;
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
/**
|
||||
@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.
|
||||
*/
|
||||
import {html} from '@polymer/lit-element/lit-element.js';
|
||||
|
||||
export const style = html`<style>.material-icons{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface--test-edge-var-bug{--mdc-ripple-surface-test-edge-var: 1px solid #000;visibility:hidden}.mdc-ripple-surface--test-edge-var-bug::before{border:var(--mdc-ripple-surface-test-edge-var)}.mdc-fab{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:transparent;will-change:transform, opacity;box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);display:inline-flex;position:relative;justify-content:center;box-sizing:border-box;width:56px;height:56px;padding:0;transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),opacity 15ms linear 30ms,transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);border:none;border-radius:50%;fill:currentColor;cursor:pointer;user-select:none;-moz-appearance:none;-webkit-appearance:none;overflow:hidden;background-color:#018786;color:#fff;color:var(--mdc-theme-on-secondary, #fff)}.mdc-fab::before,.mdc-fab::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-fab::before{transition:opacity 15ms linear;z-index:1}.mdc-fab.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-fab.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-fab.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-fab.mdc-ripple-upgraded--foreground-activation::after{animation:225ms mdc-ripple-fg-radius-in forwards,75ms mdc-ripple-fg-opacity-in forwards}.mdc-fab.mdc-ripple-upgraded--foreground-deactivation::after{animation:150ms mdc-ripple-fg-opacity-out;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-fab::before,.mdc-fab::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-fab.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-fab::-moz-focus-inner{padding:0;border:0}.mdc-fab:hover,.mdc-fab:focus{box-shadow:0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)}.mdc-fab:active{box-shadow:0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)}.mdc-fab:active,.mdc-fab:focus{outline:none}.mdc-fab:hover{cursor:pointer}.mdc-fab>svg{width:100%}@supports not (-ms-ime-align: auto){.mdc-fab{background-color:var(--mdc-theme-secondary, #018786)}}.mdc-fab .mdc-fab__icon{width:24px;height:24px;font-size:24px}.mdc-fab::before,.mdc-fab::after{background-color:#fff}@supports not (-ms-ime-align: auto){.mdc-fab::before,.mdc-fab::after{background-color:var(--mdc-theme-on-secondary, #fff)}}.mdc-fab:hover::before{opacity:.08}.mdc-fab:not(.mdc-ripple-upgraded):focus::before,.mdc-fab.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-fab:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-fab:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.32}.mdc-fab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: .32}.mdc-fab--mini{width:40px;height:40px}.mdc-fab__icon{margin:auto;transition:transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);fill:currentColor;will-change:transform}.mdc-fab--exited{transform:scale(0);transition:opacity 15ms linear 150ms,transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);opacity:0}.mdc-fab--exited .mdc-fab__icon{transform:scale(0);transition:transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1)}:host{outline:none}
|
||||
</style>`;
|
||||
@ -1,69 +0,0 @@
|
||||
/**
|
||||
@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.
|
||||
*/
|
||||
import {LitElement, html} from '@polymer/lit-element/lit-element.js';
|
||||
import {classMap} from 'lit-html/directives/classMap.js';
|
||||
import {style} from './mwc-fab-css.js';
|
||||
import {MDCWCRipple} from '@material/mwc-ripple/mwc-ripple.js';
|
||||
import {afterNextRender} from '@material/mwc-base/utils.js';
|
||||
import '@material/mwc-icon/mwc-icon-font.js';
|
||||
|
||||
export class Fab extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
mini: {type: Boolean},
|
||||
exited: {type: Boolean},
|
||||
disabled: {type: Boolean},
|
||||
icon: {type: String},
|
||||
label: {type: String},
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.icon = '';
|
||||
this.mini = false;
|
||||
this.exited = false;
|
||||
this.label = '';
|
||||
}
|
||||
|
||||
createRenderRoot() {
|
||||
return this.attachShadow({mode: 'open', delegatesFocus: true});
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this._ripple = new MDCWCRipple(this.shadowRoot.querySelector('.mdc-fab'));
|
||||
}
|
||||
|
||||
renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {icon, mini, exited, disabled, label} = this;
|
||||
const hostClassInfo = {
|
||||
'mdc-fab--mini': mini,
|
||||
'mdc-fab--exited': exited,
|
||||
};
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<button class="mdc-fab ${classMap(hostClassInfo)}" ?disabled="${disabled}" aria-label="${label || icon}">
|
||||
${icon ? html`<span class="material-icons mdc-fab__icon">${icon}</span>` : ''}
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-fab', Fab);
|
||||
81
packages/fab/src/mwc-fab.ts
Normal file
81
packages/fab/src/mwc-fab.ts
Normal file
@ -0,0 +1,81 @@
|
||||
/**
|
||||
@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.
|
||||
*/
|
||||
import {LitElement, html, property, customElement} from '@polymer/lit-element/lit-element.js';
|
||||
import {classMap} from 'lit-html/directives/classMap.js';
|
||||
import {style} from './mwc-fab-css';
|
||||
import {ripple} from '@material/mwc-ripple/ripple-directive.js';
|
||||
import '@material/mwc-icon/mwc-icon-font.js';
|
||||
|
||||
@customElement('mwc-fab' as any)
|
||||
export class Fab extends LitElement {
|
||||
|
||||
@property({type: Boolean})
|
||||
mini = false;
|
||||
|
||||
@property({type: Boolean})
|
||||
exited = false;
|
||||
|
||||
@property({type: Boolean})
|
||||
disabled = false;
|
||||
|
||||
@property({type: Boolean})
|
||||
extended = false;
|
||||
|
||||
@property({type: Boolean})
|
||||
showIconAtEnd = false;
|
||||
|
||||
@property()
|
||||
icon = '';
|
||||
|
||||
@property()
|
||||
label = '';
|
||||
|
||||
|
||||
createRenderRoot() {
|
||||
return this.attachShadow({mode: 'open', delegatesFocus: true});
|
||||
}
|
||||
|
||||
renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render() {
|
||||
const classes = {
|
||||
'mdc-fab--mini': this.mini,
|
||||
'mdc-fab--exited': this.exited,
|
||||
'mdc-fab--extended': this.extended,
|
||||
};
|
||||
const showLabel = this.label !== '' && this.extended;
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<button
|
||||
.ripple="${ripple()}"
|
||||
class="mdc-fab ${classMap(classes)}"
|
||||
?disabled="${this.disabled}"
|
||||
aria-label="${this.label || this.icon}">
|
||||
${showLabel && this.showIconAtEnd ? this.label : ''}
|
||||
${this.icon ? html`<span class="material-icons mdc-fab__icon">${this.icon}</span>` : ''}
|
||||
${showLabel && !this.showIconAtEnd ? this.label : ''}
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mwc-fab': Fab;
|
||||
}
|
||||
}
|
||||
10
packages/fab/tsconfig.json
Normal file
10
packages/fab/tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"outDir": "."
|
||||
},
|
||||
"include": [
|
||||
"src/*.ts"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user