<selectng-options="p.name for p in premadeStyles"ng-model="premadeStyle"></select>
<buttonng-click="loadStyle()">Load Style</button><spanclass="italic">Contribute more styles !</span>
</div>
</p>
<hr>
<pclass="center">Minify
<buttonng-click="active(settings,'minify')"ng-class="settings.minify && 'active'">Minify this build</button>
</p>
<hr>
<pclass="center">
<buttonng-click="build()"ng-bind="building && 'Building...' || 'Download this build'"></button><spanclass="italic indent2">Made with <ahref="https://github.com/jpillora/compilejs"target="_blank">Compile.js</a></span>
</p>
</div>
<divclass="sixteen columns">
<h3>Basic Usage</h3>
</div>
<divclass="eight columns">
<h4>Element Notifications</h4>
<p>You can place notifications on any element:</p>
<pstyle="margin-top:10px"class="italic">Note: This page has set the default class to<code>"success"</code> with<code>$.notify.defaults({ className: "success" });</code>.</p>
</div>
<divid="position"class="sixteen columns">
<h3>Positioning</h3>
<p>
Element notifications and Global notifications can
be vertically repositioned to: <code>"top"</code>, <code>"middle" </code>or <code>"bottom" </code>and horozontally repositioned to: <code>"left"</code>, <code>"center" </code>or <code>"right" </code>.
<pclass="indent1"><code>element</code> - a jquery element<br><code>string|object</code> - element notification data<br><code>options</code> - an options object or class name string </p>
<pclass="indent1"><code>selector</code> - jquery selector<br><code>string|object</code> - element notification data<br><code>options</code> - an options object or class name string </p>
<pclass="indent1"><code>options</code> - an options object (updates the defaults listed below) </p>
</div>
</div>
<divclass="sixteen columns">
<h3>Options</h3>
<p>
The options object listed above are in the form below.
This object below is the actual used to check option
validity and set defaults.
</p>
<preclass="prettyprint">{
// whether to hide the notification on click
clickToHide: true,
// whether to auto-hide the notification
autoHide: true,
// if autoHide, hide after milliseconds
autoHideDelay: 5000,
// show the arrow pointing at the element
arrowShow: true,
// arrow size in pixels
arrowSize: 5,
// default positions
elementPosition: 'bottom left',
globalPosition: 'top right',
// default style
style: 'bootstrap',
// default class (string or [string])
className: 'error',
// show animation
showAnimation: 'slideDown',
// show animation duration
showDuration: 400,
// hide animation
hideAnimation: 'slideUp',
// hide animation duration
hideDuration: 200,
// padding between element and notification
gap: 2
}
</pre>
</div>
<divclass="sixteen columns">
<divclass="section">
<h3>Custom Styling Guide</h3>
<p>You can add your own styles to Notify.js with the<code>$.notify.addStyle </code>method. See <adata-highlight>API</a>.</p>
<p>Style definition objects are in the form:</p>
<preclass="prettyprint">{
//required html representing each notification
html: "",
//optional object to be converted to css
classes: {
<className>: {
<propertyName>: <value>
},
<className>: {
...
},
...
},
//optional css to be inserted onto the page
css: ""
}
</pre>
<p>
<h5class="inline">html</h5> - If you only have HTML element that you need to modify per
notification then you should give this element an attribute of <code>data-notify-text</code> or <code>data-notify-html</code>. Use <code>data-notify-html</code> if you wish to display arbitrary HTML inside the notification,
otherwise, use <code>data-notify-text</code> as it is more secure.<br> Otherwise, if you wish to modify multiple HTML elements per
notification then you'll need to give each element one of the two
attributes above <b>as well as a value</b>. For an example of this see the Advanced Example below.
</p>
<p>
<h5class="inline">classes</h5> - This object will be used to construct css. It must be in the form described above and there is an example below.
</p>
<p>
<h5class="inline">css</h5> - This string is simply raw css. Use this property if you want to keep your style definition inside
your js files.
</p>
</div>
<divclass="section">
<h4>Class naming convention</h4>
<p>
When each notification is constructed, it's container
(outer most element defined in your style html) will automatically
<p>Notice there is no <code>classes</code> property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead:</p>
<pclass="italic">Note: you could also convert this CSS code to a JavaScript string and use it with the <code>css</code> property. It's not very readable though it's better for distribution.</p>
<p>To get people started with some styles ideas, checkout this <ahref="http://mac.appstorm.net/roundups/utilities-roundups/36-sweet-growl-styles-to-keep-your-notifications-snappy/"target="_blank">post on various Growl styles</a>.</p>
<pclass="italic">
Note: If you wish to contribute to the library by fixing bugs or adding features,
see the <b>src</b> folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript.
I'm using <ahref="https://gruntjs.com"target="_blank">Grunt </a> to compile, minify and concat the builds, you can do so with:
