They're are a great way to contain and organize information, while also setting up predictable expectations for the user.
Headers are fixed regions at the top of a screen that can contain a title label, and left/right buttons for navigation or to carry out various actions.
Ah, the Button, an essential part of any mobile experience. Like the Header, they come in the full spectrum of AngularGap's default colors.
By default a button has display: inline-block
applied. Other options include block
buttons for a full width.
Adding button--block
to a button applies display: block
display. A block button will however go 100% of its parent's width. In the example, the button's containing content element also has padding
applied, so there is some breathing room between the edge of the device and the buttons.
Use button--outline
to apply an outline button style, which also has a transparent background.
Add button--clear
to remove the border and make the text stand out.
Icons can easily be added to any button by using either the built in AngularGapons, or any custom font-pack you choose. Learn more about icons.
Icons can also be set with a child element inside the button, however, assigning the icon directly to the button reduces the number of elements in the DOM.
Home
When buttons are placed in headers or footers, they take the style of the bar by default, so you don't have to use the extra style classes. To change this, add the desired style class.
For a more minimal approach to header buttons, simply add the button-clear
classname to remove the background button color and border.
Buttons can also be easily grouped together using the button-group
classname. In this example, a button bar was added to the default header bar, as well as in the main content area of the screen.
The List is a common and simple way of displaying... that's right, a list. This is a widely used interface across most current mobile OS's, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
The list view is a very versitile and powerful component. List views support various interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh.
List items can also be dividers to organize and group the list items. Use the item--divider
class to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.
Lists can have icons assigned either to the left and/or right side of each list item, and the alignment classes should be assigned to each list__item
element. Icons can easily be added to any item by using either the built in AngularIcons, or any custom font-pack you choose. Learn more about icons.
List items can also be dividers to organize and group the list items. Use the item--divider
class to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.
Call Ma
List avatars are essentially a showcase of an image larger than an icon, and will often span/define the entire height of the list item. To create a thumbnail style list, use the list-thumbnail
classname. In this example, we are using images of album covers.
List Thumbnail are essentially a showcase of an image larger than an icon, and will often span/define the entire height of the list item.
A list is also used to group related input elements. input-control
is then used to designate each individual input field and it's associated label.
Rember Password
Use input-label
to place a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder
label too.
Rember Password
Use input-addon
to place a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder
label too.
Rember Password
Use the input-wrap
classname to wrap a input
. Placing a button inside the item.
Use the input-wrap input--icon
classname to wrap a input
. Placing a button inside the item.
Inputs can also be placed in headers, along with buttons to submit or cancel the form.
They're are a great way to contain and organize information, while also setting up predictable expectations for the user.
They're are a great way to contain and organize information, while also setting up predictable expectations for the user.
Use the card list
classname to create a card with lists.
Use the card list
classname to create a card with form.
Rember Password
The Tab Bar is a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.
The containing tab bar should have the tab
classname, and each tab should have the tab__item
classname. By default, tabs will be without an icon and text-only.
The classic tab bar. Add tab--iconTop
along with the tab
classname.
Add tab--iconLeft
along with the tab
classname.
A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. AngularGap prefers to wrap the checkbox input with the <label>
in order to make the entire toggle easy to tap or drag.
...
A checkbox is no different than the HTML checkbox input, except it's styled differently. This is an example of multiple checkboxes within a list. Note the list--checkbox
class was added along side list__item
for each item.
AngularGap prefers to use the <label>
element for a checkbox item in order to make the entire checkbox tappable.
Radio act no differently as standard radio input elements. Following this convention will display a list of radio buttons similarly seen in modern app.
AngularGap prefers to use the <label>
element for a radio item in order to make the entire area tappable.
This is a Range. Ranges can be themed to any default color, and used in various other elements such as a list item.
This is a loading animation. Loading text slowly reveals itself over and over while a spinner rotates around in a circle over and over infinitely.
Progress bars use CSS3 transitions and animations to achieve some of their effects.
CSS columns. Granted, their purpose is to display text in columns like a newspaper, but their display mode is exactly what’s needed to recreate the Masonry effect.
AngularGap's grid system is different than most because of its use of the CSS Flexible Box Layout Module standard. The advantage here is that the devices that AngularGap supports, all support flexbox.
Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There's no restriction to a 12 column grid, or having to explicitly state how large each column should be. And to add to the crazy, you can vertically align content within each column.
Use the grid
classname is used to designate, surprise, a row, and col
is used for a column. Point is, add the number of columns your layout requires and don't worry about figuring out the percentages because it figures it out automagically.
Note: The borders and gray background in the demo were added so it's easier to see the structure.
By default every col
added inside a grid
will automatically receive an equal amount of the available area. Notice in the code below that no sizes are specified anywhere in the classnames, yet each of the five columns in this example will each evenly take up 20% of the available width (thank you flexbox).
.col.col.col.col.col
Note: The borders and gray background in the demo were added so it's easier to see the structure.
You can explicitly state the size of a column if for example you'd want specific columns to be larger than the others in the same row. By default each column will evenly take up the available area, but in the case where a column should be a certain size, Angulargap's grid uses a percent system (in contrast to a locked in 12 column grid).
An advantage with this grid system is that you only have to state the percentage for the column that needs it, and the others will still evenly divide up the available areas.
.col.col--1of2.col.col.col.col--2of3.col.col.col.col--3of4.col.col
Note: The borders and gray background in the demo were added so it's easier to see the structure.
Explicit Column Percentage Classnames | |
---|---|
.col--1of10 | 10% |
.col--1of5 | 20% |
.col--1of4 | 25% |
.col--1of3 | 33.3333% |
.col--1of2 | 50% |
.col--2of3 | 66.6666% |
.col--3of4 | 75% |
.col--4of5 | 80% |
.col--9of10 | 90% |
Columns can also be offset from the left. We'll let the code and demo speak for itself.
.col.col.col.col.col
Note: The borders and gray background in the demo were added so it's easier to see the structure.
Offset Column Percentage Classnames | |
---|---|
.col-offset--1of10 | 10% |
.col-offset--1of5 | 20% |
.col-offset--1of4 | 25% |
.col-offset--1of3 | 33.3333% |
.col-offset--1of2 | 50% |
.col-offset--2of3 | 66.6666% |
.col-offset--3of4 | 75% |
.col-offset--4of5 | 80% |
.col-offset--9of10 | 90% |
Another trick up flexbox's sleeve is the ability to easily vertically align columns. Vertical alignment includes top, center and bottom, and can be applied to every column in a row, or to specific columns.
In the demo, we've made the last column in each row to have the tallest content in order to demonstrate how the content of the others vertically align. The first row shows the default which is to take the same height as the tallest column in the same row.
.col.col.col1
2
3
4.col.col.col1
2
3
4.col.col.col1
2
3
4.col.col.col1
2
3
4.col.col.col1
2
3
4
Note: The borders and gray background in the demo were added so it's easier to see the structure.