64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { LitElement, html, css, type TemplateResult } from 'lit';
|
|
import { customElement } from 'lit/decorators.js';
|
|
import { property } from 'lit/decorators/property.js';
|
|
|
|
@customElement('consentsoftware-tabs')
|
|
export class ConsentsoftwareTabs extends LitElement {
|
|
public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
|
|
|
|
public static styles = css`
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.tabs .tab {
|
|
text-align: center;
|
|
line-height: 3em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.selector {
|
|
position: absolute;
|
|
width: calc(100% / 3);
|
|
height: 1px;
|
|
left: 0;
|
|
bottom: 0px;
|
|
background: orange;
|
|
transition: all 0.2s;
|
|
}
|
|
`;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="tabs">
|
|
<div class="tab" @click=${this.handleClick}>Consent</div>
|
|
<div class="tab" @click=${this.handleClick}>Details</div>
|
|
<div class="tab" @click=${this.handleClick}>About Cookies</div>
|
|
</div>
|
|
<div class="selector"></div>
|
|
`;
|
|
}
|
|
|
|
public async handleClick(mouseEvent) {
|
|
const target = mouseEvent.target as HTMLElement;
|
|
const tab: HTMLDivElement = target.closest('.tab');
|
|
if (tab) {
|
|
const selector: HTMLDivElement = this.shadowRoot?.querySelector('.selector');
|
|
if (selector) {
|
|
selector.style.left = `${tab.offsetLeft}px`;
|
|
selector.style.width = `${tab.offsetWidth}px`;
|
|
}
|
|
}
|
|
}
|
|
} |