appbar View Demo »

An x-appbar is a simple component emulating the standard layout of a header seen at the top of a mobile application.

Attributes

heading

Edits the large header text.

subheading

Edits the small optional subheader text.

Getters

heading

Gets the large header text.

subheading

Gets the small optional subheader text.

Setters

heading

Sets the large header text.

subheading

Sets the small optional subheader text

calendar View Demo »

A component acting as a calendar widget that can be manipulated with minimal user-written code/layout.

Attributes

controls

Controls the visibility of the calendar's navigation controls; usage is similar to the 'controls' attribute of <video> elements

multiple

Controls whether or not multiple calendar dates can be chosen simultaneously

span

Specifies the number of months displayed at once by the calendar

view

Specifies the Date to focus the calendar display on. For example, a view of Dec 25 2013 and a span of 3 would result in a calendar displaying the months of Nov 2013, Dec 2013, and Jan 2014

chosen

Specifies the date or dates that are toggled as chosen on the calendar. Can be specified as either a singular parsable date string or as a JSON string representing a list of both singular dates and [Date, Date] lists of the start and end date for a range of dates

notoggle

If set, the default date-toggling behavior of the UI is disabled. However, dates can still be programmatically chosen/toggled.

Methods

render([preserveNodes])

Can be called to manually force a refresh of the calendar's HTML elements. Optionally takes a preserveNodes parameter to indicate that the existing DOM elements in the calendar should be not recreated (Useful when the viewing window of the calendar does not need to change)

prevMonth()

Go back one month by updating the 'view' attribute of the calendar.

nextMonth()

Advance one month forward by updating the 'view' attribute of the calendar.

toggleDateOn(dateObjToToggle, [append])

Sets the day corresponding to the given Date object as chosen. Depending on what is given for the append parameter, this either overrides the current chosen dates if append is falsy/not given, or adds to the list of chosen dates, if append is truthy. Also updates the 'chosen' attribute of the calendar

toggleDateOff(dateObjToToggle)

Removes the given date from the calendar's list of chosen dates. Also updates the 'chosen' attribute of the calendar

toggleDate(dateObjToToggle, [appendIfAdd])

Alternates the chosen status of the given date. Takes an 'appendIfAdded' parameter to determine how the new date replaces existing chosen dates if it is toggled on. Also updates the 'chosen' attribute of the calendar

hasVisibleDate(dateToCheck, [excludeBadMonths])

Determines whether or not the given date is in the visible calendar display of dates. Optionally ignores dates outside of the span of fully-visible months.

Events

datetoggleon

Fired when the UI sets a day as chosen. Passes the following extra datamap in e.detail: 'date' is the actual Date object corresponding to the chosen day, and 'iso' is the ISO-formatted string representation of the date

datetoggleoff

Fired when the UI sets a day as unchosen. Passes the following extra datamap in e.detail: 'date' is the actual Date object corresponding to the unchosen day, and 'iso' is the ISO-formatted string representation of the date

datetap

Fired when the user taps a day without starting a drag-paint over other dates. Passes the following extra datamap in e.detail: 'date' is the actual Date object corresponding to the unchosen day, and 'iso' is the ISO-formatted string representation of the date

Getters

firstVisibleMonth

Returns the Date corresponding to the first day in the first fully-visible month displayed by the calendar

lastVisibleMonth

Returns the Date corresponding to the first day in the last fully-visible month displayed by the calendar

customRenderFn

Returns the currently set custom rendering function, if any is set. (See 'customRenderFn' setter documentation for further details)

labels

The labels of a calendar are managed using a datamap of strings. This allows localizers/translators to edit the labels of the calendar.
This getter returns a deepcopy of the labels datamap.

controls

Returns true if the 'controls' attribute is set and false otherwise

multiple

Returns true if the 'multiple' attribute is set and false otherwise

span

Returns the value of the 'span' attribute

view

Returns the value of the 'view' attribute in form of a Date object if available and null of otherwise

chosen

