Usage
To include Brick in your project, include your downloaded stylesheet and script files in your project's page like normal:
<link rel="stylesheet" type="text/css" href="brick-1.0.0rc1.css"/>
<script type="text/javascript" src="brick-1.0.0rc1.js"></script>
Using any of Brick's components is as simple as including the respective tag in your HTML markup. (See individual component docs for details.)
Important: To run code relying on any of Brick's tags, make sure to wait until the x-tags library's "DOMComponentsLoaded" event instead of just window.onload:
document.addEventListener('DOMComponentsLoaded', function(){
// run code here...
});
appbar View Demo »
Tag: x-appbar Version: 0.2.11 Source: http://github.com/x-tag/appbar Bower: x-tag-appbar
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 »
Tag: x-calendar Version: 0.1.6 Source: http://github.com/x-tag/calendar Bower: x-tag-calendar
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 »
Tag: x-deck Version: 0.2.2 Source: http://github.com/x-tag/deck Bower: x-tag-deck
A box in which <x-card> elements can be cycled independently of order with a variety of different transitions
Attributes
loop- A boolean attribute that turns on/off the auto-looping feature when the x-deck has reached the beginning or end of its card index
transition-type- Allows the user to set a default animation type for cards. If this attribute is added to an individual single <x-card> element, the animation specified will be used in place of the <x-deck>'s default card animation. Valid options are the same as the <x-deck>'s transition-type attribute.
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.
Methods
showCard(index||element, [direction])- Transitions an x-card element to the shown state via index or card element reference. If given a direction of 'forward', will perform the forwards animation. If given 'reverse', will performs the reverse animation.
hideCard(index||element, [direction])- Transitions an x-card element to the hidden state via index or card element reference. If given a direction of 'forward', will perform the forwards animation. If given 'reverse', will performs the reverse animation.
nextCard(index||element, [direction])- Transitions to the next x-card in the deck. Takes an optional direction of 'forward' or 'reverse'.
previousCard(index||element, [direction])- Transitions to the previous x-card in the deck. Takes an optional direction of 'forward' or 'reverse'.
Events
show- Fired from a card target after it has completed its show animation, and the show state has been finalized.
hide- Fired from a card target after it has completed its hide animation, and the hide state has been finalized.
Getters
cards- Returns an array of all <x-card> elements within the <x-deck>.
selectedCard- Returns the <x-card> currently displayed in the deck.
transitionType- Returns the value of the 'transition-type' attribute.
selectedIndex- Returns the value of the 'selected-index' attribute.
Setters
selectedCard- Sets the provided <x-card> element as the selected card, and shows the element.
selectedIndex- Sets the value of the 'selected-index' attribute, and shows the card at that index
transitionType (also available onelements) - Sets the transition override of the card.
flipbox View Demo »
Tag: x-flipbox Version: 0.2.7 Source: http://github.com/x-tag/flipbox Bower: x-tag-flipbox
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 »
Tag: x-layout Version: 0.1.6 Source: http://github.com/x-tag/layout Bower: x-tag-layout
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.
slider View Demo »
Tag: x-slider Version: 0.1.7 Source: http://github.com/x-tag/slider Bower: x-tag-slider
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 »
Tag: x-tabbar Version: 0.1.8 Source: http://github.com/x-tag/tabbar Bower: x-tag-tabbar
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
reveal- 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 »
Tag: x-toggle Version: 0.2.8 Source: http://github.com/x-tag/toggle Bower: x-tag-toggle
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