JavaScript List
List with pagination
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/list/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/list/dist/style.min.css"/>
<div id='root' class="cards"></div>
<script>
function Component() {
const self = this;
self.rows = [
{ name:"bulbasaur", id: 1 },
{ name:"ivysaur", id: 2 },
{ name:"venusaur", id: 3 },
{ name:"charmander", id: 4 },
{ name:"charmeleon", id: 5 },
{ name:"charizard", id: 6 },
{ name:"squirtle", id: 7 },
{ name:"wartortle", id: 8 },
{ name:"blastoise", id: 9 },
{ name:"caterpie", id: 10 },
];
return render => render`<div>
<List :data="self.rows" :search="true" :pagination="5">
<div class="card">
<img src="https://lemonadejs.com/templates/default/img/pokemon/{{self.id}}.svg" style="width: 40px" />
<div>{{self.name}}</div>
</div>
</List>
</div>`;
}
// Render component
lemonade.render(Component, document.getElementById('root'));
</script>
</html>
List with Add and Delete
The next example implements two operations on the array of objects.
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/list/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/list/dist/style.min.css" />
<div id='root'></div>
<script>
// Create basic component
const Countries = function() {
const self = this;
self.countries = [
{ "name": "Australia" },
{ "name": "Austria" },
{ "name": "Chile" },
];
self.add = function() {
// Add the country
self.countries.push({ name: self.name.value });
// Refresh the array
self.refresh('countries');
}
self.delete = function(e, s) {
// Find and delete the position based on the self-given
self.countries.splice(self.countries.indexOf(s), 1);
// Refresh the array
self.refresh('countries');
}
return render => render`<div>
<List :data="self.countries" search="false">
<div class="p4">
<span style="width: 200px; display: inline-block">{{self.name}}</span>
<input type="button" onclick="self.delete" value="Delete" />
</div>
</List>
<div class="p4">
<input type="text" :ref="self.name" placeholder="Add new item" />
<input type="button" value="Add" onclick="self.add" />
</div>
</div>`;
}
lemonade.render(Countries, document.getElementById('root'));
</script>
</html>