Returns the value of the 'chosen' attribute as a Date object/null if the 'multiple' attribute is false, and as a list of singular dates and [Date,Date] ranges of dates if the 'multiple' attribute is true

disableUIToggle

Returns true if the 'disable-ui-toggle' attribute is set and false otherwise

Setters

customRenderFn

Sets an additional function to call on individual days when rendering the calendar. Will be called with three parameters: the day's DOM element, the JS Date corresponding to the day, and the ISO-formatted string version of the date. This is useful when styles need to be more dynamically flexible than the default. IMPORTANT NOTE: because this is intended as an additional callback to be used in rendering, the function itself should not modify attributes in a way that would require a re-render of the calendar, or infinite recursion can result.

labels

When called, will edit the labels of the calendar.

The set value should be a JS object that can contain any of the following key:value pairs:
- 'prev': a string to display on the previous-month navigation button
- 'next': a string to display on the next-month navigation button
- 'months': an array of 12 strings, where the first string corresponds to January, the second to February, etc, all the way up to December.
- 'weekdays': an array of 7 strings, where the first string corresponds to Sunday, the second to Monday, etc, all the way up to Saturday.

If the new data given does not have any of these keys, that corresponding label will remain unchanged.

controls

If true, sets the 'controls' attribute. Otherwise, removes the 'controls' attribute.

multiple

If true, sets the 'multiple' attribute. Otherwise, removes the 'multiple' attribute.

span

Sets the value of the 'span' attribute

view

Sets the value of the 'view' attribute. Can be given either a JS Date object or a parsable string corresponding to a date

chosen

Sets the value of the 'chosen' attribute. Can always take either a JS Date Object or a parsable date string. If multiple is true, can also take a list of singular Dates/parasable date string and [Date, Date] lists of the start and end points of a range of date, as well a JSON string corresponding to such a list.

disableUIToggle

If true, sets the 'disable-ui-toggle' attribute. Otherwise, removes the 'disable-ui-toggle' attribute.

deck View Demo »

A box in which <x-card> elements can be cycled independently of order with a variety of different transitions

Attributes

transition-type

Defines the kind of transition animation that is used when cycling cards. Valid options: 'scrollLeft', 'scrollUp', 'scrollRight', 'scrollDown', 'flipX', 'flipY', 'coverLeft', 'coverUp', 'coverRight', 'coverDown', 'uncoverLeft', 'uncoverUp', 'uncoverRight', 'uncoverDown', 'none'. Defaults to 'scrollLeft'

selected-index

Defines which card index will be displayed. If set in the initial markup, this will initialize the given card as the selected card. Defaults to 0.

history-cap

Defines how many cards to keep in history to allow developers to simply return to the previously displayed card. Defaults to 10.

x-card: transition-override

If transition-override is defined on a card, the animation used to transition to this card will be what is given here instead of the deck's animation. Valid options are the same as the <x-deck>'s transition-type attribute.

Methods

shuffleTo([progressType])

Transitions to the x-card at the given index. If given a progressType of 'forward', will perform the forwards animation. If given 'reverse', will performs the reverse animation. If the progressType is 'auto' or omitted, will perform forward animation if going to a larger index, and will perform reverse animation if going to a smaller index.

shuffleNext([progressType])

Transitions to the next x-card in the deck. Takes an optional progressType of 'forward', 'reverse', or 'auto'. Also takes an optional callback function.

shufflePrev([progressType])

Transitions to the previous x-card in the deck. Takes an optional progressType of 'forward', 'reverse', or 'auto'. Also takes an optional callback function.

getAllCards()

Returns a list of all x-card elements in the deck.

getSelectedCard()

Returns the currently selected x-card in the deck.

getCardIndex(cardEl)

Given an x-card element, returns its index in this deck, if it is a child element.

getCardAt(index)

Returns the x-card at the given index.

historyBack([progressType])

Transitions to the previously displayed card in the deck's history. progressType parameter acts similarly to shuffleTo's progressType parameter.

historyForward([progressType])

