Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UIĀ Fabric React as your front-end framework.
Overview
Presents a message to the user, with an optional call to action. The message is typically an error, update, or alert.
Using this Component
-
Confirm that you have references to Fabric's CSS and JavaScript on your page:
<link rel="stylesheet" href="fabric.min.css" /> <link rel="stylesheet" href="fabric.components.min.css" /> <script src="fabric.min.js"></script>
-
Copy the HTML from one of the samples below into your page. For example:
<div class="ms-MessageBanner"> <div class="ms-MessageBanner-content"> <div class="ms-MessageBanner-text"> <div class="ms-MessageBanner-clipper"> You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage. </div> </div> <button class="ms-MessageBanner-expand"> <i class="ms-Icon ms-Icon--ChevronDown"></i> </button> <div class="ms-MessageBanner-action"> <button class="ms-Button ms-Button--primary"> <span class="ms-Button-label">Get More Storage</span> </button> </div> </div> <button class="ms-MessageBanner-close"> <i class="ms-Icon ms-Icon--Clear"></i> </button> </div>
-
Add the following
<script>
tag to your page, below the references to Fabric's JS, to instantiate all MessageBanner components on the page:<script type="text/javascript"> var MessageBanner = new fabric['MessageBanner'](MessageBannerExample.querySelector('.ms-MessageBanner')); </script>
-
Replace the sample HTML content with your content.
Variants
Default MessageBanner
<div class="ms-MessageBanner">
<div class="ms-MessageBanner-content">
<div class="ms-MessageBanner-text">
<div class="ms-MessageBanner-clipper">
You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
</div>
</div>
<button class="ms-MessageBanner-expand">
<i class="ms-Icon ms-Icon--ChevronDown"></i>
</button>
<div class="ms-MessageBanner-action">
<button class="ms-Button ms-Button--primary">
<span class="ms-Button-label">Get More Storage</span>
</button>
</div>
</div>
<button class="ms-MessageBanner-close">
<i class="ms-Icon ms-Icon--Clear"></i>
</button>
</div>
<script type="text/javascript">
var MessageBanner = new fabric['MessageBanner'](MessageBannerExample.querySelector('.ms-MessageBanner'));
</script>
You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
Methods
Name | Parameters | Description |
---|---|---|
init() |
None |
Initializes component
|
show() |
None |
Shows MessageBanner if hidden
|
showBanner() |
None |
Shows MessageBanner if hidden, (deprecated) now use show()
|