skinny-widgets
Version:
skinnable web components widgets collection
155 lines (136 loc) • 5.03 kB
HTML
<body>
<script src="/compat/dialog-polyfill.js"></script>
<script src="/compat/fetch.umd.js"></script>
<script src="/compat/polyfill.min.js"></script>
<script src="/compat/webcomponents-lite.js"></script>
<script src="/compat/custom-elements-es5-adapter.js"></script>
<script src="/compat/event-target.js"></script>
<sk-config
theme="antd"
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" id="myDatePicker" value="12/25/2019"></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" list="myDataList" placeholder="This is the placeholder">
<span slot="label">Input Label</span>
</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 src="/dist/skinny-widgets-bundle.js"></script>
<script>
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', function(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', function(event) {
myConfig.setAttribute('theme', event.target.value);
}, false);
toggleButton.addEventListener('click', function(event) {
if (tabs.getAttribute('disabled')) {
tabs.removeAttribute('disabled');
} else {
tabs.setAttribute('disabled', 'disabled');
}
});
myForm.addEventListener('formsubmitsuccess', function(event) {
console.log('form submit success handled', event);
});
myForm.addEventListener('formsubmiterror', function(event) {
console.log('form submit error handled', event);
});
myForm.addEventListener('formvalid', function(event) {
console.log('form valid handled', event);
});
myForm.addEventListener('forminvalid', function(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>