@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
55 lines (47 loc) • 2.42 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>
<h1>Use pb-select with i18n and iron-form</h1>
<p>This demo checks if option and selection labels are properly translated.</p>
<pb-demo-snippet>
<template>
<pb-page language="fr">
<pb-lang label="language" selected="en">
<paper-item value="tr">Türkçe</paper-item>
<paper-item value="en">English</paper-item>
<paper-item value="fr">Français</paper-item>
<paper-item value="sl">Slovenščina</paper-item>
</pb-lang>
<iron-form id="form">
<form action="">
<pb-select name="format" value="latex" multi>
<paper-item value="latex"><pb-i18n key="menu.download.pdf-latex">untranslated</pb-i18n></paper-item>
<paper-item value="fo"><pb-i18n key="menu.download.pdf-fo">untranslated</pb-i18n></paper-item>
<paper-item value="epub"><pb-i18n key="menu.download.epub-download">untranslated</pb-i18n></paper-item>
</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>