vajahath/successful-operation.md

## successful-operation.md

      
    Raw
  

              successful-operation.md
            
          
    successful-operation polymer custom element

A UI element that can be used to indicate that the operation was successful.
(version: 1.0.5.)
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..
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.