Added placeholder support to editable-label. Implemented a chip list with chips and search/edit functionality. Added a simple popper class to help with pop overs.
This commit is contained in:
49
chip.js
Normal file
49
chip.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import { IgniteElement } from "../ignite-html/ignite-element.js";
|
||||
import { IgniteTemplate, slot, button } from "../ignite-html/ignite-template.js";
|
||||
|
||||
class Chip extends IgniteElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
get properties() {
|
||||
return {
|
||||
onDelete: () => { }
|
||||
}
|
||||
}
|
||||
|
||||
get styles() {
|
||||
return `
|
||||
mt-chip {
|
||||
border-radius: 1em;
|
||||
background-color: #e0e0e0;
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 0.3em;
|
||||
padding-left: 0.6em;
|
||||
padding-right: 0.6em;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.template.child(
|
||||
new slot(this),
|
||||
new button()
|
||||
.class("btn ml-1 p-0")
|
||||
.child(`<i class="fad fa-times-circle"></i>`)
|
||||
.onClick(() => this.onDelete())
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ChipTemplate extends IgniteTemplate {
|
||||
constructor(...children) {
|
||||
super("mt-chip", children);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("mt-chip", Chip);
|
||||
|
||||
export {
|
||||
ChipTemplate as Chip
|
||||
}
|
||||
Reference in New Issue
Block a user