AccordionWidget

AccordionWidget wraps a set of CollapseWidget elements and ensures only one is visible at a time.

See CollapseWidget for details on how content is interpreted.

<accordion-widget>
  <collapse-widget>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse">Item 1</a>
    </div>
    <p>Item 1 content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </collapse-widget>
  <collapse-widget>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse">Item 2</a>
    </div>
    <p>Item 2 content - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </collapse-widget>
  <collapse-widget>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse">Item 3</a>
    </div>
    <p>Item 3 content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </collapse-widget>
</accordion-widget>

AlertWidget

AlertWidget follows the same convention as its inspiration in Bootstrap.

Clicking on a nested element with the attribute data-dismiss='alert' will cause AlertWidget to close.

<alert-widget>
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</alert-widget>

CarouselWidget

CarouselWidget allows moving back and forth through a set of child elements.

It is based on a similar component in Bootstrap.

CarouselWidget leverages the SwapWidget to render the transition between items.

<carousel-widget>
  <figure>
    <img src="//getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-01.jpg">
    <figcaption>A description of the first image.</figcaption>
  </figure>
  <figure class="active">
    <img src="//getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-02.jpg">
    <figcaption>A description of the second image.</figcaption>
  </figure>
  <figure>
    <img src="//getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-03.jpg">
    <figcaption>A description of the third image.</figcaption>
  </figure>
</carousel-widget>

CollapseWidget

CollapseWidget uses a content model similar to collapse functionality in Bootstrap.

The header element for CollapseWidget is a child element with class accordion-heading.

The rest of the children are rendered as content.

CollapseWidget listens for click events and toggles visibility of content if the click target has attribute data-toggle="collapse".

<collapse-widget>
  <div class="accordion-heading">
    <a class="accordion-toggle" data-toggle="collapse">Click to toggle expand/collapse</a>
  </div>
  <ul>
    <li>This is some</li>
    <li>content</li>
  </ul>
</collapse-widget>

DropdownWidget

DropdownWidget aligns closely with the model provided by the dropdown functionality in Bootstrap.

DropdownWidget content is inferred from all child elements that have class dropdown-menu. Bootstrap defines a CSS selector for .dropdown-menu with an initial display of none.

DropdownWidget listens for click events and toggles visibility of content if the click target has attribute data-toggle="dropdown".

Bootstrap also defines a CSS selector which sets display: block; for elements matching .open > .dropdown-menu. When DropdownWidget opens, the class open is added to the inner element wrapping all content. Causing child elements with class dropdown-menu to become visible.

<h3>A a button</h3>
<dropdown-widget>
  <button class="btn" data-toggle="dropdown">Click me!</button>
  <ul class="dropdown-menu">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
    <li class="divider"></li>
    <li><a>Separated link</a></li>
  </ul>
</dropdown-widget>
<h3>In a nav</h3>
<!-- Because Bootstrap css assumes a certain hierarchy of items in a nav
.navbar .nav > li > a
To use a DropDown element, one has to copy and modify Bootstrap styles to
apply to x-dropdown
-->
<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <div class="nav">
        <dropdown-widget>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nav Menu 1<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </dropdown-widget>
        <dropdown-widget>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nav Menu 2<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="nav-header">Header 1</li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li class="nav-header">Header 2</li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
          </ul>
        </dropdown-widget>
      </div>
    </div>
  </div>
</div>

ModalWidget

When added to a page, ModalWidget is hidden. It can be displayed by calling the show method.

Similar to AlertWidget, elements with the attribute data-dismiss="modal" will close ModalWidget when clicked.

Content within ModalWidget is placed in a div with class modal so related styles from Bootstrap are applied.

The ModalWidget component leverages the ModalManager effect.

<!-- Button to trigger modal -->
<a role="button" class="btn btn-primary" id="modalOpenButton">Launch demo modal</a>
<!-- Modal -->
<modal-widget id="modal_example">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</modal-widget>

SwapWidget

SwapWidget is a low-level component designed to be composed by other components. It exposes the functionality of the Swapper effect as a simple container element with corresponding methods to swap between child elements via code.

TabsWidget and CarouselWidget both use this component.

TabsWidget

TabsWidget is based on the analogous feature in Bootstrap.

The tab headers are processed as all child <li> elements in content. The rest of the child elements are considered tab content.

TabsWidget responds to click events from any child with data-toggle="tab" or data-toggle="pill".

The target content id is either the value of data-target on the clicked element or the anchor in href.

<tabs-widget>
  <li class="active">
    <a href="#tab1" data-toggle="tab">Tab 1</a>
  </li>
  <li>
    <a href="#tab2" data-toggle="tab">Tab 2</a>
  </li>
  <li>
    <a href="#tab3" data-toggle="tab">Tab 3</a>
  </li>
  <p id="tab1" class="active">Tab 1 content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p id="tab2">Tab 2 content - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p id="tab3">Tab 3 content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</tabs-widget>