Skip to content
This repository has been archived by the owner on Aug 30, 2019. It is now read-only.
Jason Brown edited this page Aug 2, 2015 · 1 revision

#Dividers As described by Google Material Design Specification

Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.

Dividers consist of 2 types: Full-Bleed and Inset.

Full-Bleed

Full-Bleed extends across the width of the screen and is used to separate distinct content sections such as contact information.

Inset

Inset dividers separate related content, such as sections in a list of emails or contacts within an address book.

Ionic doesn't provide these types of divider, except within lists but only as subheadings.

Ionic Material Design accomplishes the 2 types of dividers with the following classes:

.item-divider__full and .item-divider__inset

An example of how you would mark this up within your view is as follows:

<ion-item class="item-divider item-divider__full">All mail</ion-item>

<ion-item class="item-divider item-divider__inset">Brunch this weekend?</ion-item>

Clone this wiki locally