successful-operation polymer custom element
A UI element that can be used to indicate that the operation was successful.
Just use
to show up the above element.
Setup Polymer and Bootstrap.
You need Polymer base files to use this component.
- Install Bower if you don't have :
sudo npm install -g bower
. - Download Polymer using bower:
bower install Polymer/polymer
.
You also need Bootstrap v3.3.6 or higher to work this component correctly.
Install this package
npm install --save successful-operation
Dependency Locations
Verify your directory structure. (if necessary)
|
|-- successful-operation
| |-successful-operation.html (this file)
|-- bower_components
|-- polymer
| |-- polymer.html
|-- webcomponentsjs
|-- webcomponents-lite.min.js
Usage
<!-- Bootstrap minified CSS --> ... <!-- import webcomponents-lite.min.js --> ... <!-- import the file --> ... ... ... <!-- Bootstrap minified JavaScript -->
Attributes
By default <successful-operation></successful-operation>
tag will output the default values.
Attributes | Type | Default value | Description |
---|---|---|---|
header |
String | Hello there |
header = "15th June 2016" will output the string at the top of the element. |
title |
String | Success |
title = "Upload Success" will output the string title of the element. |
info_bold |
String | Be bold |
info_bold = "File Uploaded! " will output the string as a strong info. |
info |
String | Normal letters |
info = "hello-world.json" will output the string as a normal info. |
button_name |
String | Continue |
button_name = "okay" will output the string on the button. |
button_href |
String (url) | http://www.google.com |
button_href = "https://twitter.com" : when you click on the button, you will be directred to the provided link. |
Example
... <!-- Bootstrap minified CSS --> ... <!-- import webcomponents-lite.min.js --> ... <!-- import the file --> ... ... <!-- default usage --> <!-- customized usage (recommended) --> ... <!-- Bootstrap minified JavaScript -->
Questions ?
Found any bugs? File an issue on Github.
visit my profile to see other elements.
bye..
Change Log
1.0.5
- Anonymous documentation update.
- Config.ing github.
1.0.4
- Anonymous documentation update.
- Connected to Git Repo.
1.0.3
- Anonymous documentation update.
1.0.2
- Anonymous documentation update.
1.0.1
- Anonymous documentation update.
1.0.0
- Initial release.