list

$mol_list

Online demo

The list of rows with lazy/virtual rendering support based on minimal_height of rows.

$mol_list should contain only components that inherits $mol_view. You should not place raw strings or numbers in list.

Usage example

Static list:

<= Users $mol_list
	rows /
		<= User_1 $mol_view
		<= User_2 $mol_view
		<= User_3 $mol_view
	Empty <= Users_empty $mol_paragraph
		title \No users

Dynamic list:

<= Items $mol_list
	rows <= list_items /$mol_view

Item* $mol_link
	title <= item_title* \

list_items /$mol_view explain - typed list of items

or similar form with Item under list_items

<= Items $mol_list
	rows <= list_items /
		<= Item*0 $mol_link
			title <= item_title* \

Item*0 explain

Override list_items in view.ts file:

@ $mol_mem_key
override item_title( id : string ) {
	return `Item#${ id }`
}

override list_items() {
	return this.list_items_ids().map( id => {
		return this.Item( id )
	} )
}

list_items_ids() { // declare your logic
	return [1,2,3]
}

Properties

rows() : []

Returns list of rows.

Empty(): $mol_view

Returns empty list placeholder.