operation-failed

1.0.2 • Public • Published

operation-failed polymer custom element

A UI element that can be used to indicate that the operation was unsuccessful.

demo

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.

  1. Install Bower if you don't have : sudo npm install -g bower.
  2. 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.

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i operation-failed

      Weekly Downloads

      0

      Version

      1.0.2

      License

      ISC

      Last publish

      Collaborators

      • vaju