UI Components
Collection Views alpha

Overview

Collection Views are at the very core of what Fabric is. Collection Views are various ways to view a collection of Cells.

List

Example ⚡


<UICollection type='list'>
  <UICollection.ListItem key='tag-1'>
    <a href='/tags/1/'>
      <UIIcon icon='tag' /> Hello World
    </a>
  </UICollection.ListItem>
  <UICollection.ListItem key='tag-2'>
    <a href='/tags/2/'>
      <UIIcon icon='tag' /> This is a tag!
    </a>
  </UICollection.ListItem>
</UICollection>

Usage

  • List Collection Views should be used when the view has a lot of vertical space, but is small in terms of horizontal space.

Grid

Example


<UICollectionView
   display_type='grid'
   cell_type='UIBigHeadSubheadCell'
   head='name'
   subhead='last_active'
   subhead_prefix=''
   data={data}/>

Usage

Grid Collection Views should be used when the view has a lot of horizontal space, but you want to conserve the amount of vertical space used.

Inline

Example


<UICollectionView
   display_type='inline'
   cell_type='UIXSmallCell'
   head='name'
   seperator=','
   data={data}/>

Usage

Inline Collection Views should be used when you want to display a list of items inline on a single line.

Master

Example


<UICollectionView
   display_type='master'
   cell_type='UIBigHeadSubheadCell'
   head='name'
   subhead='last_active'
   subhead_prefix=''
   data={data}/>

Usage

Master Collection Views should be used for the master portion of our Master-Detail paradigm

It's recommended that you don't use small cells with this collection view type.

Changelog

  • December 9, 2016 - Promoted to Alpha and updated to automated docs
  • July 20, 2016 - Updated code snippets and added example images as placeholders