65 lines
1.3 KiB
TypeScript
65 lines
1.3 KiB
TypeScript
/**
|
|
* Styled <dl>, <dt> and <dd> for displaying data
|
|
* as a list of key-value pair.
|
|
*
|
|
* Usage example:
|
|
* ```ts
|
|
* <btrix-desc-list>
|
|
* <btrix-desc-list-item label="Color">
|
|
* Red
|
|
* </btrix-desc-list-item>
|
|
* <btrix-desc-list-item label="Size">
|
|
* Large
|
|
* </btrix-desc-list-item>
|
|
* </btrix-desc-list>
|
|
* ```
|
|
*/
|
|
import { LitElement, html, css } from "lit";
|
|
import { property } from "lit/decorators.js";
|
|
|
|
export class DescListItem extends LitElement {
|
|
static styles = css`
|
|
dt {
|
|
color: var(--sl-color-neutral-500);
|
|
font-size: var(--sl-font-size-x-small);
|
|
line-height: 1rem;
|
|
margin: var(--sl-spacing-3x-small) 0;
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--sl-color-neutral-700);
|
|
font-size: var(--sl-font-size-medium);
|
|
font-family: var(--font-monostyle-family);
|
|
font-variation-settings: var(--font-monostyle-variation);
|
|
line-height: 1rem;
|
|
}
|
|
`;
|
|
|
|
@property({ type: String })
|
|
label: string = "";
|
|
|
|
render() {
|
|
return html`<div>
|
|
<dt>${this.label}</dt>
|
|
<dd><slot></slot></dd>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
export class DescList extends LitElement {
|
|
static styles = css`
|
|
dl {
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-gap: 1rem;
|
|
margin: 0;
|
|
}
|
|
`;
|
|
|
|
render() {
|
|
return html`<dl><slot></slot></dl>`;
|
|
}
|
|
}
|