55 lines
1.0 KiB
JavaScript
55 lines
1.0 KiB
JavaScript
|
/**
|
||
|
|
@license
|
||
|
|
Copyright (c) 2023 trading_peter
|
||
|
|
This program is available under Apache License Version 2.0
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { closest } from '@tp/helpers';
|
||
|
|
import { LitElement, html, css } from 'lit-element';
|
||
|
|
|
||
|
|
class TpTabs extends LitElement {
|
||
|
|
static get properties() {
|
||
|
|
return {
|
||
|
|
orientation: { type: String, reflect: true }
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
static get styles() {
|
||
|
|
return css`
|
||
|
|
:host([orientation="vertical"]) .tabs {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.tabs {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
.tab {
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.orientation = 'horizontal';
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<div class="tabs" @click="${this.selectTab}">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
selectTab(e) {
|
||
|
|
const tab = closest(e.target, '.tab');
|
||
|
|
if (tab) {
|
||
|
|
this.dispatchEvent(new CustomEvent('tab-changed', { detail: tab }));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('tp-tabs', TpTabs);
|