skinny-widgets
Version:
skinnable web components widgets collection
173 lines (154 loc) • 5.81 kB
HTML
<head>
<link rel="shortcut icon" href="#" />
</head>
<body>
<script defer src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
<script type="importmap-shim">
{
"imports": {
"dateutils": "/node_modules/dateutils/src/global.js",
"dateutils/": "/node_modules/dateutils/"
}
}
</script>
<sk-config
styles='{"antd.css": "/src/theme/antd/antd.min.css", "jquery-ui.css": "/src/theme/jquery/jquery-ui.css", "jquery-theme.css": "/src/theme/jquery/jquery-theme.css", "theme.css": "/src/theme/jquery/theme.css", "default.css": "/src/theme/default/default.css"}'
theme="jquery"
base-path="/src"
lang="ru"
id="myConfig"
></sk-config>
<sk-alert closable type="error">Alarm ! Alarm !</sk-alert>
<sk-checkbox id="myCheckbox"></sk-checkbox>
<sk-button id="myButton" button-type="primary">
<span slot="label">Show Dialog</span>
</sk-button>
<br />
<br />
<sk-datepicker theme="antd" min="2018-12-01" id="myDatePicker" value="12/25/2019">Input Label</sk-datepicker>
<sk-tabs id="tabs">
<sk-tab title="foo">
some foo tab contents
</sk-tab>
<sk-tab title="bar">
some bar tab contents
</sk-tab>
<sk-tab title="baz">
some baz tab contents
</sk-tab>
</sk-tabs>
<sk-select id="mySelect">
<option value="default">default</option>
<option value="antd">antd</option>
<option value="jquery">jquery</option>
</sk-select>
<sk-spinner id="mySpinner"></sk-spinner>
<sk-input id="myInput1" placeholder="This is the placeholder">
Input Label
</sk-input>
<sk-button id="toggleButton" button-type="primary">
<span slot="label">Toggle</span>
</sk-button>
<sk-form action="/submit" method="POST" id="myForm">
<span slot="fields">
<sk-input name="firstName" id="formInput1">
<span slot="label">First Name</span>
</sk-input>
<sk-input name="secondName" id="formInput2">
<span slot="label">Second Name</span>
</sk-input>
<sk-input name="info" id="formInput3">
<span slot="label">Info</span>
</sk-input>
<sk-checkbox name="isSingle" id="formCheckbox"><span slot="label">Single</span></sk-checkbox>
<sk-select name="gender" id="formSelect">
<option value="male">Male</option>
<option value="female">Female</option>
</sk-select>
<textarea name="address"></textarea>
<sk-button id="formButton" type="submit" button-type="primary">
<span slot="label">Submit</span>
</sk-button>
</span>
</sk-form>
<sk-switch id="mySwitch"></sk-switch>
<script type="module-shim">
import { SkCheckbox } from '/src/sk-checkbox.js';
import { SkButton } from '/src/sk-button.js';
import { SkDatePicker } from '/src/sk-datepicker.js';
import { SkDialog } from '/src/sk-dialog.js';
import { SkConfig } from '/src/sk-config.js';
import { SkTabs } from '/src/sk-tabs.js';
import { SkSelect } from '/src/sk-select.js';
import { SkSpinner } from '/src/sk-spinner.js';
import { SkInput } from '/src/sk-input.js';
import { SkForm } from '/src/sk-form.js';
import { SkAlert } from '/src/sk-alert.js';
import { SkSwitch } from '/src/sk-switch.js';
customElements.define('sk-config', SkConfig);
customElements.define('sk-checkbox', SkCheckbox);
customElements.define('sk-button', SkButton);
customElements.define('sk-datepicker', SkDatePicker);
customElements.define('sk-dialog', SkDialog);
customElements.define('sk-tabs', SkTabs);
customElements.define('sk-select', SkSelect);
customElements.define('sk-spinner', SkSpinner);
customElements.define('sk-input', SkInput);
customElements.define('sk-form', SkForm);
customElements.define('sk-alert', SkAlert);
customElements.define('sk-switch', SkSwitch);
myButton.addEventListener('click', (event) => {
myDialog.open();
myInput1.setAttribute('value', '111');
});
myDialog.onconfirm = function (event) {
console.log('confirmed');
this.close();
};
myDialog.oncancel = function (event) {
console.log('cancelled');
this.close();
};
mySelect.value = myConfig.getAttribute('theme');
mySelect.addEventListener('change', (event) => {
myConfig.setAttribute('theme', event.target.value);
}, false);
toggleButton.addEventListener('click', (event) => {
if (tabs.getAttribute('disabled')) {
tabs.removeAttribute('disabled');
} else {
tabs.setAttribute('disabled', 'disabled');
}
});
myForm.addEventListener('formsubmitsuccess', (event) => {
console.log('form submit success handled', event);
});
myForm.addEventListener('formsubmiterror', (event) => {
console.log('form submit error handled', event);
});
myForm.addEventListener('formvalid', (event) => {
console.log('form valid handled', event);
});
myForm.addEventListener('forminvalid', (event) => {
console.log('form invalid handled', event);
});
</script>
<sk-dialog id="myDialog" title="Some Title" type="confirm">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved,
resized and closed with the 'x' icon.</p>
</sk-dialog>
<datalist id="myDataList">
<option>Banana</option>
<option>Cherry</option>
<option>Apple</option>
<option>Strawberry</option>
<option>Lemon</option>
<option>Orange</option>
</datalist>
<sk-select id="multiSelect" multiple value-type="native">
<option value="apples">apples</option>
<option value="oranges">bananas</option>
<option value="berries">berries</option>
<option value="potatos">potatos</option>
</sk-select>
</body>