npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

operation-failed

v1.0.2

Published

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

Downloads

1

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

vajuvaju

Keywords

Polymerweb-componentsuserinterfaceuicustom-elements

Readme

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.