Element: <oj-list-view>

Under normal circumstances this class is applied automatically. It is documented here for the rare cases that an app developer needs per-instance control.

The oj-focus-highlight class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.

The application-level behavior for this component is controlled in the theme by the $focusHighlightPolicy SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:

nonPointer: oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
all: oj-focus-highlight is applied regardless of the focus mechanism.
none: oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.

To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.

<oj-list-view class="oj-focus-highlight">
  <!-- Content -->
</oj-list-view>

Use to style group headers as large size group headers according to the current theme.

<oj-list-view class="oj-group-header-lg">
  <!-- Content -->
</oj-list-view>

Use to style group headers as medium size group headers according to the current theme.

<oj-list-view class="oj-group-header-md">
  <!-- Content -->
</oj-list-view>

Use to style group headers as small size group headers according to the current theme.

<oj-list-view class="oj-group-header-sm">
  <!-- Content -->
</oj-list-view>

Shows items as cards and lay them out in a grid.

<oj-list-view class="oj-listview-card-layout">
  <!-- Content -->
</oj-list-view>

Use to show a drag handle in the item to facilitate item reordering or drag and drop.

<oj-list-view>
  <template slot="itemTemplate" data-oj-as="item">
    ...
    <div class="oj-flex-bar-end oj-sm-align-items-center">
     <div role="button" tabindex="0" class="oj-flex-item oj-listview-drag-handle">
     </div>
    </div>
  </template>
</oj-list-view>

Use to show a drill-to-detail icon in the item.

<oj-list-view class="oj-listview-card-layout">
  <template slot="itemTemplate" data-oj-as="item">
    ...
    <div class="oj-flex-bar-end oj-sm-align-items-center">
     <div role="presentation" class="oj-flex-item oj-fwk-icon oj-listview-drill-icon">
     </div>
    </div>
  </template>
</oj-list-view>

Use when ListView occupies the entire width of the page. Removes left and right borders in card-layout mode and adjust positioning of cards to improve visual experience.

<oj-list-view class="oj-listview-full-width">
  <!-- Content -->
</oj-list-view>

Use when the page author overrides the default styling on the item root element and wants to apply the item style on some other element.

<oj-list-view class="">
  <template slot="itemTemplate" data-oj-as="item">
    <div class="oj-listview-item-layout">
    ...
    </div>
  </template>
</oj-list-view>

Use when the page author wants to remove the default padding around the item. This is mostly used in the case where the component used inside the itemTemplate already supply its own padding (ex: oj-list-item-layout), and therefore the default padding provided by ListView should be remove.

<oj-list-view class="oj-listview-item-padding-off">
  <!-- Content -->
</oj-list-view>