Dart Widgets

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

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

Accordion wraps a set of Collapse elements and ensures only one is visible at a time.

See Collapse for details on how content is interpreted.

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


      

Alert

Alert follows the same convention as its inspiration in Bootstrap.

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

Holy guacamole! Best check yo self, you're not looking too good.


      

Carousel

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

It is based on a similar component in Bootstrap.

Carousel leverages the Swap component to render the transition between items.

A description of the first image.
A description of the second image.
A description of the third image.

      

Collapse

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

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

The rest of the children are rendered as content.

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

  • This is some
  • content

      

Dropdown

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

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

Dropdown 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 Dropdown opens, the class open is added to the inner element wrapping all content. Causing child elements with class dropdown-menu to become visible.


      

Modal

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

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

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

The Modal component leverages the ModalManager effect.

Launch demo 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

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

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

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

    
    
          

    Effects

    A set of behaviors that can be used directly with elements on a web page.

    Effects are used by Components to offer easy, declarative access to these features.

    ModalManager

    ModalManager is inspired by the modal helper in Bootstrap.

    It has two static methods show and hide that both take the same parameters 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 Collapse 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.