Global Defaults documentation

doc/src/app.js

@@ -4,6 +4,7 @@ export class App {
         config.title = 'Aurelia Bootstrap';
         config.map([
             {route: ['', 'introduction'], name: 'introduction', moduleId: 'introduction/introduction', nav: false},
+            {route: ['defaults'], name: 'global-defaults', moduleId: 'global-defaults/global-defaults', nav: false},
             {route: ['accordion'], name: 'accordion', moduleId: 'accordion/accordion', nav: true, title: 'Accordion'},
             {route: ['buttons'], name: 'buttons', moduleId: 'buttons/buttons', nav: true, title: 'Buttons'},
             {route: ['collapse'], name: 'collapse', moduleId: 'collapse/collapse', nav: true, title: 'Collapse'},

doc/src/global-defaults/global-defaults.html

@@ -0,0 +1,48 @@
+<template>
+    <div class="container-fluid">
+        <div class="page-header">
+            <a class="btn btn-default pull-right" target="_blank"
+               href="https://github.com/tochoromero/aurelia-bootstrap/tree/master/doc/src/global-defaults">
+                <i class="fa fa-edit"></i> Improve documentation</a>
+            <h1>Global Defaults</h1>
+        </div>
+
+        <p>Many of the Aurelia Bootstrap components have sensible defaults. You can always change the default value on a per component
+            basis. But sometimes, you want to change the default for <strong>all</strong> the components. For those cases you want to use
+            Global
+            Defaults.</p>
+
+        <p>When initializing the Aurelia Bootstrap plugin in your <code>main.js</code>, you can obtain the configuration object and change the desired
+            defaults,
+            this example contains all the available defaults with their respective value:</p>
+
+        <pre><code class="language-js" au-syntax>export function configure(aurelia) {
+  aurelia.use
+    .standardConfiguration()
+    .developmentLogging()
+    .plugin('aurelia-bootstrap', config => {
+        config.options.accordionCloseOthers: true,
+        config.options.accordionGroupPanelClass: 'panel-default',
+        config.options.btnLoadingText: 'Loading...',
+        config.options.dropdownAutoClose: 'always',
+        config.options.paginationBoundaryLinks: false,
+        config.options.paginationDirectionLinks: true,
+        config.options.paginationFirstText: 'First',
+        config.options.paginationHideSinglePage: true,
+        config.options.paginationLastText: 'Last',
+        config.options.paginationNextText: '>',
+        config.options.paginationPreviousText: '&lt;',
+        config.options.popoverPosition: 'top',
+        config.options.popoverTrigger: 'mouseover',
+        config.options.tabsetType: 'tabs',
+        config.options.tabsetVertical: false,
+        config.options.tooltipPosition: 'top',
+        config.options.tooltipTrigger: 'mouseover'
+    });
+
+  aurelia.start().then(() => aurelia.setRoot());
+}</code></pre>
+
+        <p>Please note that <strong>you don't need to add the whole list</strong>, you only add what you need to change.</p>
+    </div>
+</template>

doc/src/global-defaults/global-defaults.js

@@ -0,0 +1,3 @@
+export class GlobalDefaults {
+
+}

doc/src/introduction/introduction.js

@@ -1,5 +1,3 @@
-//import {computedFrom} from 'aurelia-framework';
-
 export class Introduction {
 
 }

doc/src/nav-bar.html

@@ -18,6 +18,7 @@
                     </li>
                 </ul>
             </li>
+            <li><a href="#/defaults">Global Defaults</a></li>
         </ul>
     </nav>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aurelia-bootstrap",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Bootstrap components written in Aurelia.",
   "keywords": [
     "aurelia",