Dart Widgets

A collection of Components and Effects, written in Dart, designed to make it easier to build rich web appplications.

Components

Reusable elements. Based on the web-ui library sponsored by the Dart team.

web-ui is an implementation of the W3C Draft spec for Web Components along with a set of related technologies.

Accordion

Item 1

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.

Item 2

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.

Item 3

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.

<x-accordion>
  <x-expander>
    <header>Item 1</header>
    <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>
  </x-expander>
  <x-expander>
    <header>Item 2</header>
    <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>
  </x-expander>
  <x-expander>
    <header>Item 3</header>
    <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>
  </x-expander>
</x-accordion>

Alert

Alert follows the same convention as its inspiration in Bootstrap. Clicking on an element with the attribute data-dismis='alert' will cause the element to close.

Holy guacamole! Best check yo self, you're not looking too good.
<x-alert>
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</x-alert>
A description of the first image.
A description of the second image.
A description of the third image.
<x-carousel>
  <figure>
    <img src="//twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg">
    <figcaption>A description of the first image.</figcaption>
  </figure>
  <figure class="active">
    <img src="//twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg">
    <figcaption>A description of the second image.</figcaption>
  </figure>
  <figure>
    <img src="//twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg">
    <figcaption>A description of the third image.</figcaption>
  </figure>
</x-carousel>
  • This is some
  • content
<x-dropdown>
  <button class="btn">Click me!</button>
  <ul>
    <li>This is some</li>
    <li>content</li>
  </ul>
</x-dropdown>

Expander

Click to toggle expand/collapse
  • This is some
  • content
<x-expander>
  <header>Click to toggle expand/collapse</header>
  <ul>
    <li>This is some</li>
    <li>content</li>
  </ul>
</x-expander>

HeaderedContent

This is the header
  • This is some
  • content
<x-headered-content>
  <header>This is the header</header>
  <ul>
    <li>This is some</li>
    <li>content</li>
  </ul>
</x-headered-content>

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

Similiar to Alert, you can add elements to Modal which cause it to hide by adding the data attribute data-dismiss="modal".

The Modal component leverages the ModalManager effect.

Launch demo modal
<!-- Button to trigger modal -->
<a role="button" class="btn btn-primary" on-click="showModal();">Launch demo modal</a>
<!-- Modal -->
<x-modal>
  <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>
</x-modal>

Swap

Swap 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.

Tabs and Carousel both use this component.

Tabs

Tab 1
Tab 2
Tab 3

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.

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.

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.

<x-tabs>
  <header data-target="tab1">Tab 1</header>
  <header data-target="tab2" data-active="active">Tab 2</header>
  <header data-target="tab3">Tab 3</header>
  <p id="tab1">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>
</x-tabs>

Effects

ModalManager

ModalManager is inspired by the modal helper in Bootstrap.

It has two static methods show and hide that both take the same paramaters as corresponding methods in ShowHide.

ModalManager controls the display of the provided element while also creating a dark backdrop on the page. Any element used should have a fixed position, a z-index greater than 1040, and an initial display of none.

ShowHide

ShowHide is an effect inspired by the basic effects in jQuery. Provide an element and an action--show, hide, toggle--and the element's display will change accordingly. Custom effects, duration, and easing values can also be provided.

At the moment, all of the provided effects leverage CSS3 transitions. Creating new effects is easy.

ShowHide is used by Expander and DropDown to animate their content. It is also used by Swapper

BOT Logo

Swapper

Swapper is an effect that builds on top of ShowHide to manage the visibility of a number of children contained in a parent element.

Provide a parent element and either a target child element or an index to a target child element and Swapper will display the target while hiding other visible elements using the provided effects, duration, and timing.

Swapper is encapsulated into a component by Swap.