SKY UX components, available as AngularJS directives, services, and modules, allow developers to easily create user interfaces that incorporate our styles and patterns. AngularJS and Bootstrap are at the heart of SKY UX, so it is important you are familiar with these before you get started.
The action bar provides a SKY UX-themed container for buttons that can collapse when the screen is in extra-small mode.
The autonumeric component wraps up the autoNumeric jQuery plugin to format any type of number.
The checklist builds a filterable checkbox list that can display multiple columns of data.
The context menu creates simple or complicated dropdown menus that you can incorporate into buttons.
The date-range picker creates a box with a dropdown to select date ranges from a set of well-known options.
The datepicker wraps the Angular UI Bootstrap datepicker directive to create a text box with a calendar to select dates.
The error component provides a template that allows other components to display error messages when errors occur.
The file attachments module provides the ability to add multiple files to forms and then display information about the files.
The format service provides access to functions that allow you to format text with a format string and to escape HTML characters.
The help button component creates a help icon to open help content that you specify. It can also override the default help content in the help panel.
The listbuilder component contains functionality for executing different actions on large sets of data.
The media breakpoints service calls callback functions when a Bootstrap grid system breakpoint is hit.
The moment module uses the Moment.js library to parse, validate, manipulate, and display dates.
The omnibar provides a common UI element for Blackbaud products to enable seamless navigation for users.
The page summary displays critical information and actions for users to access quickly and frequently.
The pagination component displays list data across multiple pages and inserts a pagination control to page through the list.
The palette service provides methods to consistently produce a sequence of colors for SKY UX applications.
The phone field directive creates a text box to format and validate international phone numbers.
The popover component wraps the Angular UI Bootstrap popover directive to create an HTML-formatted popover that is displayed by a trigger element.
The reorder component provides an interface to display a list where users can drag-and-drop rows into their preferred order.
The repeater component creates a container to display formatted information for a list of objects.
Scroll into view
The scroll-into-view component causes an element to scroll into the viewport when its bound value changes.
The search component creates a mobile-responsive input control for users to enter search criteria.
A sectioned form combines multiple forms while allowing users to target specific independent areas.
The sort component displays a button and dropdown menu to allow users to select sorting criteria.
The tab scroll component makes a row of tabs horizontally scrollable when the row is wider than its container.
The tab sref component provides tab info in page URLs so that hyperlinks can point to specific tabs.
The text expand component truncates long text with an ellipsis and a link that users can click to expand the text.
The tile provides a collapsible container that is the building block for pages and forms in Sky UX applications.
The toast service launches toast messages basic string messages or complex toast messages that use HTML templates.
The wait component disables an element in a waiting state and visually indicates that it is in a waiting state.
The window services provides helper methods to edit the browser’s window title and to obtain the browser’s scrollbar width.