Suitable for presenting a summary of an item with associated actions. Most often used within a List component. It was designed to represent an email message on desktop computers and is not currently touch friendly.
The same as the default variant, with a thumbnail image added.
Showcases a document by providing a thumbnail, title, and some metadata.
Apply the is-selectable
class to make it possible to select the item.
When applied alongside the is-selectable
class, is-selected
will mark it as selected.
Use is-unseen
to indicate that the item has not been seen.
Use is-unread
to indicate that the item has not been read.
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
<script src="jquery-2.2.1.min.js"></script>
<script src="jquery.fabric.min.js"></script>
</head>
<script>
tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
$(document).ready(function() {
if ($.fn.ListItem) {
$('.ms-ListItem').ListItem();
}
});
</script>
.ms-ListItem-primaryText
) with your content.This component has no dependencies on other components, although it is most often used within a List component.
More details will be added here.