Scrolllist

Scrolllist displays a list of options with the ability to automatically load new options based on the scroll position. It shows a skeleton placeholder while loading new items.

An option in the context of Scrollist is an object with the following properties:

id: string or number
label: string
badge: string (optional)

The dealogicData['countries'] array used in the example is a global variable with a list of country objects, each with the following properties:

label: country name
sup: country code
sub: capital city
group: continent name

Attributes

attribute:	type:	required?	default:	description:
rpp	number	no		If set, the 'loading' state whill be shown for this amount of items while loading new items
renderOffset	number	no	`6`	How many 'hidden' items should the component render?

Methods

setCallback(callback)

Set the callback function that's called whenever the scroll threshold is reached.

param:	type:	default:	description:
callback	function		A function that can returns either an Array of option objects or a Promise that resolves with an Array of option objects. The function receives a single parameter: the page-number of the resultset (0-indexed)

Events

selected

Triggered whenever an option is selected.

Examples

<dl-scrolllist style="width: 240px; height: 450px; border: 1px solid #dfdfe0;" rpp="20" total-item-count="100"></dl-scrolllist>
<p><output></output></p>

var elInput = document.querySelector('dl-scrolllist')
var elOutput = document.querySelector('output')
var id = 1

var countryList = function() {
  var result = []
  var countries = dealogicData['countries']
  var countryCount = countries.length

  for (var i=0; i<20; i++) {
    var index = Math.floor(Math.random() * countryCount)
    var badge = false
    let x = Math.random() * 100
    if (x > 80) {
      badge = Math.ceil(x)
    }

    result.push({
      id: id++,
      label: countries[index]['label'],
      badge: badge,
    })
  }

  return result
}

var promiseCountryList = function(query) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve(countryList())
    }, 2000)
  })
}

elInput.addEventListener('ready', function() {
    elInput.setCallback(promiseCountryList)
})

elInput.addEventListener('selected', function(event) {
    elOutput.value = event.detail.label
})

Dealogic Styleguide