@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
138 lines (134 loc) • 8.61 kB
HTML
<html>
<head>
<title>Using pb-multi-select</title>
<link rel="stylesheet" href="demo.css">
<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" locale-fallback-ns="app custom" endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0"
require-language="">
<pb-lang label="language" selected="en">
<paper-item value="bg">Български</paper-item>
<paper-item value="cs">český</paper-item>
<paper-item value="zh_CN">简体中文</paper-item>
<paper-item value="zh_TW">繁體中文</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-lang>
<h2>Using pb-combo-box with a standard HTML form</h2>
<form id="form" action="">
<fieldset>
<p>Select single option from a remote data source</p>
<pb-combo-box source="select.json" close-after-select preload
placeholder="demo.select-lang">
<select name="lang">
</select>
</pb-combo-box>
</fieldset>
<fieldset>
<p>Select options from a remote data source</p>
<pb-combo-box source="select.json" placeholder="demo.select-lang" close-after-select preload>
<input name="lang"></input>
</pb-combo-box>
</fieldset>
<fieldset>
<p>Select from a fixed set of options:</p>
<pb-combo-box placeholder="demo.select-state">
<select name="state" multiple>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" selected>California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY" selected>Wyoming</option>
</select>
</pb-combo-box>
</fieldset>
<fieldset>
<p>Use i18n to translate options:</p>
<pb-combo-box placeholder="demo.select-animal">
<select name="anmial" multiple>
<option value="bird" data-i18n="demo.bird"></option>
<option value="dog" data-i18n="demo.dog"></option>
<option value="cat" data-i18n="demo.cat"></option>
</select>
</pb-combo-box>
</fieldset>
<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>