@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
39 lines (37 loc) • 1.7 kB
HTML
<html>
<head>
<title>Using pb-select</title>
<style>
pb-autocomplete {
margin-bottom: 20px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
</head>
<body>
<h1>Using pb-select with a remote data source</h1>
<pb-demo-snippet>
<template>
<p>Reads the items to be shown from a JSON file:</p>
<pb-page locales="../i18n/{{ns}}/{{lng}}.json" endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0">
<iron-form id="form">
<form id="form" action="">
<pb-select label="language" name="lang" value="pl" source="./select.json">
</pb-select>
<button type="submit"><paper-button>Submit</paper-button></button>
</form>
</iron-form>
<p>Parameters which would be sent: <code id="output"></code></p>
</pb-page>
<script>
const form = document.getElementById('form');
form.addEventListener('iron-form-submit', (ev) => {
ev.preventDefault();
const data = JSON.stringify(form.serializeForm());
document.getElementById('output').innerHTML = data;
});
</script>
</template>
</pb-demo-snippet>
</body>
</html>