kopia lustrzana https://github.com/shoelace-style/shoelace
49 wiersze
1.2 KiB
Handlebars
49 wiersze
1.2 KiB
Handlebars
import { html } from 'lit';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
import ShoelaceElement from '../../internal/shoelace-element';
|
|
import { watch } from '../../internal/watch';
|
|
import { LocalizeController } from '../../utilities/localize';
|
|
import styles from './{{ tagWithoutPrefix tag }}.styles';
|
|
import type { CSSResultGroup } from 'lit';
|
|
|
|
/**
|
|
* @since 2.0
|
|
* @status experimental
|
|
*
|
|
* @dependency sl-example
|
|
*
|
|
* @event sl-event-name - Emitted as an example.
|
|
*
|
|
* @slot - The default slot.
|
|
* @slot example - An example slot.
|
|
*
|
|
* @csspart base - The component's internal wrapper.
|
|
*
|
|
* @cssproperty --example - An example CSS custom property.
|
|
*/
|
|
@customElement('{{ tag }}')
|
|
export default class {{ properCase tag }} extends ShoelaceElement {
|
|
static styles: CSSResultGroup = styles;
|
|
|
|
private readonly localize = new LocalizeController(this);
|
|
|
|
/** An example property. */
|
|
@property() prop = 'example';
|
|
|
|
@watch('someProp')
|
|
doSomething() {
|
|
// Example event
|
|
this.emit('sl-event-name');
|
|
}
|
|
|
|
render() {
|
|
return html` <slot></slot> `;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'{{ tag }}': {{ properCase tag }};
|
|
}
|
|
}
|