A collection of Components and Effects, written in Dart, designed to make it easier to build rich web applications.
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 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 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.
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.
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 attributedata-toggle="collapse"
.
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 ofnone
.Dropdown listens for
click
events and toggles visibility of content if the click target has attributedata-toggle="dropdown"
.Bootstrap also defines a CSS selector which sets
display: block;
for elements matching.open > .dropdown-menu
. When Dropdown opens, the classopen
is added to the inner element wrapping all content. Causing child elements with classdropdown-menu
to become visible.
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.
One fine body…
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 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"
ordata-toggle="pill"
.The target content id is either the value of
data-target
on the clicked element or the anchor inhref
.
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.
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 is inspired by the modal helper in Bootstrap.
It has two static methods
show
andhide
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 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.
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.