README

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.

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

Usage no npm install needed!