jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 12:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve chips (#5070)

Browse Source 
Follow mdc specs
This commit is contained in:
Bram Kragten 2020-03-05 12:59:32 +01:00 committed by GitHub
parent 8abbc71e91
commit b17ea09b8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/ha-chips.ts
View File

@ -8,7 +8,7 @@ import {
customElement, customElement,
unsafeCSS, unsafeCSS,
} from "lit-element"; } from "lit-element";
import { ripple } from "@material/mwc-ripple/ripple-directive";
// @ts-ignore // @ts-ignore
import chipStyles from "@material/chips/dist/mdc.chips.min.css"; import chipStyles from "@material/chips/dist/mdc.chips.min.css";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
@ -33,22 +33,27 @@ export class HaChips extends LitElement {
${this.items.map( ${this.items.map(
(item, idx) => (item, idx) =>
html` html`
<button <div class="mdc-chip" .index=${idx} @click=${this._handleClick}>
class="mdc-chip" <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
.index=${idx} <span role="gridcell">
@click=${this._handleClick} <span
> role="button"
<span class="mdc-chip__text">${item}</span> tabindex="0"
</button> class="mdc-chip__primary-action"
>
<span class="mdc-chip__text">${item}</span>
</span>
</span>
</div>
` `
)} )}
</div> </div>
`; `;
} }
private _handleClick(ev) { private _handleClick(ev): void {
fireEvent(this, "chip-clicked", { fireEvent(this, "chip-clicked", {
index: ev.target.closest("button").index, index: ev.currentTarget.index,
}); });
} }

2
src/components/ha-fab.ts
View File

@ -1,6 +1,6 @@
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
import { html, customElement } from "lit-element"; import { html, customElement } from "lit-element";
import { ripple } from "@material/mwc-ripple/ripple-directive.js"; import { ripple } from "@material/mwc-ripple/ripple-directive";
import "@material/mwc-fab"; import "@material/mwc-fab";
import { Constructor } from "../types"; import { Constructor } from "../types";