57 lines
1.6 KiB
Plaintext
57 lines
1.6 KiB
Plaintext
|
<template>
|
||
|
|
<div class="page">
|
||
|
|
<div class="navbar">
|
||
|
|
<div class="navbar-bg"></div>
|
||
|
|
<div class="navbar-inner">
|
||
|
|
<div class="title">${title}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="page-content">
|
||
|
|
<a class="button" @click=${openAlert}>Open Alert</a>
|
||
|
|
<a class="button" @click=${printSomething}>Print Something</a>
|
||
|
|
<div class="list simple-list">
|
||
|
|
<ul>
|
||
|
|
${names.map((name) => $h`
|
||
|
|
<li>${name}</li>
|
||
|
|
`)}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<!-- component styles -->
|
||
|
|
<style>
|
||
|
|
.red-link {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<!-- rest of component logic -->
|
||
|
|
<script>
|
||
|
|
// script must return/export component function
|
||
|
|
export default (props, { $f7, $on }) => {
|
||
|
|
const title = 'Component Page';
|
||
|
|
const names = ['John', 'Vladimir', 'Timo'];
|
||
|
|
|
||
|
|
const openAlert = () => {
|
||
|
|
$f7.dialog.alert('Hello world!\nblah blah blah');
|
||
|
|
}
|
||
|
|
|
||
|
|
async function printSomething() {
|
||
|
|
// Print some text to the receipt printer
|
||
|
|
var printer = await global.apis.print.getReceiptPrinter();
|
||
|
|
printer.addFieldBlock('Hello world!\nblah blah blah\n\n', "C");
|
||
|
|
global.apis.print.printReceiptData(await printer.getData());
|
||
|
|
}
|
||
|
|
|
||
|
|
$on('pageInit', () => {
|
||
|
|
// do something on page init
|
||
|
|
});
|
||
|
|
$on('pageAfterOut', () => {
|
||
|
|
// page has left the view
|
||
|
|
});
|
||
|
|
|
||
|
|
// component function must return render function
|
||
|
|
return $render;
|
||
|
|
}
|
||
|
|
</script>
|