shoelace/src/components/tab-panel/tab-panel.ts

54 wiersze
1.1 KiB
TypeScript
Czysty Zwykły widok Historia

import { LitElement, html, unsafeCSS } from 'lit';
2021-05-27 21:00:43 +00:00
import { customElement, property } from 'lit/decorators.js';
2021-02-26 14:09:13 +00:00
import styles from 'sass:./tab-panel.scss';
let id = 0;
/**
* @since 2.0
* @status stable
*
* @slot default The tab panel's content.
2021-02-26 14:09:13 +00:00
*
* @csspart base The component's base wrapper.
2021-02-26 14:09:13 +00:00
*/
2021-03-18 13:04:23 +00:00
@customElement('sl-tab-panel')
2021-03-09 00:14:32 +00:00
export default class SlTabPanel extends LitElement {
2021-03-06 17:01:39 +00:00
static styles = unsafeCSS(styles);
2021-02-26 14:09:13 +00:00
private componentId = `tab-panel-${++id}`;
/** The tab panel's name. */
2021-03-06 17:01:39 +00:00
@property() name = '';
2021-02-26 14:09:13 +00:00
/** When true, the tab panel will be shown. */
2021-03-06 17:01:39 +00:00
@property({ type: Boolean, reflect: true }) active = false;
2021-02-26 14:09:13 +00:00
2021-06-02 12:47:55 +00:00
connectedCallback() {
super.connectedCallback();
2021-02-26 14:09:13 +00:00
this.id = this.id || this.componentId;
}
render() {
this.style.display = this.active ? 'block' : 'none';
return html`
<div
part="base"
class="tab-panel"
role="tabpanel"
aria-selected=${this.active ? 'true' : 'false'}
aria-hidden=${this.active ? 'false' : 'true'}
>
2021-03-06 17:01:39 +00:00
<slot></slot>
2021-02-26 14:09:13 +00:00
</div>
`;
}
}
2021-03-12 14:09:08 +00:00
declare global {
interface HTMLElementTagNameMap {
'sl-tab-panel': SlTabPanel;
}
}