README
operation-failed polymer custom element
A UI element that can be used to indicate that the operation was unsuccessful.
Just use
<operation-failed></operation-failed>
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
<head>
<!-- Bootstrap minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
...
<!-- import webcomponents-lite.min.js -->
<script src="/path/to/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
...
<!-- import the file -->
<link rel="import" href="/path/to/operation-failed.html">
...
</head>
<body>
...
<operation-failed attribute1="value1" attribute2="value2"></operation-failed>
...
<!-- Bootstrap minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
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
<head>
...
<!-- Bootstrap minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
...
<!-- import webcomponents-lite.min.js -->
<script src="/path/to/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
...
<!-- import the file -->
<link rel="import" href="/path/to/operation-failed.html">
...
</head>
<body>
...
<!-- default usage -->
<operation-failed></operation-failed>
<!-- customized usage (recommended) -->
<operation-failed header="I am a header" title="I am the Title"></operation-failed>
...
<!-- Bootstrap minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
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.