ngOfficeUiFabric | uif-Icon demo

List rendered as a list

This markup:

  <uif-list>
    <uif-list-item ng-repeat="message in messages" uif-unread="{{message.isUnread}}" uif-unseen="{{message.isUnseen}}" uif-item="message">
      <uif-list-item-primary-text>{{message.sender.name}}</uif-list-item-primary-text>
      <uif-list-item-secondary-text>{{message.title}}</uif-list-item-secondary-text>
      <uif-list-item-tertiary-text>{{message.description}}</uif-list-item-tertiary-text>
      <uif-list-item-meta-text>{{message.time | date : 'shortTime'}}</uif-list-item-meta-text>
      <uif-list-item-selection-target></uif-list-item-selection-target>
      <uif-list-item-actions>
        <uif-list-item-action ng-click="mail(message)">
          <uif-icon uif-type="mail"></uif-icon>
        </uif-list-item-action>
        <uif-list-item-action ng-click="delete(message)">
          <uif-icon uif-type="trash"></uif-icon>
        </uif-list-item-action>
        <uif-list-item-action ng-click="pin(message)">
          <uif-icon uif-type="pinLeft"></uif-icon>
        </uif-list-item-action>
      </uif-list-item-actions>
    </uif-list-item>
  </uif-list>

Renders this: {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}}

List rendered as a grid

This markup:

  <uif-list uif-layout="grid">
    <uif-list-item ng-repeat="message in messages" uif-unread="{{message.isUnread}}" uif-unseen="{{message.isUnseen}}" uif-item="message">
      <uif-list-item-primary-text>{{message.sender.name}}</uif-list-item-primary-text>
      <uif-list-item-secondary-text>{{message.title}}</uif-list-item-secondary-text>
      <uif-list-item-tertiary-text>{{message.description}}</uif-list-item-tertiary-text>
      <uif-list-item-meta-text>{{message.time | date : 'shortTime'}}</uif-list-item-meta-text>
      <uif-list-item-selection-target></uif-list-item-selection-target>
      <uif-list-item-actions>
        <uif-list-item-action ng-click="mail(message)">
          <uif-icon uif-type="mail"></uif-icon>
        </uif-list-item-action>
        <uif-list-item-action ng-click="delete(message)">
          <uif-icon uif-type="trash"></uif-icon>
        </uif-list-item-action>
        <uif-list-item-action ng-click="pin(message)">
          <uif-icon uif-type="pinLeft"></uif-icon>
        </uif-list-item-action>
      </uif-list-item-actions>
    </uif-list-item>
  </uif-list>

Renders this: {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}}

List Item Types

The <uif-list> directive supports three types of items: regular items, items with images and items with icons. You can specify the desired type of rendering using the uif-type attribute.

Rendering items with images

You can render list items with images by setting the uif-type attribute to itemWithImage. When you do, you also need to include the <uif-list-item-image> directive.

Renders this: {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}}

Rendering items with icons

Another type of items that's supported by the list directive is items with icons. You can render list items with icons by setting the uif-type attribute to itemWithIcon. When you do, you also need to include the <uif-list-item-icon> directive.

Renders this: {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}}

Selecting List Items

The <uif-list> directive supports selecting items in the list. Using the uif-item-select-mode attribute you can allow selecting single item (uif-item-select-mode="single"), multiple items (uif-item-select-mode="multiple") or you explicitly disable selecting items which is also the default mode (uif-item-select-mode="none"). You can get the list of selected items by passing a reference to an array to the list directive using the uif-selected-items attribute.

Selecting a single item

To allow selecting a single item in the list set on the <uif-list> directive the uif-item-select-mode attribute to single.

Renders this:
Selected item: {{selectedItemsSingle[0]}} {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}}

Selecting multiple items

To allow selecting multiple items in the list set on the <uif-list> directive the uif-item-select-mode attribute to multiple.

Renders this:
Selected items: {{selectedItemsMultiple}} {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}}

Preselecting items

It is also possible to pass a list of preselected items to the <uif-list> directive using the uif-selected-items attribute. Every item in the passed array will be marked as selected in the list.

Important: if there are multiple items in the array passed to the uif-selected-items attribute but the list item select mode has been set to single only the last item in the array will be marked as selected.

Renders this:
Selected items: {{selectedItems}} {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}} list

Dynamically changing types

Changing list item type rendering

Renders this: {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}}

Changing list layout type

Renders this: {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}}

Changing list selection type

Renders this: {{message.sender.name}} {{message.title}} {{message.description}} {{message.time | date : 'shortTime'}}

List Demo | <uif-list>

List Types

List rendered as a list

List rendered as a grid

List Item Types

Rendering items with images

Rendering items with icons

Selecting List Items

Selecting a single item

Selecting multiple items

Preselecting items

Dynamically changing types

Changing list item type rendering

Changing list layout type

Changing list selection type