Brick 1.0beta
UI Components for Modern Web Apps
Documentation
Version 1.0beta
appbar
View Demo »The Application Bar provides the standard top header and navigation layout that is typical for Web Applications on mobile devices.
Attributes
Methods
Events
topcalendar
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
datepicker
View Demo »A polyfill for <input type='date'> utilizing the x-calendar component.
Attributes
name
- Indicates the name of the input to use. This is the default keyname that will be submitted if submitted through a form.
value
- Indicates the currently displayed value of the datepicker. Can also be used to initialize a certain value.
polyfill
- Indicates whether or not the datepicker is using a polyfill UI or not. While this is set automatically, this can also be set in markup to force the datepicker to always use its polyfill UI version.
Methods
editLabels(newLabelData)
- Allows the user to change the labels of the calendar, if currently in polyfill mode. See the <x-calendar>'s .labels property documentation for details on expected input structure.
Events
input
- Fired by the <x-datepicker> any time the user selects a date. Also fired as the user types in a date.
change
- Fired by the <x-datepicker> whenever the submitValue of the datepicker changes or when the value is finalized. In other words, while input fires as the user types, change only fires if this changes the date selected by the datepicker, or if the user hits enter/leaves the datepicker's focus and the date gets parsed into ISO format.
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
- Fired by the <x-deck> when it is about to start a card transition animation. At this point, all deck attributes are set, and the only thing left to is to CSS animate the transition.
shuffleend
- Fired by the <x-deck> element when a card transition animation has finished. Similar to 'transitionend' events, is not guaranteed to fire for every animation, and will only fire for animations that reach full completion without interruption.
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.
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.
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.
Methods
Events
topslidebox
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.
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
Methods
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
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.
Methods
Events
show
- The default event that a x-tabbar-tab will fire on its selected elements if not overridden by 'target-event'
toggle
View Demo »A polyfill for radiobutton/checkbox inputs to provide a consistent UI and simplify markup
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.
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
Methods
Events
toptogglegroup
View Demo »Togglegroups are used to display a set of clickable option buttons, which can be either toggle in an independent or mutually exclusive manner.
Attributes
name
- Indicates the name to use for the group of buttons. This is the default keyname that will be submitted if submitted through a form.
group
- Indicates the name of the the button's grouping.
Methods
Events
toptooltip
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 'none' (defaults to 'hover'). 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 'none', no default behavior is implemented for triggering the tooltip. This is useful when you want to define your own triggering system using the showTooltip and hideTooltip 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.
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, the elements you would get back would be those found from foo.parentNode.querySelectorAll('.fancy-selector'), where foo is your tooltip element.)
ignore-outer-trigger
- If present, for non-preset 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.
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