---
layout: default
title: Ratchet ~ Components
base_url: "../"
---
<!-- Banner for Mozilla/IE -->
< p class = "notice-banner" >
< strong > Heads up!< / strong > Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.
< / p >
<!-- Docs masthead -->
< header class = "docs-masthead" >
< div class = "container column-group" >
< div class = "column units-2" >
< a class = "icon icon-list" href = "#" > < / a >
< a class = "icon icon-download" href = "#" > < / a >
< h1 class = "logotype" > R< / h1 >
< h2 class = "section-title" > Components< / h2 >
< p class = "section-description" > Design patterns that serve as basic building blocks< / p >
< / div >
< / div >
< / header >
< div class = "platform-toggle" >
< ul class = "segmented-controller" >
< li class = "selected" >
< a > Base< / a >
< / li >
< li >
< a > iOS< / a >
< / li >
< li >
< a > Android< / a >
< / li >
< / ul >
< / div >
< div class = "container" >
<!-- [if IE]>
< div class = "notice-banner" >
< p > < strong > Heads up!< / strong > Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.< / p >
< / div >
<![endif]-->
<!-- Components -->
< div class = "column-group" >
< div class = "column units-2 lg-units-7" >
<!-- Bars -->
< article class = "component active" id = "bars" >
< h3 class = "component-title" > Title bar< / h3 >
< p class = "component-description" > Title bars are full width and docked to the top of the viewport.< / p >
< div class = "component-example component-example-fullbleed" >
< header class = "bar-nav" >
< h1 class = "title" > Title< / h1 >
< / header >
< / div >
{% highlight html %}
< header class = "bar-nav" >
< h1 class = "title" > Title< / h1 >
< / header >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Title bar with buttons< / h3 >
< p class = "component-description" > Buttons in a title bar are left or right aligned and should be used for actions.< / p >
< div class = "component-example component-example-fullbleed" >
< header class = "bar-nav pull-left" >
< a class = "button" >
Left
< / a >
< a class = "button pull-right" >
Right
< / a >
< h1 class = "title" > Title< / h1 >
< / header >
< / div >
{% highlight html %}
< header class = "bar-nav" >
< a class = "button pull-left" >
Left
< / a >
< a class = "button pull-right" >
Right
< / a >
< h1 class = "title" > Title< / h1 >
< / header >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Title bar with directional buttons< / h3 >
< p class = "component-description" > Directional buttons in a title bar should be used for navigational purposes.< / p >
< div class = "component-example component-example-fullbleed" >
< header class = "bar-nav" >
< a class = "button-link pull-left" >
Previous
< / a >
< a class = "button-link pull-right" >
Next
< / a >
< h1 class = "title" > Title< / h1 >
< / header >
< / div >
{% highlight html %}
< header class = "bar-nav" >
< a class = "button-link pull-left" >
Previous
< / a >
< a class = "button-link pull-right" >
Next
< / a >
< h1 class = "title" > Title< / h1 >
< / header >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Title bar with segmented controller< / h3 >
< p class = "component-description" > Title bars can also house segmented controllers (with or without accompanying buttons). It all uses flex-box to create perfectly even spacing no matter their labels.< / p >
< div class = "component-example component-example-fullbleed" >
< header class = "bar-nav" >
< a class = "button pull-left" >
Left
< / a >
< a class = "button pull-right" >
Right
< / a >
< ul class = "segmented-controller" >
< li class = "selected" >
< a > One< / a >
< / li >
< li >
< a > Two< / a >
< / li >
< li >
< a > Three< / a >
< / li >
< / ul >
< / header >
< / div >
{% highlight html %}
< header class = "bar-nav" >
< a class = "button pull-left" >
Left
< / a >
< a class = "button pull-right" >
Right
< / a >
< ul class = "segmented-controller" >
< li class = "selected" >
< a > One< / a >
< / li >
< li >
< a > Two< / a >
< / li >
< li >
< a > Three< / a >
< / li >
< / ul >
< / header >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Tab bar< / h3 >
< p class = "component-description" > Use Ratchicons in the tab bar to represent different sections of your app.< / p >
< div class = "component-example component-example-fullbleed" >
< nav class = "bar-tab" >
< a class = "tab-item active" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< a class = "tab-item" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< a class = "tab-item" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< a class = "tab-item" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< a class = "tab-item" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< / nav >
< / div >
{% highlight html %}
< nav class = "bar-tab" >
< a class = "tab-item active" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< a class = "tab-item" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< a class = "tab-item" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< a class = "tab-item" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< a class = "tab-item" href = "#" >
< span class = "icon icon-share" > < / span >
< div class = "tab-label" > Label< / div >
< / a >
< / nav >
{% endhighlight %}
< p class = "component-note touch-only" > < strong > Note:< / strong > Use push.js to actually change content.< / p >
< / article >
< article class = "component" >
< h3 class = "component-title" > Standard bars< / h3 >
< p class = "component-description" > Standard bars are basic fixed elements that can be positioned in 3 places. These can be used to house buttons or segmented controllers (see following examples).< / p >
< div class = "component-example component-example-fullbleed" >
<!-- Segmented controller in standard bar fixed to top -->
< nav class = "bar-standard" >
< ul class = "segmented-controller" >
< li class = "selected" >
< a > Thing one< / a >
< / li >
< li >
< a > Thing two< / a >
< / li >
< li >
< a > Thing three< / a >
< / li >
< / ul >
< / nav >
<!-- Block button in standard bar fixed below top bar -->
< div class = "bar-standard bar-header-secondary" >
< a class = "button-block" > Block level button< / a >
< / div >
< / div >
{% highlight html %}
<!-- Segmented controller in standard bar fixed to top -->
< nav class = "bar-standard" >
< ul class = "segmented-controller" >
< li class = "selected" >
< a > Thing one< / a >
< / li >
< li >
< a > Thing two< / a >
< / li >
< li >
< a > Thing three< / a >
< / li >
< / ul >
< / nav >
<!-- Block button in standard bar fixed below top bar -->
< div class = "bar-standard bar-header-secondary" >
< a class = "button-block" > Block level button< / a >
< / div >
{% endhighlight %}
< / article >
<!-- Table views -->
< article class = "component" id = "table-views" >
< h3 class = "component-title" > Table views< / h3 >
< p class = "component-description" > Table views can be used for organizing data, showing collections of links or a series of controls.< / p >
< div class = "component-example component-example-fullbleed" >
< ul class = "table-view" >
< li class = "table-view-cell" > Item 1< / li >
< li class = "table-view-cell" > Item 2< / li >
< li class = "table-view-cell table-view-divider" > Divider< / li >
< li class = "table-view-cell" > Item 3< / li >
< / ul >
< / div >
{% highlight html %}
< ul class = "table-view" >
< li class = "table-view-cell" > Item 1< / li >
< li class = "table-view-cell table-view-cell" > Item 2< / li >
< li class = "table-view-divider" > Divider< / li >
< li class = "table-view-cell" > Item 3< / li >
< / ul >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Table view with chevrons< / h3 >
< p class = "component-description" > Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.< / p >
< div class = "component-example component-example-fullbleed" >
< ul class = "table-view" >
< li class = "table-view-cell" >
< a >
Item 1
< span class = "chevron" > < / span >
< / a >
< / li >
< li class = "table-view-cell" >
< a >
Item 2
< span class = "chevron" > < / span >
< / a >
< / li >
< li class = "table-view-cell" >
< a >
Item 3
< span class = "chevron" > < / span >
< / a >
< / li >
< / ul >
< / div >
{% highlight html %}
< ul class = "table-view" >
< li class = "table-view-cell" >
< a >
Item 1
< span class = "chevron" > < / span >
< / a >
< / li >
< li class = "table-view-cell" >
< a >
Item 2
< span class = "chevron" > < / span >
< / a >
< / li >
< li class = "table-view-cell" >
< a >
Item 3
< span class = "chevron" > < / span >
< / a >
< / li >
< / ul >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Table view with badges< / h3 >
< div class = "component-example component-example-fullbleed" >
< ul class = "table-view" >
< li class = "table-view-cell" > Item 1 < span class = "badge" > 4< / span > < / li >
< li class = "table-view-cell" > Item 2 < span class = "badge" > 1< / span > < / li >
< li class = "table-view-cell" > Item 3 < span class = "badge" > 5< / span > < / li >
< / ul >
< / div >
{% highlight html %}
< ul class = "table-view" >
< li class = "table-view-cell" > Item 1 < span class = "badge" > 4< / span > < / li >
< li class = "table-view-cell" > Item 2 < span class = "badge" > 1< / span > < / li >
< li class = "table-view-cell" > Item 3 < span class = "badge" > 5< / span > < / li >
< / ul >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Table view with badges and chevrons< / h3 >
< div class = "component-example component-example-fullbleed" >
< ul class = "table-view" >
< li class = "table-view-cell" >
< a >
Item 1
< span class = "chevron" > < / span >
< span class = "badge" > 4< / span >
< / a >
< / li >
< li class = "table-view-cell" >
< a >
Item 2
< span class = "chevron" > < / span >
< span class = "badge" > 1< / span >
< / a >
< / li >
< li class = "table-view-cell" >
< a >
Item 3
< span class = "chevron" > < / span >
< span class = "badge" > 5< / span >
< / a >
< / li >
< / ul >
< / div >
{% highlight html %}
< ul class = "table-view" >
< li class = "table-view-cell" >
< a >
Item 1
< span class = "chevron" > < / span >
< span class = "badge" > 4< / span >
< / a >
< / li >
< li class = "table-view-cell" >
< a >
Item 2
< span class = "chevron" > < / span >
< span class = "badge" > 1< / span >
< / a >
< / li >
< li class = "table-view-cell" >
< a >
Item 3
< span class = "chevron" > < / span >
< span class = "badge" > 5< / span >
< / a >
< / li >
< / ul >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Table view with buttons< / h3 >
< div class = "component-example component-example-fullbleed" >
< ul class = "table-view" >
< li class = "table-view-cell" > Item 1 < a class = "button" > Button< / a > < / li >
< li class = "table-view-cell" > Item 2 < a class = "button-primary" > Button< / a > < / li >
< li class = "table-view-cell" > Item 3 < a class = "button-positive" > Button< / a > < / li >
< li class = "table-view-cell" > Item 4 < a class = "button-negative" > Button< / a > < / li >
< / ul >
< / div >
{% highlight html %}
< ul class = "table-view" >
< li class = "table-view-cell" > Item 1 < a class = "button" > Button< / a > < / li >
< li class = "table-view-cell" > Item 2 < a class = "button-primary" > Button< / a > < / li >
< li class = "table-view-cell" > Item 3 < a class = "button-positive" > Button< / a > < / li >
< li class = "table-view-cell" > Item 4 < a class = "button-negative" > Button< / a > < / li >
< / ul >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Table view with toggles< / h3 >
< div class = "component-example component-example-fullbleed" >
< ul class = "table-view" >
< li class = "table-view-cell" >
Item 1
< div class = "toggle" >
< div class = "toggle-handle" > < / div >
< / div >
< / li >
< li class = "table-view-cell" >
Item 2
< div class = "toggle active" >
< div class = "toggle-handle" > < / div >
< / div >
< / li >
< li class = "table-view-cell" >
Item 3
< div class = "toggle" >
< div class = "toggle-handle" > < / div >
< / div >
< / li >
< / ul >
< / div >
{% highlight html %}
< ul class = "table-view" >
< li class = "table-view-cell" >
Item 1
< div class = "toggle" >
< div class = "toggle-handle" > < / div >
< / div >
< / li >
< li class = "table-view-cell" >
Item 2
< div class = "toggle active" >
< div class = "toggle-handle" > < / div >
< / div >
< / li >
< li class = "table-view-cell" >
Item 3
< div class = "toggle" >
< div class = "toggle-handle" > < / div >
< / div >
< / li >
< / ul >
{% endhighlight %}
< / article >
< article class = "component" >
< h3 class = "component-title" > Carded table views< / h3 >
< div class = "component-example" >
< div class = "card" >
< ul class = "table-view" >
< li class = "table-view-cell" > Item 1< / li >
< li class = "table-view-cell" > Item 2< / li >
< li class = "table-view-cell table-view-divider" > Divider< / li >
< li class = "table-view-cell" > Item 3< / li >
< li class = "table-view-cell" > Item 4< / li >
< / ul >
< / div >
< / div >
{% highlight html %}
< div class = "card" >
< ul class = "table-view" >
< li class = "table-view-cell" > Item 1< / li >
< li class = "table-view-cell" > Item 2< / li >
< li class = "table-view-cell table-view-divider" > Divider< / li >
< li class = "table-view-cell" > Item 3< / li >
< li class = "table-view-cell" > Item 4< / li >
< / ul >
< / div >
{% endhighlight %}
< / article >
<!-- Buttons -->
< article class = "component" id = "buttons" >
< h3 class = "component-title" > Buttons< / h3 >
< p class = "component-description" > Buttons come in four flavors and should be used for user actions.< / p >
< div class = "component-example" >
< a class = "button" > Button< / a >
< a class = "button-primary" > Button< / a >
< a class = "button-positive" > Button< / a >
< a class = "button-negative" > Button< / a >
< / div >
{% highlight html %}
< a class = "button" > Button< / a >
< a class = "button-primary" > Button< / a >
< a class = "button-positive" > Button< / a >
< a class = "button-negative" > Button< / a >
{% endhighlight %}
< / article >
< article class = "component" id = "buttonsCounts" >
< h3 class = "component-title" > Buttons with badges< / h3 >
< div class = "component-example" >
< a class = "button" > Badge button < span class = "badge" > 1< / span > < / a >
< a class = "button-primary" > Badge button < span class = "badge-primary" > 1< / span > < / a >
< a class = "button-positive" > Badge button < span class = "badge-positive" > 1< / span > < / a >
< a class = "button-negative" > Badge button < span class = "badge-negative" > 1< / span > < / a >
< / div >
{% highlight html %}
< a class = "button" > Badge button < span class = "badge" > 1< / span > < / a >
< a class = "button-primary" > Badge button < span class = "badge-primary" > 1< / span > < / a >
< a class = "button-positive" > Badge button < span class = "badge-positive" > 1< / span > < / a >
< a class = "button-negative" > Badge button < span class = "badge-negative" > 1< / span > < / a >
< a class = "button-outlined" > Badge button < span class = "badge badge-inverted" > 1< / span > < / a >
< a class = "button-outlined button-primary" > Badge button < span class = "badge-primary badge-inverted" > 1< / span > < / a >
< a class = "button-outlined button-positive" > Badge button < span class = "badge-positive badge-inverted" > 1< / span > < / a >
< a class = "button-outlined button-negative" > Badge button < span class = "badge-negative badge-inverted" > 1< / span > < / a >
{% endhighlight %}
< / article >
< article class = "component" id = "blockButtons" >
< h3 class = "component-title" > Block buttons< / h3 >
< div class = "component-example" >
< a class = "button-block" > Block button< / a >
< a class = "button-primary button-block" > Block button< / a >
< a class = "button-positive button-block" > Block button< / a >
< a class = "button-negative button-block" > Block button< / a >
< a class = "button-block button-outlined" > Block button< / a >
< a class = "button-primary button-block button-outlined" > Block button< / a >
< a class = "button-positive button-block button-outlined" > Block button< / a >
< a class = "button-negative button-block button-outlined" > Block button< / a >
< / div >
{% highlight html %}
< a class = "button-block" > Block button< / a >
< a class = "button-primary button-block" > Block button< / a >
< a class = "button-positive button-block" > Block button< / a >
< a class = "button-negative button-block" > Block button< / a >
< a class = "button-block button-outlined" > Block button< / a >
< a class = "button-primary button-block button-outlined" > Block button< / a >
< a class = "button-positive button-block button-outlined" > Block button< / a >
< a class = "button-negative button-block button-outlined" > Block button< / a >
{% endhighlight %}
< / article >
<!-- Segmented Controller -->
< article class = "component" id = "segmentedControllers" >
< h3 class = "component-title" > Segmented controller< / h3 >
< p class = "component-description" > Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "segmented-controller-item". Then, just give each content section an id and point the link in the segmented controller to that id.< / p >
< div class = "component-example" >
< ul class = "segmented-controller" >
< li class = "selected" >
< a href = "#item1mobile" > Thing one< / a >
< / li >
< li >
< a href = "#item2mobile" > Thing two< / a >
< / li >
< li >
< a href = "#item3mobile" > Thing three< / a >
< / li >
< / ul >
< div class = "card" >
< ul class = "table-view" >
< li id = "item1mobile" class = "table-view-cell segmented-controller-item selected" >
Item 1
< / li >
< li id = "item2mobile" class = "table-view-cell segmented-controller-item" >
Item 2
< / li >
< li id = "item3mobile" class = "table-view-cell segmented-controller-item" >
Item 3
< / li >
< / ul >
< / div >
< / div >
{% highlight html %}
< ul class = "segmented-controller" >
< li class = "selected" >
< a href = "#item1mobile" > Thing one< / a >
< / li >
< li >
< a href = "#item2mobile" > Thing two< / a >
< / li >
< li >
< a href = "#item3mobile" > Thing three< / a >
< / li >
< / ul >
< div class = "card" >
< ul class = "table-view" >
< li id = "item1mobile" class = "table-view-cell segmented-controller-item selected" >
Item 1
< / li >
< li id = "item2mobile" class = "table-view-cell segmented-controller-item" >
Item 2
< / li >
< li id = "item3mobile" class = "table-view-cell segmented-controller-item" >
Item 3
< / li >
< / ul >
< / div >
{% endhighlight %}
< / article >
<!-- Badges -->
< article class = "component" id = "badges" >
< h3 class = "component-title" > Badges< / h3 >
< p class = "component-description" > Badges come in four flavors and should be used to indicate "how many" of something there are.< / p >
< div class = "component-example" >
< span class = "badge" > 1< / span >
< span class = "badge-primary" > 2< / span >
< span class = "badge-positive" > 3< / span >
< span class = "badge-negative" > 4< / span >
< span class = "badge badge-inverted" > 1< / span >
< span class = "badge-primary badge-inverted" > 2< / span >
< span class = "badge-positive badge-inverted" > 3< / span >
< span class = "badge-negative badge-inverted" > 4< / span >
< / div >
{% highlight html %}
< span class = "badge" > 1< / span >
< span class = "badge-primary" > 2< / span >
< span class = "badge-positive" > 3< / span >
< span class = "badge-negative" > 4< / span >
< span class = "badge badge-inverted" > 1< / span >
< span class = "badge-primary badge-inverted" > 2< / span >
< span class = "badge-positive badge-inverted" > 3< / span >
< span class = "badge-negative badge-inverted" > 4< / span >
{% endhighlight %}
< / article >
<!-- Forms -->
< article class = "component" id = "forms" >
< h3 class = "component-title" > Forms< / h3 >
< div class = "component-example" >
< form >
< input type = "text" placeholder = "Full name" >
< input type = "search" placeholder = "Search" >
< textarea rows = "5" > < / textarea >
< a class = "button-positive button-block" > Choose existing< / a >
< / form >
< / div >
{% highlight html %}
< form >
< input type = "text" placeholder = "Full name" >
< input type = "search" placeholder = "Search" >
< textarea rows = "5" > < / textarea >
< a class = "button-positive button-block" > Choose existing< / a >
< / form >
{% endhighlight %}
< / article >
<!-- Form with input group -->
< article class = "component" id = "formsWithInputGroup" >
< h3 class = "component-title" > Form with input group< / h3 >
< div class = "component-example component-example-fullbleed" >
< form class = "input-group" >
< input type = "text" placeholder = "Full name" >
< input type = "email" placeholder = "Email" >
< input type = "text" placeholder = "Username" >
< / form >
< / div >
{% highlight html %}
< form class = "input-group" >
< input type = "text" placeholder = "Full name" >
< input type = "email" placeholder = "Email" >
< input type = "text" placeholder = "Username" >
< / form >
{% endhighlight %}
< / article >
<!-- Form with input group and labels -->
< article class = "component" id = "formsWithInputGroupAndLabels" >
< h3 class = "component-title" > Form with input group and labels< / h3 >
< div class = "component-example component-example-fullbleed" >
< form class = "input-group" >
< div class = "input-row" >
< label > Full name< / label >
< input type = "text" placeholder = "Mister Ratchet" >
< / div >
< div class = "input-row" >
< label > Email< / label >
< input type = "email" placeholder = "ratchetframework@gmail.com" >
< / div >
< div class = "input-row" >
< label > Username< / label >
< input type = "text" placeholder = "goRatchet" >
< / div >
< / form >
< / div >
{% highlight html %}
< form class = "input-group" >
< div class = "input-row" >
< label > Full name< / label >
< input type = "text" placeholder = "Mister Ratchet" >
< / div >
< div class = "input-row" >
< label > Email< / label >
< input type = "email" placeholder = "ratchetframework@gmail.com" >
< / div >
< div class = "input-row" >
< label > Username< / label >
< input type = "text" placeholder = "goRatchet" >
< / div >
< / form >
{% endhighlight %}
< / article >
<!-- Toggle -->
< article class = "component" id = "toggles" >
< h3 class = "component-title" > Toggles< / h3 >
< p class = "component-description" > Toggles can be used by sliding or tapping the control.< / p >
< div class = "component-example" >
< div class = "toggle active" >
< div class = "toggle-handle" > < / div >
< / div >
< div class = "toggle" >
< div class = "toggle-handle" > < / div >
< / div >
< / div >
{% highlight html %}
< div class = "toggle active" >
< div class = "toggle-handle" > < / div >
< / div >
< div class = "toggle" >
< div class = "toggle-handle" > < / div >
< / div >
{% endhighlight %}
< p class = "component-description" > Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.< / p >
{% highlight js %}
// Only needed if you want to fire a callback
document
.querySelector('#myToggle')
.addEventListener('toggle', myFunction)
{% endhighlight %}
< / article >
<!-- Popovers -->
< article class = "component" id = "popovers" >
< h3 class = "component-title" > Popovers< / h3 >
< div class = "component-example" >
< div id = "popover" class = "popover" >
< header class = "bar-nav" >
< a class = "button-link pull-left" >
Left
< / a >
< a class = "button-link pull-right" >
Right
< / a >
< h3 class = "title" > Popover title< / h3 >
< / header >
< ul class = "table-view" >
< li class = "table-view-cell" > Item1< / li >
< li class = "table-view-cell" > Item2< / li >
< li class = "table-view-cell" > Item3< / li >
< li class = "table-view-cell" > Item4< / li >
< li class = "table-view-cell" > Item5< / li >
< li class = "table-view-cell" > Item6< / li >
< li class = "table-view-cell" > Item7< / li >
< li class = "table-view-cell" > Item8< / li >
< / ul >
< / div >
< / div >
{% highlight html %}
< div id = "popover" class = "popover" >
< header class = "bar-nav" >
< a class = "button-link pull-left" >
Left
< / a >
< a class = "button-link pull-right" >
Right
< / a >
< h3 class = "title" > Popover title< / h3 >
< / header >
< ul class = "table-view" >
< li class = "table-view-cell" > Item1< / li >
< li class = "table-view-cell" > Item2< / li >
< li class = "table-view-cell" > Item3< / li >
< li class = "table-view-cell" > Item4< / li >
< li class = "table-view-cell" > Item5< / li >
< li class = "table-view-cell" > Item6< / li >
< li class = "table-view-cell" > Item7< / li >
< li class = "table-view-cell" > Item8< / li >
< / ul >
< / div >
{% endhighlight %}
< p class = "component-description" > Popovers are designed to only fire from < a href = "#bars" > title bars< / a > . Set the value of the title href to the id of a popover, like so:< / p >
{% highlight html %}
< header class = "bar-nav" >
< a href = "#myPopover" >
< h1 class = "title" > Popover title< / h3 >
< / a >
< / header >
{% endhighlight %}
< / article >
<!-- Modals -->
< article class = "component" id = "modals" >
< h3 class = "component-title" > Modals< / h3 >
< div class = "component-example" >
< a href = "#myModalexample" class = "button" > Open modal< / a >
< div id = "myModalexample" class = "modal" >
< header class = "bar-nav" >
< h1 class = "title" > Modal< / h1 >
< a class = "button" href = "#myModalexample" >
Close
< / a >
< / header >
< div class = "content content-padded" >
< p > The contents of my modal< / p >
< / div >
< / div >
< / div >
{% highlight html %}
< a href = "#myModalexample" class = "button" > Open modal< / a >
< div id = "myModalexample" class = "modal" >
< header class = "bar-nav" >
< h1 class = "title" > Modal< / h1 >
< a class = "button" href = "#myModalexample" >
Close
< / a >
< / header >
< div class = "content content-padded" >
< p > The contents of my modal< / p >
< / div >
< / div >
{% endhighlight %}
< p class = "component-description" > Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.< / p >
< / article >
<!-- Slider -->
< article class = "component" id = "sliders" >
< h3 class = "component-title" > Sliders< / h3 >
< p class = "component-description" > Can be used with any number of slides with any type of content.< / p >
< div class = "component-example component-example-fullbleed" >
< div class = "slider" id = "mySlider" >
< ul >
< li >
< img src = "{{ page.base_url }}docs-assets/img/slide-1.jpg" >
< span class = "slide-text" > ← Slide me< / span >
< / li >
< li >
< img src = "{{ page.base_url }}docs-assets/img/slide-2.jpg" >
< / li >
< li >
< img src = "{{ page.base_url }}docs-assets/img/slide-3.jpg" >
< / li >
< / ul >
< / div >
< / div >
{% highlight html %}
< div class = "slider" id = "mySlider" >
< ul >
< li >
< img src = "{{ page.base_url }}docs-assets/img/slide-1.jpg" >
< span class = "slide-text" > ← Slide me< / span >
< / li >
< li >
< img src = "{{ page.base_url }}docs-assets/img/slide-2.jpg" >
< / li >
< li >
< img src = "{{ page.base_url }}docs-assets/img/slide-3.jpg" >
< / li >
< / ul >
< / div >
{% endhighlight %}
< p class = "component-description" > Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.< / p >
{% highlight js %}
// Only needed if you want to fire a callback
document
.querySelector('#mySlider')
.addEventListener('slide', myFunction)
{% endhighlight %}
< / article >
<!-- Push docs -->
< article class = "component" id = "push" >
< h3 class = "component-title" > Push< / h3 >
< p class = "component-description" > Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.< / p >
{% highlight html %}
<!-- A one.html link -->
< a href = "two.html" > Two< / a >
{% endhighlight %}
< p class = "component-note" > This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.< / p >
< p class = "component-description" > Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: < code > fade< / code > , < code > slide-in< / code > , or < code > slide-out< / code > .< / p >
{% highlight html %}
<!-- An one.html link that animates to two.html -->
< a href = "two.html" data-transition = "fade" > Two< / a >
{% endhighlight %}
< p class = "component-description" > A working version of push:< / p >
< div class = "component-example component-example-fullbleed" >
< header class = "bar-nav" >
< h1 class = "title" > Push< / h1 >
< / header >
< div class = "content" >
< div class = "card" >
< ul class = "table-view" >
< li class = "table-view-cell" >
< a href = "{{ page.base_url }}two.html" data-transition = "slide-in" >
Load new page with push
< / a >
< span class = "chevron" > < / span >
< / li >
< / ul >
< / div >
< / div >
< / div >
{% highlight html %}
< header class = "bar-nav" >
< h1 class = "title" > Push< / h1 >
< / header >
< div class = "content" >
< div class = "card" >
< ul class = "table-view" >
< li class = "table-view-cell" >
< a href = "{{ page.base_url }}two.html" data-transition = "slide-in" >
Load new page with push
< / a >
< span class = "chevron" > < / span >
< / li >
< / ul >
< / div >
< / div >
{% endhighlight %}
< p class = "component-description" > Have a link you don't want to intercepted by push? Try this:< / p >
{% highlight html %}
<!-- Use data - ignore="push" to prevent the push.js interception -->
< a href = "http://www.google.com" data-ignore = "push" > Google< a >
{% endhighlight %}
< p class = "component-description" > Push.js binds an event to the document that returns a detail object and can be used to fire a callback.< / p >
{% highlight js %}
// Only needed if you want to fire a callback
window.addEventListener('push', myFunction);
{% endhighlight %}
< / article >
< / div >
< div class = "phone-column column units-2 lg-units-5" >
<!-- In iPhone examples -->
< div class = "iphone" >
< div class = "iphone-content" >
< div id = "iwindow" >
< header class = "bar-nav" >
< h1 class = "title" > Title< / h1 >
< / header >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
