❤
npm
Sign UpSign In

successful-operation

1.0.5 • Public • Published

successful-operation polymer custom element

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

demo

Just use

<successful-operation></successful-operation>

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 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

<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/successful-operation.html">
    ...
</head>
<body>
    ...
    <successful-operation attribute1="value1" attribute2="value2"></successful-operation>
    ...
 
    <!-- 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 <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

<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/successful-operation.html">
    ...
</head>
<body>
    ...
    <!-- default usage -->
    <successful-operation></successful-operation>
 
    <!-- customized usage (recommended) -->
    <successful-operation header="I am a header" title="I am the Title"></successful-operation>
    ...       
 
    <!-- 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 ?

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.

Readme

Keywords

Package Sidebar

Install

npm i successful-operation

Repository

github.com/vajahath/successful-operation

Homepage

github.com/vajahath/successful-operation#readme

Weekly Downloads

1

Version

1.0.5

License

ISC

Last publish

Collaborators

  • vaju
Try on RunKit
Report malware