akserg / angular2-ui-bootstrap Goto Github PK

Swap Component designed to be composed by other components. It exposes the functionality of the Swap Effect as a simple container element with corresponding methods to swap between child elements via code. Tabs Component and Carousel Component both use this component.

Shrink Effect plays with max-height and max-width of an Html Element to shrink it.

Spin Effect helps organize rotation effect on an Html Element with -webkit-transform

CSS3 Transition Effect extends Visual Effect class to change transitionProperty and 'transitionDuration' of an Html Element to make an animation happens.

TSC generate next issues:

src\components\visible-component.spec.ts(31,35): error TS2339: Property 'toRx' does not exist on type 'EventEmitter<string>'.
src\components\visible-component.spec.ts(41,35): error TS2339: Property 'toRx' does not exist on type 'EventEmitter<string>'.
src\components\visible-component.spec.ts(51,35): error TS2339: Property 'toRx' does not exist on type 'EventEmitter<string>'.

Collapsible Component uses Visible Effect and Shrink Effect to reach collapses of an Html Element. The header element for Collapse Component is a child element with class accordion-heading. The rest of the children are rendered as content. Collapse Component listens for click events and toggles visibility of content if the click target has attribute data-toggle="collapse".

Tabs Component is togglable tabs. The tab headers are processed as all child <li> elements in content. The rest of the child elements are considered tab content. Tabs Component 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.

Accordion Component wraps a set of Collapsible Components.

Visible Effect Manager provide following methods:

• show,
• hide,
• toggle,
• begin
  to change element's display accordingly.

Custom effects, duration, and easing values can be provided via begin method.

The Modal Component leverages the Modal Effect.
Modal Component is hidden when added to a page. It can be displayed by calling the show method.
Similar to Alert Component, elements with the attribute data-dismiss="modal" will close Modal Component when clicked.

Slide Effect displays en Html Element with sliding motion.

Visible Component has two states:

• visible
• 'invisible. Following methods help to make anyVisible Component` to be visible or hidden:
• show
• hide
• toggle

Fade Effect manages opacity style property to reach faddiness of element.

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

Door Effect changes -webkit-transform style property of an Html Element.

CSS 3 Effects is name based enumeration of CSS 3 effect like:

• linear
• ease
• ease-in
• ease-in-out
• ease-out

Carousel Component allows moving back and forth through a set of child elements. Carousel Component leverages the Swap Component to render the transition between items.

Demo must show all components implemented on the moment of release.

Scale Effect changes the size of an Html Element with -webkit-transform-origin.

Visible Effect changes element's display to make it visible or hidden after specific amout of time

02 12 2015 08:48:12.698:WARN [web-server]: 404: /angular2/src/core/dom/browser_adapter
Chrome 46.0.2490 (Windows 7 0.0.0) ERROR
Error: XHR error (404 Not Found) loading http://localhost:9876/angular2/src/core/dom/browser_adapter

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

Alert Component displays information marked as:

• alert-success,
• alert-info,
• alert-warning,
• alert-danger.
  Clicking on a nested element with the attribute data-dismiss='alert' will cause Alert Component to close.