@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
79 lines (77 loc) • 4.71 kB
HTML
<html>
<head>
<title>Using pb-select</title>
<link rel="stylesheet" href="demo.css">
<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>
<pb-demo-snippet>
<template>
<pb-page locales="../i18n/{{ns}}/{{lng}}.json" endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0">
<h2>Using pb-select with a standard HTML form</h2>
<form id="form" action="">
<p>Single item selection:</p>
<pb-select label="language" name="lang1" value="es">
<paper-item value="bg">Български</paper-item>
<paper-item value="cs">český</paper-item>
<paper-item value="de">Deutsch</paper-item>
<paper-item value="en">English</paper-item>
<paper-item value="es">Español</paper-item>
<paper-item value="el">ελληνικά</paper-item>
<paper-item value="fr">Français</paper-item>
<paper-item value="it">Italiano</paper-item>
<paper-item value="ka">ქართული</paper-item>
<paper-item value="nl">Nederlands</paper-item>
<paper-item value="no">Norsk</paper-item>
<paper-item value="pl">Polski</paper-item>
<paper-item value="pt">Português</paper-item>
<paper-item value="ro">Română</paper-item>
<paper-item value="ru">русский</paper-item>
<paper-item value="sl">Slovenščina</paper-item>
<paper-item value="sv">Svenska</paper-item>
<paper-item value="tr">Türkçe</paper-item>
<paper-item value="uk">Українська</paper-item>
</pb-select>
<p>with option "multi" as scrolling list</p>
<pb-select label="language" name="lang2" values='["fr", "de"]' multi style="height: 300px;">
<paper-item value="bg">Български</paper-item>
<paper-item value="cs">český</paper-item>
<paper-item value="de">Deutsch</paper-item>
<paper-item value="en">English</paper-item>
<paper-item value="es">Español</paper-item>
<paper-item value="el">ελληνικά</paper-item>
<paper-item value="fr">Français</paper-item>
<paper-item value="it">Italiano</paper-item>
<paper-item value="ka">ქართული</paper-item>
<paper-item value="nl">Nederlands</paper-item>
<paper-item value="no">Norsk</paper-item>
<paper-item value="pl">Polski</paper-item>
<paper-item value="pt">Português</paper-item>
<paper-item value="ro">Română</paper-item>
<paper-item value="ru">русский</paper-item>
<paper-item value="sl">Slovenščina</paper-item>
<paper-item value="sv">Svenska</paper-item>
<paper-item value="tr">Türkçe</paper-item>
<paper-item value="uk">Українська</paper-item>
</pb-select>
<button type="submit"><paper-button>Submit</paper-button></button>
</form>
<p>Parameters which would be sent: <code id="output"></code></p>
</pb-page>
<script>
const form = document.getElementById('form');
form.addEventListener('submit', (ev) => {
ev.preventDefault();
const data = new URLSearchParams(new FormData(form)).toString();
document.getElementById('output').innerHTML = data;
});
</script>
</template>
</pb-demo-snippet>
</body>
</html>