operation-failed polymer custom element
A UI element that can be used to indicate that the operation was unsuccessful.
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 operation-failed
Dependency Locations
Verify your directory structure. (if necessary)
|
|-- operation-failed
| |-- operation-failed.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 <operation-failed></operation-failed>
tag will output the default values.
Attributes | Type | Default value | Description |
---|---|---|---|
header |
String | We're sorry, |
header = "15th June 2016" will output the string at the top of the element. |
title |
String | Something went wrong ! |
title = "Upload Failed" will output the string title of the element. |
info_bold |
String | Failed |
info_bold = "bolded! " will output the string as a strong info. |
info |
String | File upload |
info = "hello-world" will output the string as a normal info. |
button_name |
String | Retry |
button_name = "bye" 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 ?
Feel free to ping me on Skype at vajuinside
.
If you found any issues, file an issue on Github.
visit my profile to see other elements.
bye..
Change Log
1.0.2
- Anonymous documentation update.
1.0.1
- New image in the documentation.
1.0.0
- Initial release.