41 lines
769 B
JavaScript
41 lines
769 B
JavaScript
|
import { LitElement, css, html } from 'lit'
|
||
|
|
|
||
|
|
class HorizontalScroller extends LitElement {
|
||
|
|
static properties = {}
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super()
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<div class="scroller">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
static styles = css`
|
||
|
|
:host {
|
||
|
|
--col-width: 10em;
|
||
|
|
--gap: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroller {
|
||
|
|
display: grid;
|
||
|
|
gap: var(--gap);
|
||
|
|
grid-auto-flow: column;
|
||
|
|
grid-auto-columns: var(--col-width);
|
||
|
|
width: calc(100vw - 1em);
|
||
|
|
overflow: auto;
|
||
|
|
scroll-behaviour: smooth;
|
||
|
|
scroll-padding-inline: 0.5em;
|
||
|
|
padding-inline-start: 0.5em;
|
||
|
|
padding-inline-end: 0.5em;
|
||
|
|
padding-block-end: 0.75em;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('mm-hscroller', HorizontalScroller)
|