Transitions to the more recently displayed card in the deck's history. progressType parameter acts similarly to shuffleTo's progressType parameter.

Events

shufflestart

A shufflestart event is fired by the <x-deck> element when, during the process of transitioning between cards, the two cards are in position to start animating, but have not yet begun the actual animation.

The event also receives the following custom datamap in `e.detail`:
{
    'oldCard': the previously selected x-card node that the transition is animating away from,
    'newCard': the x-card node that the transition is animating towards
}

shuffleend

A `shuffleend` event is fired by the &lt;x-deck&gt; element when a cycle from one card to another has been completed.

**Note:** Much like the `transitionend` event, this is not guaranteed to fire after every transition that fires a shufflestart. For example, if two transitions are queued up, with the second occurring during the first transition, only the second transition's `shuffleend` will fire, due to the first transition being interrupted.

The event also receives the following custom datamap in `e.detail`:

{
    'oldCard': the previously selected x-card node that the transition is animating away from,
    'newCard': the x-card node that the transition is animating towards
}

cardadd

Fired by the x-deck whenever an x-card is added.

Receives the following datamap in `e.detail`:

{
    'card': the x-card that was just added
}

cardremove

Fired by the x-deck whenever an x-card is removed.

Receives the following datamap in `e.detail`:

{
    'card': the x-card that was just removed
}

show

If an <x-card> element receives a 'show' event, the deck will automatically transition to the card that received the event.
This event is not fired by the x-deck itself.

Getters

numCards

Returns the number of cards currently in the deck.

selectedCard

Returns the <x-card> currently displayed in the deck.

cards

Returns an array of all <x-card>s in the deck.

transitionType

Returns the value of the 'transition-type' attribute.

selectedIndex

Returns the value of the 'selected-index' attribute.

historyCap

Returns the value of the 'history-cap' attribute.

currHistorySize

Returns the number of cards currently stored in the deck's history.

currHistoryIndex

Returns the deck's current index in its history stack.

transitionOverride (on element)

Returns the transition override of the card.

Setters

transitionType

Sets the value of the 'transition-type' attribute.

selectedIndex

Sets the value of the 'selected-index' attribute.

historyCap

Sets the value of the 'history-cap' attribute.

transitionOverride (on element)

Sets the transition override of the card.

flipbox View Demo »

Flips between two content elements with a CSS Animation, similar to flipping a playing card. The front face defaults to the first direct child element of the <x-flipbox>, and the back face defaults to the last direct child element.

Attributes

direction

Indicates which direction the flip-animation swivels towards. Valid options are 'right', 'left', 'up', and 'down'. Defaults to 'left'.

flipped

Boolean attribute indicating whether the back face of the flipbox is showing or not.

Methods

toggle()

Flips the card to its opposite face.

showFront()

Force the flipbox to flip to its front face.

showBack()

Force the flipbox to flip to its back face.

Events

flipend

The flipbox fires a flipend event whenever it fully finishes a flipping animation. This will not fire if the flipping animation is interrupted before completion.

show

If either the front face or the back face of the flipbox receives a show event, the flipbox will automatically show that side.
Note: this event is not fired by the flipbox itself.

Getters

direction

Returns the current flip direction.

flipped

Returns true if flipped.

Setters

direction

The direction to flip. Valid values are right, left, up, and down.

flipped

Set whether the back face of the flipbox is showing or not.

layout View Demo »

A simple layout element that automatically stretches to fill the parent, with optional toggleable header and footer elements.

Attributes

maxcontent

If set, the maxcontent attribute specifies that any header/footer in the layout should be minimized to give the main content full screen space.

Getters

maxcontent

Returns whether the 'maxcontent' attribute is set or not.

Setters

maxcontent

Sets the 'maxcontent' attribute.

slidebox View Demo »

A container that allows animated transitions between content panes, displaying all slides along the way. Think of the component as a filmstrip of slides that moves around in a viewport.

Attributes

orientation

Slide axis. Set as 'x' for horizontal animations, and set as 'y' for vertical animations.

