Skip to content

zzzgit/lit-infinite-loading

Repository files navigation

lit-infinite-loading

Infinite loading component for lit-element.

installation

via npm:

npm i lit-infinite-loading

how to load

<!-- From CDN -->
<script async type="module" src="https://unpkg.com/lit-infinite-loading"></script>

<!-- From local installation -->
<script async type="module" src="/node_modules/lit-infinite-loading"></script>

<!-- In a Module -->
<script type="module">
  import '/node_modules/lit-infinite-loading'
  // ...
</script>

usage

render:

`<lit-infinite-loading class="infinite-loading" ?disabled=${false} direction="toup" @finite=${this.finite_cb}>
	${
		this.list_arr.map((item, index) => {
			return html`<div>${item}</div>`
		})
	}
</lit-infinite-loading>`

callback:

finite_cb(e) {
    const feedback = e.detail.feedback
    this.list_arr.unshift(1, 2, 3)
    return this.requestUpdate().then(() => {
        return feedback.success()
    })
}

css:

.infinite-loading{
	width: 200px;
	height: 200px;
	overflow-y: auto;
}

setting:

<lit-infinite-loading> exposes a set of custom properties for your customizing delight:

Property Purpose Default
--disabled to disable the functionality false
--direction trigger the loading behavior from bottom to up or in opposite? 'todown' adn 'toup' are applicable todown

event and feedback

There will be only one event finite which may be triggered after the scoll bar has been scrolled. You can acquire the feedback object via e.detail.feedback in the event listener. And then there are several methods of the feedback object:

method description
success notify the loading process has been successful
complete notify the loading process has completely been ended
fail notify the loading process has been failed

slot

There are several slots you can use.

slot description
default content or children of this component
state-nomore indicate no more content can be loaded
state-noresult indicate no content can be loaded at all
state-error failed in loading
state-loading indicate loading state
state-idle indicate idle state
All the named slots will show their fallbacks if not been sloted.

browser compatibility

IE is not supported, please only use it in modern browsers.

About

a infinite loading web component

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published