<template src="template/main.xml" colour="Spectral" code="javascript" type="Bootstrap" title="Javascript">
<markdown>
## Modal
<div style="font-size:16px;" highlight="xml">```
<modal close no-fade lg|sm></modal>
```</div>
You can create a modal box using the `<modal>` tag.
Add a `close` attribute to put a × icon into the top right corner, and `no-fade` to remove the animation.
The modal size can be set to large (`lg`), small (`sm`) or left as the default size.
In order to refer to the modal later, you'll also need to give it an `id`. You can launch the modal from a `<btn>` or `<a>` using `modal="#id"`
</markdown>
<example show>
<mirror>
<btn primary modal="#modal1">Modal Button</btn>
<br><br>
<a modal="#modal1">Modal Link</a>
<modal id="modal1" close>
<h4>Modal Title</h4>
<lorem>
<footer>
<a btn close>Close</a>
</footer>
</modal>
</mirror>
</example>
<markdown>
Inside the `<modal>`, the first header tag (`<h1>-<h6>`,`<hgroup>` or `<header>`) is set as the modal header.
The last `<footer>` is made into the modal footer.
</markdown>
<example show>
<mirror>
<btn info modal="#modal2">Large Modal (no fade)</btn>
<modal id="modal2" lg no-fade close>
<h4>Large Title</h4>
<lorem>
</modal>
<btn success modal="#modal3">Small Modal</btn>
<modal id="modal3" sm close>
<lorem>
<footer>
Small Modal
</footer>
</modal>
</mirror>
</example>
<markdown>
## Dropdown
<div style="font-size:16px;" highlight="xml">```
<dropdown title="..."></dropdown>
```</div>
`<dropdown>`s can be placed inside Navs. For a `<navbar>`, either inside a `<ul>` or just on its own.
</markdown>
<example show>
<mirror>
<navbar>
<dropdown title="Dropdown 1">
<a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
</dropdown>
<ul>
<li><a href="#">Link 1</a></li>
<dropdown title="Dropdown 2">
<a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
</dropdown>
</ul>
</navbar>
</mirror>
</example>
<markdown>
For `<pills>` or `<tabs>` Nav, place the dropdown amongst your list of links:
</markdown>
<example show>
<mirror>
<pills>
<a href="#" active>Active Pill</a>
<dropdown title="Dropdown">
<a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
</dropdown>
<a href="#">Pill</a>
</pills>
<tabs>
<dropdown title="Dropdown 1">
<a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
</dropdown>
<dropdown title="Dropdown 2">
<a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
</dropdown>
</tabs>
</mirror>
</example>
<markdown>
## ScrollSpy
<div style="font-size:16px;" highlight="xml">```
<pills spy="...">
<tabs spy="...">
```</div>
You can convert any Nav to spy on the scroll position by using the `spy` attribute.
You can optionally give `spy` a selector, to tell it which element's scrollbar to spy on.
If no option is given, the page `<body>` will be spied on. *Whatever element is spied on, its CSS must include `position:relative;`
Inside the Nav must contain links to sections within the page (or wherever is being spied on).
In the example below, the Nav is auto populated using the `populate` library function.
</markdown>
<example show>
<mirror>
<pills spy="#scroll-example" populate="#scroll-example > h4"></pills>
<div id="scroll-example" style="max-height:200px;overflow-y:scroll;position:relative;">
<h4>Section 1</h4>
<lorem><lorem>
<h4>Section 2</h4>
<lorem><lorem>
<h4>Section 3</h4>
<lorem><lorem>
<h4>Section 4</h4>
<lorem><lorem>
<h4>Section 5</h4>
<lorem><lorem>
</div>
</mirror>
</example>
<markdown>
You can apply the spy to an arbitrary list (`<ul>` or `<ol>`), but you'll need to set your own stylings for `.active` to highlight which element is active.
</markdown>
<example show>
<mirror>
<css>
.spy-nav li {display:inline-block;width:33%;}
.spy-nav li.active a {background:purple;color:white;}
</css>
<ul class="spy-nav" spy="#scroll-example2" populate="#scroll-example2 > h4"></ul>
<div id="scroll-example2" style="max-height:200px;overflow-y:scroll;position:relative;">
<h4>Section 1</h4>
<lorem><lorem>
<h4>Section 2</h4>
<lorem><lorem>
<h4>Section 3</h4>
<lorem><lorem>
</div>
</mirror>
</example>
<markdown>
## Tabs
<div style="font-size:16px;" highlight="xml">```
<tab-group>
``` ```<tab></tab>
``` ```...
</tab-group>
```</div>
Divide sections of a document into a group of tabs using the `<tab-group>` tag. This will contain one or more `<tab>`s.
The `<tab-group>` can be set to have `pills` instead of tabs. Add in a `fade` effect, or make the tabs/pills fully `justified`
</markdown>
<example show>
<mirror>
<tab-group fade justified>
<tab>
<h2>Title 1</h2>
<lorem>
</tab>
<tab>
<h2>Title 2</h2>
<lorem>
</tab>
<tab>
<h2>Title 3</h2>
<lorem>
</tab>
<tab>
<h2>Title 4</h2>
<lorem>
</tab>
</tab-group>
</mirror>
</example>
<markdown>
In the above example, the titles for each tab is taken from the first title tag (`<h1-6>`,`<hgroup>` or `<header>`) found in the tab body.
This can be replaced for any `<tab>`, using the `title` attribute (this is also required if the tab body doesn't have a title).
</markdown>
<example show>
<mirror>
<tab-group pills>
<tab title="Title from attribute">
<p>No title tags in body</p>
<lorem>
</tab>
<tab>
<h2>Tab title taken from tab body</h2>
<lorem>
</tab>
<tab title="Tab title overwritten by attribute">
<h2>Tab title not taken from here</h2>
<lorem>
</tab>
<tab>
<p>Default (no title)</p>
<lorem>
</tab>
</tab-group>
</mirror>
</example>
<markdown>
## Tooltip
<div style="font-size:16px;" highlight="xml">```
<a|btn tooltip="..." left|right|top|bottom|auto></a|btn>
```</div>
Add tooltips to `<a>` and `<btn>` elements using the `tooltip` attribute.
You can set the placement using the attributes `left`, `right`, `bottom` or `top` (which is the default).
Add `auto` to get the tooltip to automatically move placement to stay on screen.
</markdown>
<example show>
<mirror>
<btn left tooltip="Left Tooltip (may go off screen)">Default</btn>
<btn primary auto left tooltip="Auto Left Tooltip (should stay on screen)">Primary</btn>
<btn success tooltip="Top Tooltip (Default)">Success</btn>
<btn info tooltip="Bottom Tooltip" bottom>Info</btn>
<btn danger tooltip="Right Tooltip" right>Danger</btn>
<btn success tooltip="Left Tooltip" left>Success</btn>
</mirror>
</example>
<markdown>
## Popover
<div style="font-size:16px;" highlight="xml">```
<a|btn popover="..." title="..." top|bottom|right|left></a|btn>
```</div>
Popovers can be created for `<btn>`s and `<a>`s using the `popover` attribute.
You can optionally add a title with the `title` attribute.
To make the popovers dismissable, add the attribute `close`. For proper cross-browser behaviour, use an `<a>` tag.
</markdown>
<example show>
<mirror>
<btn primary title="Popover Title" popover="Default Popover">Primary</btn>
<btn info popover="Bottom Popover" bottom>Info</btn>
<btn success popover="Top Popover" top>Success</btn>
<btn danger popover="Right Popover" right>Danger</btn>
<btn success popover="Left Popover" left>Success</btn>
<h3>Dismissable Popovers:</h3>
<a btn primary close title="Title 1" popover="Default Popover">Primary</a>
<a btn info close title="Title 2" popover="Bottom Popover" bottom>Info</a>
<a btn success close title="Title 3" popover="Top Popover" top>Success</a>
<a btn danger close popover="Right Popover" right>Danger</a>
<a btn success close popover="Left Popover" left>Success</a>
</mirror>
</example>
<markdown>
## Alert
<div style="font-size:16px;" highlight="xml">```
<alert></alert>
```</div>
Wrap alert text in the `<alert>` tag. Add an attribute for the chosen *brand color*, excluding `primary`.
Add a `close` attribute to make the alert dismissable.
All links will be styled accordings
</markdown>
<example show>
<mirror>
<alert danger close>
<h4>This is an alert</h4>
<p>But you can dismiss it if you like</p>
</alert>
<alert warning close>
<p>I can be closed too</p>
<p>It also contains a <a href="#">Link</a></p>
</alert>
</mirror>
</example>
<markdown>
## Collapse
<div style="font-size:16px;" highlight="xml">```
<a|btn collape="...">
<.. collapse|collapsed>
```</div>
To make any element (other than a `<btn>` or `<a>`) collapsable, use the attribute `collapse`.
To make the element begin (on page load) collapsed, use the attribute `collapsed`.
In order to refer to your collapsable element it later, you will also need to give it an `id`.
You can then open and close your collapsable element from a `<btn>` or `<a>` using the attribute `collapse="#id"`
</markdown>
<example show>
<mirror>
<btn primary collapse="collapse1">Collapse 1</btn>
<btn primary collapse="collapse2">Collapse 2</btn>
<div collapse id="collapse1">
<h3>This is a collapsable div</h3>
<lorem>
</div>
<div collapsed id="collapse2">
<h3>This collapsable panel starts hidden</h3>
<lorem>
</div>
</mirror>
</example>
<markdown>
Collapsable `<panel>`s collapse down to their title (if you don't want this, wrap the `<panel>` in a collapsable `<div>`).
You can open & close the panel by clicking on the title (if there is no title, a blank title bar will appear)
You can also trigger it from a `<btn>` or `<a>`
</markdown>
<example show>
<mirror>
<btn primary collapse="collapsable-panel">Trigger Collapse</btn>
<panel collapsed id="collapsable-panel">
<h3>Collapsable panel - click title to open</h3>
<lorem>
</panel>
<panel collapsed id="collapsable-panel2">
<p>Panel Without Title Title</p>
<lorem>
</panel>
</mirror>
</example>
<markdown>
## Accordion
<div style="font-size:16px;" highlight="xml">```
<accordion>
<panel></panel>
...
</accordion>`
```</div>
Create a collapsable accordion using the `<accordion>` tag.
Inside, put your contents inside `<panel>`s.
By default, the accordion initialised with the first panel expanded.
To default to another panel, add the attribute `active` to one or more.
To start with the accordion closed, add the attribute `closed` to the accordion tag.
</markdown>
<example show>
<mirror>
<accordion>
<panel>
<h3>Title 1</h3>
<lorem>
</panel>
<panel>
<h3>Title 2</h3>
<lorem>
</panel>
<panel>
<h3>Title 3</h3>
<lorem>
</panel>
</accordion>
<accordion primary closed>
<panel><lorem></panel>
<panel><lorem></panel>
<panel><lorem></panel>
</accordion>
</mirror>
</example>
<markdown>
## Carousel
<div style="font-size:16px;" highlight="xml">```
<carousel>
<slide></slide>
...
</carousel>
```</div>
To create a carousel, wrap `<slide>`s in a `<carousel>` tag.
By default the carousel starts at the first slide.
To set another put the attribute `active` to another `<slide>`.
You can set the carousel to auto run by adding an `auto` attribute to the `<carousel>` tag.
Inside each `<slide>` you can add a caption, by wrapping it in a `<capt>` tag.
</markdown>
<example show>
<mirror>
<carousel auto>
<slide>
<img src="img/pic1.jpg" responsive center>
<capt>
<h3>Slide 1</h3>
<lorem short>
</capt>
</slide>
<slide>
<img src="img/pic2.jpg" responsive center>
<capt>
<h3>Slide 2</h3>
<lorem short>
</capt>
</slide>
<slide active>
<img src="img/pic3.jpg" responsive center>
<capt>
<h3>Slide 3</h3>
<lorem short>
</capt>
</slide>
</carousel>
</mirror>
</example>
<markdown>
## Carousel Gallery
Autofill a carousel using the `<gallery>` tag. Each picture will be put into a separate `<slide>`.
</markdown>
<example show>
<mirror>
<carousel auto>
<gallery files="img/*.jpg" style="margin:auto;">
</gallery>
</carousel>
</mirror>
</example>
</template>