mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-03 22:37:03 +00:00
Adding support for uikit v3 (#42038)
* Adding support for uikit v3 * cleanup * cleanup * fix typescript minimum version
This commit is contained in:
翁炜煜
+31
-58
@@ -1,75 +1,48 @@
|
||||
[](http://getuikit.com/)
|
||||
|
||||
# UIkit
|
||||
|
||||
[](https://discord.gg/NEt4Pv7)
|
||||
|
||||
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
|
||||
|
||||
* [Homepage](http://getuikit.com) - Learn more about UIkit
|
||||
* [@getuikit](https://twitter.com/getuikit) - Get the latest buzz on Twitter
|
||||
* [Google+ Community](https://plus.google.com/communities/114238665434626719878) - Share news and latest work
|
||||
* [Discord Chat](https://discord.gg/NEt4Pv7) - Join our developer chat on Discord.
|
||||
|
||||
Join our developer chat. We are online every work day between 8:00 and 18:00 UTC
|
||||
---
|
||||
|
||||
[](https://gitter.im/uikit/uikit)
|
||||
<p align="center">
|
||||
<b>UIkit is an Open Source project developed by YOOtheme.</b>
|
||||
<br><br>
|
||||
<a href="https://yootheme.com" align="center">
|
||||
<img width="134" height="30" src="http://yootheme.com/site/images/yootheme-logo.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
## Getting started
|
||||
|
||||
You have following options to get UIkit:
|
||||
You have the following options to get UIkit:
|
||||
|
||||
- Download the [latest release](https://github.com/uikit/uikit/releases/latest)
|
||||
- Clone the repo, `git clone git://github.com/uikit/uikit.git`.
|
||||
- Install with [Bower](http://bower.io): ```bower install uikit```
|
||||
|
||||
You find the compiled UIkit distribution in its own [repo](https://github.com/uikit/bower-uikit).
|
||||
- Download the [latest release](https://github.com/uikit/uikit/releases/latest) with pre-built CSS and JS.
|
||||
- Install with [npm](https://npmjs.com) to get all source files as they are available on Github: ```npm install uikit```
|
||||
- Install with [yarn](https://yarnpkg.com/) to get all source files as they are available on Github: ```yarn add uikit```
|
||||
- Directly load UIkit from [jsDelivr](https://www.jsdelivr.com): https://www.jsdelivr.com/package/npm/uikit
|
||||
- Clone the repo to get all source files including build scripts: `git clone git://github.com/uikit/uikit.git`
|
||||
|
||||
## Developers
|
||||
|
||||
First of all, install [Node](http://nodejs.org/). We use [Gulp](http://gulpjs.com) to build UIkit. If you haven't used Gulp before, you need to install the `gulp` package as a global install.
|
||||
|
||||
```
|
||||
npm install --global gulp
|
||||
```
|
||||
|
||||
If you haven't done so already, clone the UIkit git repo.
|
||||
|
||||
```
|
||||
git clone git://github.com/uikit/uikit.git
|
||||
```
|
||||
Install the Node dependencies.
|
||||
|
||||
```
|
||||
cd uikit
|
||||
npm install
|
||||
```
|
||||
|
||||
Run `gulp` to lint, build and minify the release.
|
||||
|
||||
```
|
||||
gulp [-t themename]
|
||||
```
|
||||
|
||||
The built version of UIkit will be put in the `/dist` subdirectory. Pass a theme name parameter to only build the specified theme.
|
||||
|
||||
### Browsersync
|
||||
|
||||
```
|
||||
gulp sync
|
||||
```
|
||||
|
||||
After running `gulp sync` a new browser instance will open, pointing to the uikit folder - `http://localhost:3000/`. The browser window will reload anytime you modify a source file.
|
||||
|
||||
### Custom prefix
|
||||
|
||||
Run gulp with your own prefix parameter ```-p``` to have all classes and JavaScript files custom prefixed.
|
||||
|
||||
```
|
||||
gulp -p myprefix
|
||||
```
|
||||
To always have the latest development version of UIkit, even before a release, you may want to use npm or yarn with the `dev` tag.
|
||||
|
||||
- Using npm: ```npm install uikit@dev```
|
||||
- Using yarn: ```yarn add uikit@dev```
|
||||
- Using [cdn](cdn.jsdelivr.net): https://cdn.jsdelivr.net/npm/uikit@dev
|
||||
|
||||
## Contributing
|
||||
|
||||
UIkit follows the [GitFlow branching model](http://nvie.com/posts/a-successful-git-branching-model). The ```master``` branch always reflects a production-ready state while the latest development is taking place in the ```develop``` branch.
|
||||
|
||||
Each time you want to work on a fix or a new feature, create a new branch based on the ```develop``` branch: ```git checkout -b BRANCH_NAME develop```. Only pull requests to the ```develop``` branch will be merged.
|
||||
Finding bugs, sending pull requests or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our [contribution guidelines](CONTRIBUTING.md). Thanks!
|
||||
|
||||
## Versioning
|
||||
|
||||
@@ -77,12 +50,12 @@ UIkit is maintained by using the [Semantic Versioning Specification (SemVer)](ht
|
||||
|
||||
## Browser Support
|
||||
|
||||
 |  |  |  | 
|
||||
--- | --- | --- | --- | --- |
|
||||
Latest ✔ | Latest ✔ | 9+ ✔ | 7.1+ ✔ | Latest ✔ |
|
||||
 |  |  |  |  | 
|
||||
--- | --- | --- | --- | --- | --- |
|
||||
Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔ |
|
||||
|
||||
Tested with [BrowserStack](https://www.browserstack.com) (thanks for sponsoring!).
|
||||
Tested With<br>[](https://www.browserstack.com)
|
||||
|
||||
## Copyright and License
|
||||
|
||||
Copyright [YOOtheme](http://www.yootheme.com) GmbH under the [MIT license](LICENSE.md).
|
||||
Copyright [YOOtheme](https://yootheme.com) GmbH under the [MIT license](LICENSE.md).
|
||||
Vendored
+569
-1428
File diff suppressed because it is too large
Load Diff
+22
-22
@@ -1,24 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"uikit-tests.ts"
|
||||
]
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"uikit-tests.ts"
|
||||
]
|
||||
}
|
||||
+21
-164
@@ -1,186 +1,43 @@
|
||||
import UIkit from 'uikit';
|
||||
|
||||
function testDropdown() {
|
||||
UIkit.dropdown("#parent");
|
||||
UIkit.dropdown($("#parent"));
|
||||
|
||||
const options: UIkit.DropdownOptions = {
|
||||
const dropdown = UIkit.dropdown("#parent", {
|
||||
pos: 'bottom-center',
|
||||
mode: 'click',
|
||||
remaintime: 150,
|
||||
justify: false,
|
||||
boundary: window,
|
||||
delay: 0,
|
||||
dropdownSelector: '.uk-dropdown,.uk-dropdown-blank',
|
||||
hoverDelayIdle: 200,
|
||||
preventflip: 'x'
|
||||
};
|
||||
const dropdown = UIkit.dropdown("$parent", options);
|
||||
mode: 'click, hover',
|
||||
flip: true
|
||||
});
|
||||
|
||||
dropdown.show();
|
||||
dropdown.hide();
|
||||
dropdown.hide(true);
|
||||
dropdown.hide(false);
|
||||
}
|
||||
|
||||
function testModal() {
|
||||
UIkit.modal.alert("Attention!");
|
||||
|
||||
const options: UIkit.ModalOptions = {
|
||||
keyboard: true,
|
||||
bgclose: true,
|
||||
minScrollHeight: 150,
|
||||
center: false,
|
||||
modal: true
|
||||
};
|
||||
UIkit.modal.confirm("Are you sure?", () => {});
|
||||
UIkit.modal.confirm("Are you sure?", () => {}, {});
|
||||
UIkit.modal.confirm("Are you sure?", () => {}, () => {});
|
||||
UIkit.modal.confirm("Are you sure?", () => {}, () => {}, {});
|
||||
UIkit.modal.confirm("Are you sure?", () => {}, {});
|
||||
|
||||
UIkit.modal.prompt("Name:", 'value', (newvalue: string) => {
|
||||
// will be executed on submit.
|
||||
const modal = UIkit.modal('#modal', {
|
||||
stack: true,
|
||||
container: false
|
||||
});
|
||||
let modal = UIkit.modal.blockUI("Any content...");
|
||||
UIkit.modal.confirm("Are you sure?").then(() => alert('success'));
|
||||
modal.hide();
|
||||
modal.show();
|
||||
modal = UIkit.modal(".modalSelector");
|
||||
setTimeout(() => modal.show(), 2000);
|
||||
|
||||
if (modal.isActive()) {
|
||||
modal.hide();
|
||||
} else {
|
||||
modal.show();
|
||||
}
|
||||
UIkit.modal.alert('UIkit alert!');
|
||||
UIkit.modal.confirm('UIkit confirm!');
|
||||
UIkit.modal.prompt('Name:', 'Your name');
|
||||
UIkit.modal.dialog('<p>UIkit dialog!</p>');
|
||||
}
|
||||
|
||||
function testOffCanvas() {
|
||||
UIkit.offcanvas.show("#id");
|
||||
UIkit.offcanvas.hide();
|
||||
UIkit.offcanvas.hide(true);
|
||||
}
|
||||
|
||||
function testLightBox() {
|
||||
const element = "#group";
|
||||
const lightbox = UIkit.lightbox(element, {/* options */});
|
||||
const lightbox2 = UIkit.lightbox.create([
|
||||
{source: 'http://url/to/video.mp4', type: 'video'},
|
||||
{source: 'http://url/to/image.jpg', type: 'image'}
|
||||
]);
|
||||
lightbox2.show();
|
||||
const lightbox3 = UIkit.lightbox(element);
|
||||
}
|
||||
|
||||
function testAutoComplete() {
|
||||
UIkit.autocomplete("#group", {});
|
||||
UIkit.autocomplete("#group");
|
||||
}
|
||||
|
||||
function testDatepicker() {
|
||||
const datepicker = UIkit.datepicker("#element", {});
|
||||
}
|
||||
|
||||
function testHtmlEditor() {
|
||||
const htmleditor = UIkit.htmleditor("textarea", {/* options */});
|
||||
}
|
||||
|
||||
function testSlider() {
|
||||
const slider = UIkit.slider("element", {});
|
||||
}
|
||||
function testSlideSet() {
|
||||
const slideset = UIkit.slideset("element", {});
|
||||
}
|
||||
function testSlideShow() {
|
||||
const slideshow = UIkit.slideshow("element", {});
|
||||
}
|
||||
|
||||
function testParallax() {
|
||||
const parallax = UIkit.parallax("element", {});
|
||||
}
|
||||
function testAccordion() {
|
||||
const accordion = UIkit.accordion("element", {});
|
||||
}
|
||||
|
||||
function testNotify() {
|
||||
UIkit.notify({
|
||||
message: 'Bazinga!',
|
||||
status: 'info',
|
||||
timeout: 5000,
|
||||
pos: 'top-center'
|
||||
});
|
||||
|
||||
// Shortcuts
|
||||
UIkit.notify('My message');
|
||||
UIkit.notify('My message', status);
|
||||
UIkit.notify('My message', {/* options */});
|
||||
|
||||
UIkit.notify("Message...", {timeout: 0});
|
||||
UIkit.notify("...", {pos: 'top-center'});
|
||||
UIkit.notify("...", {status: 'info'});
|
||||
}
|
||||
|
||||
function testSearch() {
|
||||
const search = UIkit.search("element", {});
|
||||
}
|
||||
|
||||
function testNestable() {
|
||||
const nestable = UIkit.nestable('element', {});
|
||||
}
|
||||
function testSortable() {
|
||||
const sortable = UIkit.sortable('element', {});
|
||||
}
|
||||
function testStick() {
|
||||
const sticky = UIkit.sticky('element', {});
|
||||
}
|
||||
function testTimePicker() {
|
||||
const timepicker = UIkit.timepicker('element', {});
|
||||
}
|
||||
|
||||
function testTooltip() {
|
||||
const tooltip = UIkit.tooltip('element', {});
|
||||
UIkit.offcanvas("#id").show();
|
||||
UIkit.offcanvas("#id").hide();
|
||||
}
|
||||
|
||||
function testUpload() {
|
||||
$(() => {
|
||||
const progressbar = $("#progressbar");
|
||||
const bar = progressbar.find('.uk-progress-bar');
|
||||
const settings = {
|
||||
action: '/', // upload url
|
||||
allow : '*.(jpg|jpeg|gif|png)', // allow only images
|
||||
loadstart() {
|
||||
bar.css("width", "0%").text("0%");
|
||||
progressbar.removeClass("uk-hidden");
|
||||
},
|
||||
progress(percent: number) {
|
||||
percent = Math.ceil(percent);
|
||||
bar.css("width", percent + "%").text(percent + "%");
|
||||
},
|
||||
allcomplete(response: any) {
|
||||
bar.css("width", "100%").text("100%");
|
||||
|
||||
setTimeout(() => {
|
||||
progressbar.addClass("uk-hidden");
|
||||
}, 250);
|
||||
|
||||
alert("Upload Completed");
|
||||
}
|
||||
};
|
||||
|
||||
const select = UIkit.uploadSelect($("#upload-select"), settings);
|
||||
const drop = UIkit.uploadDrop($("#upload-drop"), settings);
|
||||
});
|
||||
|
||||
// Test with object literal
|
||||
const select2 = UIkit.uploadSelect($("#upload-select"), {
|
||||
action: '/', // upload url
|
||||
allow: '*.(jpg|jpeg|gif|png)', // allow only images
|
||||
loadstart: () => {},
|
||||
progress: (percent: number) => {},
|
||||
allcomplete: (response: any) => {}
|
||||
});
|
||||
const drop2 = UIkit.uploadDrop($("#upload-drop"), {
|
||||
action: '/', // upload url
|
||||
allow: '*.(jpg|jpeg|gif|png)', // allow only images
|
||||
loadstart: () => {},
|
||||
progress: (percent: number) => {},
|
||||
allcomplete: (response: any) => {}
|
||||
UIkit.upload('#upload', {
|
||||
abort: (asd: number) => {
|
||||
return asd;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
# UIkit
|
||||
|
||||
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
|
||||
|
||||
* [Homepage](http://getuikit.com) - Learn more about UIkit
|
||||
* [@getuikit](https://twitter.com/getuikit) - Get the latest buzz on Twitter
|
||||
* [Google+ Community](https://plus.google.com/communities/114238665434626719878) - Share news and latest work
|
||||
|
||||
Join our developer chat. We are online every work day between 8:00 and 18:00 UTC
|
||||
|
||||
[](https://gitter.im/uikit/uikit)
|
||||
|
||||
## Getting started
|
||||
|
||||
You have following options to get UIkit:
|
||||
|
||||
- Download the [latest release](https://github.com/uikit/uikit/releases/latest)
|
||||
- Clone the repo, `git clone git://github.com/uikit/uikit.git`.
|
||||
- Install with [Bower](http://bower.io): ```bower install uikit```
|
||||
|
||||
You find the compiled UIkit distribution in its own [repo](https://github.com/uikit/bower-uikit).
|
||||
|
||||
## Developers
|
||||
|
||||
First of all, install [Node](http://nodejs.org/). We use [Gulp](http://gulpjs.com) to build UIkit. If you haven't used Gulp before, you need to install the `gulp` package as a global install.
|
||||
|
||||
```
|
||||
npm install --global gulp
|
||||
```
|
||||
|
||||
If you haven't done so already, clone the UIkit git repo.
|
||||
|
||||
```
|
||||
git clone git://github.com/uikit/uikit.git
|
||||
```
|
||||
Install the Node dependencies.
|
||||
|
||||
```
|
||||
cd uikit
|
||||
npm install
|
||||
```
|
||||
|
||||
Run `gulp` to lint, build and minify the release.
|
||||
|
||||
```
|
||||
gulp [-t themename]
|
||||
```
|
||||
|
||||
The built version of UIkit will be put in the `/dist` subdirectory. Pass a theme name parameter to only build the specified theme.
|
||||
|
||||
### Browsersync
|
||||
|
||||
```
|
||||
gulp sync
|
||||
```
|
||||
|
||||
After running `gulp sync` a new browser instance will open, pointing to the uikit folder - `http://localhost:3000/`. The browser window will reload anytime you modify a source file.
|
||||
|
||||
### Custom prefix
|
||||
|
||||
Run gulp with your own prefix parameter ```-p``` to have all classes and JavaScript files custom prefixed.
|
||||
|
||||
```
|
||||
gulp -p myprefix
|
||||
```
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
UIkit follows the [GitFlow branching model](http://nvie.com/posts/a-successful-git-branching-model). The ```master``` branch always reflects a production-ready state while the latest development is taking place in the ```develop``` branch.
|
||||
|
||||
Each time you want to work on a fix or a new feature, create a new branch based on the ```develop``` branch: ```git checkout -b BRANCH_NAME develop```. Only pull requests to the ```develop``` branch will be merged.
|
||||
|
||||
## Versioning
|
||||
|
||||
UIkit is maintained by using the [Semantic Versioning Specification (SemVer)](http://semver.org).
|
||||
|
||||
## Browser Support
|
||||
|
||||
 |  |  |  | 
|
||||
--- | --- | --- | --- | --- |
|
||||
Latest ✔ | Latest ✔ | 9+ ✔ | 7.1+ ✔ | Latest ✔ |
|
||||
|
||||
Tested with [BrowserStack](https://www.browserstack.com) (thanks for sponsoring!).
|
||||
|
||||
## Copyright and License
|
||||
|
||||
Copyright [YOOtheme](http://www.yootheme.com) GmbH under the [MIT license](LICENSE.md).
|
||||
Vendored
+1441
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../../",
|
||||
"typeRoots": [
|
||||
"../../"
|
||||
],
|
||||
"types": [],
|
||||
"paths": {
|
||||
"uikit": [
|
||||
"uikit/v2"
|
||||
],
|
||||
"uikit/*": [
|
||||
"uikit/v2/*"
|
||||
]
|
||||
},
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"uikit-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
@@ -0,0 +1,186 @@
|
||||
function testDropdown() {
|
||||
UIkit.dropdown("#parent");
|
||||
UIkit.dropdown($("#parent"));
|
||||
|
||||
const options: UIkit.DropdownOptions = {
|
||||
pos: 'bottom-center',
|
||||
mode: 'click',
|
||||
remaintime: 150,
|
||||
justify: false,
|
||||
boundary: window,
|
||||
delay: 0,
|
||||
dropdownSelector: '.uk-dropdown,.uk-dropdown-blank',
|
||||
hoverDelayIdle: 200,
|
||||
preventflip: 'x'
|
||||
};
|
||||
const dropdown = UIkit.dropdown("$parent", options);
|
||||
|
||||
dropdown.show();
|
||||
dropdown.hide();
|
||||
dropdown.hide(true);
|
||||
dropdown.hide(false);
|
||||
}
|
||||
|
||||
function testModal() {
|
||||
UIkit.modal.alert("Attention!");
|
||||
|
||||
const options: UIkit.ModalOptions = {
|
||||
keyboard: true,
|
||||
bgclose: true,
|
||||
minScrollHeight: 150,
|
||||
center: false,
|
||||
modal: true
|
||||
};
|
||||
UIkit.modal.confirm("Are you sure?", () => {});
|
||||
UIkit.modal.confirm("Are you sure?", () => {}, {});
|
||||
UIkit.modal.confirm("Are you sure?", () => {}, () => {});
|
||||
UIkit.modal.confirm("Are you sure?", () => {}, () => {}, {});
|
||||
UIkit.modal.confirm("Are you sure?", () => {}, {});
|
||||
|
||||
UIkit.modal.prompt("Name:", 'value', (newvalue: string) => {
|
||||
// will be executed on submit.
|
||||
});
|
||||
let modal = UIkit.modal.blockUI("Any content...");
|
||||
modal.hide();
|
||||
modal.show();
|
||||
modal = UIkit.modal(".modalSelector");
|
||||
|
||||
if (modal.isActive()) {
|
||||
modal.hide();
|
||||
} else {
|
||||
modal.show();
|
||||
}
|
||||
}
|
||||
|
||||
function testOffCanvas() {
|
||||
UIkit.offcanvas.show("#id");
|
||||
UIkit.offcanvas.hide();
|
||||
UIkit.offcanvas.hide(true);
|
||||
}
|
||||
|
||||
function testLightBox() {
|
||||
const element = "#group";
|
||||
const lightbox = UIkit.lightbox(element, {/* options */});
|
||||
const lightbox2 = UIkit.lightbox.create([
|
||||
{source: 'http://url/to/video.mp4', type: 'video'},
|
||||
{source: 'http://url/to/image.jpg', type: 'image'}
|
||||
]);
|
||||
lightbox2.show();
|
||||
const lightbox3 = UIkit.lightbox(element);
|
||||
}
|
||||
|
||||
function testAutoComplete() {
|
||||
UIkit.autocomplete("#group", {});
|
||||
UIkit.autocomplete("#group");
|
||||
}
|
||||
|
||||
function testDatepicker() {
|
||||
const datepicker = UIkit.datepicker("#element", {});
|
||||
}
|
||||
|
||||
function testHtmlEditor() {
|
||||
const htmleditor = UIkit.htmleditor("textarea", {/* options */});
|
||||
}
|
||||
|
||||
function testSlider() {
|
||||
const slider = UIkit.slider("element", {});
|
||||
}
|
||||
function testSlideSet() {
|
||||
const slideset = UIkit.slideset("element", {});
|
||||
}
|
||||
function testSlideShow() {
|
||||
const slideshow = UIkit.slideshow("element", {});
|
||||
}
|
||||
|
||||
function testParallax() {
|
||||
const parallax = UIkit.parallax("element", {});
|
||||
}
|
||||
function testAccordion() {
|
||||
const accordion = UIkit.accordion("element", {});
|
||||
}
|
||||
|
||||
function testNotify() {
|
||||
UIkit.notify({
|
||||
message: 'Bazinga!',
|
||||
status: 'info',
|
||||
timeout: 5000,
|
||||
pos: 'top-center'
|
||||
});
|
||||
|
||||
// Shortcuts
|
||||
UIkit.notify('My message');
|
||||
UIkit.notify('My message', status);
|
||||
UIkit.notify('My message', {/* options */});
|
||||
|
||||
UIkit.notify("Message...", {timeout: 0});
|
||||
UIkit.notify("...", {pos: 'top-center'});
|
||||
UIkit.notify("...", {status: 'info'});
|
||||
}
|
||||
|
||||
function testSearch() {
|
||||
const search = UIkit.search("element", {});
|
||||
}
|
||||
|
||||
function testNestable() {
|
||||
const nestable = UIkit.nestable('element', {});
|
||||
}
|
||||
function testSortable() {
|
||||
const sortable = UIkit.sortable('element', {});
|
||||
}
|
||||
function testStick() {
|
||||
const sticky = UIkit.sticky('element', {});
|
||||
}
|
||||
function testTimePicker() {
|
||||
const timepicker = UIkit.timepicker('element', {});
|
||||
}
|
||||
|
||||
function testTooltip() {
|
||||
const tooltip = UIkit.tooltip('element', {});
|
||||
}
|
||||
|
||||
function testUpload() {
|
||||
$(() => {
|
||||
const progressbar = $("#progressbar");
|
||||
const bar = progressbar.find('.uk-progress-bar');
|
||||
const settings = {
|
||||
action: '/', // upload url
|
||||
allow : '*.(jpg|jpeg|gif|png)', // allow only images
|
||||
loadstart() {
|
||||
bar.css("width", "0%").text("0%");
|
||||
progressbar.removeClass("uk-hidden");
|
||||
},
|
||||
progress(percent: number) {
|
||||
percent = Math.ceil(percent);
|
||||
bar.css("width", percent + "%").text(percent + "%");
|
||||
},
|
||||
allcomplete(response: any) {
|
||||
bar.css("width", "100%").text("100%");
|
||||
|
||||
setTimeout(() => {
|
||||
progressbar.addClass("uk-hidden");
|
||||
}, 250);
|
||||
|
||||
alert("Upload Completed");
|
||||
}
|
||||
};
|
||||
|
||||
const select = UIkit.uploadSelect($("#upload-select"), settings);
|
||||
const drop = UIkit.uploadDrop($("#upload-drop"), settings);
|
||||
});
|
||||
|
||||
// Test with object literal
|
||||
const select2 = UIkit.uploadSelect($("#upload-select"), {
|
||||
action: '/', // upload url
|
||||
allow: '*.(jpg|jpeg|gif|png)', // allow only images
|
||||
loadstart: () => {},
|
||||
progress: (percent: number) => {},
|
||||
allcomplete: (response: any) => {}
|
||||
});
|
||||
const drop2 = UIkit.uploadDrop($("#upload-drop"), {
|
||||
action: '/', // upload url
|
||||
allow: '*.(jpg|jpeg|gif|png)', // allow only images
|
||||
loadstart: () => {},
|
||||
progress: (percent: number) => {},
|
||||
allcomplete: (response: any) => {}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user