Methods

slideTo

Slides to a specific element index.

slideNext

Slides to the next slide element.

slidePrevious

Slides to the previous slide element.

Events

slideend

Fires at the end of each slide transition.

Setters

orientation

Sets the slide axis as either 'x' or 'y'.

slider View Demo »

Polyfill on top of input type='range', providing a consistent UI regardless of whether type='range' is supported or not.

Attributes

polyfill

If set, the input is 'replaced' with our polyfill slider's event handlers and graphics.

max

Sets the maximum of the slider's range

min

Sets the minimum of the slider's range

step

Sets the step value of the slider's range

Events

change

Fired when the value of the slider changes

input

Fired the user attempts to change the value of the slider (such as with the mouse).

focus

Fired when the slider is focused on

blur

Fired when the slider loses focus

Getters

inputElem

Returns the DOM element of the actual underlying <input> element

max

Gets the maximum of the slider's range (as a number, not a string)

min

Gets the minimum of the slider's range (as a number, not a string)

step

Gets the step value of the slider's range (as a number, not a string)

polyfill

Returns whether the slider is in polyfill mode or not.

Setters

polyfill

If set, the input is 'replaced' with our polyfill slider's event handlers and graphics.

max

Sets the maximum of the slider's range

min

Sets the minimum of the slider's range

step

Sets the step value of the slider's range

tabbar View Demo »

Tab bars are used to display an app-level navigation/tabbing bar (usually at the bottom of the UI) that shows different content depending on which tab is selected.

Attributes

target-event

Sets a custom event type for the tabbar to fire on selected elements, instead of the default of 'show'. Can also be applied on x-tabbar-tabs instead to further provide granular control.

Events

show

The default event that a x-tabbar-tab will fire on its selected elements if not overridden by 'target-event'

Getters

tabs

Returns a list of the <x-tabbar-tab>s that are in the x-tabbar

targetEvent

Returns the name of the event any tabs that don't have overrides will be firing.

targetEvent (on x-tabbar-tab)

Returns the name of the event a single tabbar-tab will fire on its targets. Accounts for user-specified overrides.

targetSelector (on x-tabbar-tab)

Returns the CSS selector used to select the targets of a specific tab

targetElems (on x-tabbar-tab)

Returns a list of the elements currently selected as targets of the specific tab

Setters

targetEvent

Sets the name of the event any tabs that don't have overrides will be firing.

targetEvent (on x-tabbar-tab)

Sets the name of the event a single tabbar-tab will fire on its targets, overriding the parent x-tabbar's overall targetEvent.

targetSelector (on x-tabbar-tab)

Sets the CSS selector used to select the targets of a specific tab

targetElems (on x-tabbar-tab)

Assigns a list of DOM elements to be targets of the specific tab

toggle View Demo »

A polyfill merging radiobutton/checkbox inputs into a single tag to provide a consistent UI and simplify markup. Automatically switches between radiobutton and checkbox depending on name attribute.

Attributes

no-box

If set, hides the polyfill's checkbox/radio button.

label

Contains the raw HTML string to render as the toggle's label.

name

Handles the name of the input. Follows the same rules as radio/checkbox input naming, and is required for form submissions to see the input. Multiple <x-toggle>s with the same name automatically become radio buttons.

value

Handles the input's value. Acts the same as any other <input> tag's value, and is submitted in forms.

group

Checkboxes with the same group can be range-toggled by holding down the shift key while toggling checkboxes

active

Indicates whether or not the toggle is the currently active toggle in of its group, if it has one.

checked

Indicates whether the toggle is checked or not

Getters

groupToggles

Returns a list of all toggles sharing the same group

noBox

Returns the value of the no-box attribute

label

Returns the value of the label attribute

name

Returns the value of the name attribute

group

Returns the value of the group attribute

active

Returns the value of the active attribute

checked

Returns the value of the checked attribute

Setters

noBox

Sets the value of the no-box attribute

label

Sets the value of the label attribute

name

Sets the value of the name attribute

group

