Display Recent Mails using Microsoft Graph Toolkit

spfx-mgt-showemails.htm

<mgt-get resource="/me/messages" version="beta" scopes="mail.read" max-pages="2">
	<template>
		<div style="background-color:#eee;padding:8px 30px;">
			<div class="email" data-for="email in value" style="padding:20px; background-color:#fff">
				<h3>{{ email.subject }}</h3>
				<h4>
				<mgt-person person-query="{{email.sender.emailAddress.address}}" view="oneline" person-card="hover">
				</mgt-person>
			</h4>
				<div data-if="email.bodyPreview" class="preview" innerHtml>{{email.bodyPreview}}</div>
				<div data-else class="preview"> email body is empty </div>
			</div>
		</div>
	</template>
	<template data-type="loading"> loading </template>
	<template data-type="error"> {{ this }} </template>
</mgt-get>
<style>
.email {
	background-color: white;
	border-radius: 4px;
	margin-top: 8px;
	margin-bottom: 5px;
	padding: 25px 25px 15px 25px;
	transition: 0.3s;
}

.email:hover {
	box-shadow: 5px 1px 20px 1px #ddd;
	transform: scale(0.96);
}
</style>