Sets the value of the group attribute

active

Sets the value of the active attribute

checked

Sets the value of the checked attribute

tooltip View Demo »

Content callout that appears in current context to point at an element and is associated with a triggering element and interaction-style in the underlying content

Attributes

orientation

Determines where the tooltip appears in relation to the triggering element. Valid options are 'top', 'bottom', 'left', 'right'. If not provided, or if invalid, defaults to auto placement of tooltip.

trigger-style

Indicates how the tooltip is triggered. Valid presets are 'hover' and 'custom'. When set to 'hover', the tooltip is triggered when the user moves their cursor over a triggering element, and dismissed when moved off. When set to 'custom', no default behavior is implemented for triggering the tooltip. This is useful when you want to define your own triggering system using the .show(), .hide(), and .toggle() API calls without any default behaviors getting in the way. If set to anything else, the tooltip will use this as the event name to listen for on targeted elems to show the tooltip. (defaults to 'click')

trigger-selector

Indicates how to select elements that would trigger the tooltip. If given a selector of '_previousSibling', the tooltip will use the immediately preceding sibling element in the DOM tree as its triggering element. Similarly, when set to '_nextSibling', the tooltip will use its next DOM sibling as its triggering element. Otherwise, the selector will be applied to the tooltip's parent node as a search query, and any elements that are not part of the tooltip itself will act as triggering elements for the tooltip. (For example, if you were to provide '.fancy-selector' as this attribute's value, and foo is your tooltip element, the elements you would get back would be same as those found from foo.parentNode.querySelectorAll('.fancy-selector').)

ignore-outer-trigger

If present, for non-'hover' and non-'custom' trigger styles, indicates whether an event firing outside of a targeting element should close the tooltip. Has no effect on preset trigger styles

ignore-tooltip-pointer-events

If present, pointer events on the tooltip will be ignored, keeping it from blocking interaction with underlying elements.

allow-overflow

By default, the tooltip will always try to place the tooltip in a way that is constrained by both the container element and the window's viewport (ie: accounting for scrolling).

If `allow-overflow` set, this will instead allow the tooltip to be placed freely, even if it overflows the containing element (However, the tooltip will still be constrained by the window's viewport).

Methods

refreshPosition()

This method immediately repositions the tooltip to recenter on the triggering element. This is useful if the tooltip's contents are changed and need to be immediately visually repositioned.

show()

This method forces the tooltip to display (this will fire a 'tooltipshown' event).

hide()

This method forces the tooltip to hide (this will fire a 'tooltiphidden' event).

toggle()

This method forces the tooltip to toggle whether it is visible or not (this will fire a 'tooltipshown' or 'tooltiphidden' event, whichever is appropriate).

Events

tooltipshown

Fired by the x-tooltip element when tooltip is shown

tooltiphidden

Fired by the x-tooltip element when tooltip is hidden

Getters

presetTriggerStyles

Returns a list of the valid preset style types for the 'trigger-style' attribute.

targetElems

Returns a list of all DOM elements currently selected as a target of the tooltip.

orientation

This will provide the current value of the orientation attribute.

triggerStyle

This will provide the current value of the trigger-style attribute.

triggerSelector

This will provide the current value of the trigger-selector attribute.

content

This will provide the DOM element that is acting as the content area of the tooltip.

ignoreOuterTrigger

This will provide the current value of the ignore-outer-trigger attribute.

ignoreTooltipPointerEvents

This will provide the current value of the ignore-tooltip-pointer-events attribute.

Setters

orientation

This will change the value of the tooltip's orientation attribute.

triggerStyle

This will change the value of the tooltip's trigger-style attribute.

triggerSelector

This will change the value of the tooltip's trigger-selector attribute.

content

This will replace the DOM element for the tooltip's content area with an entirely new DOM element, destroying the old one.

ignoreOuterTrigger

This will change the current value of the ignore-outer-trigger attribute.

ignoreTooltipPointerEvents

This will change the current value of the ignore-tooltip-pointer-events attribute.