ngOfficeUIFabric – the messagebar component

The message bar is a new Office UI Fabric component, which is part of Office UI Fabric 2.6.1.

DefaultMessageBar
The default message bar component

You can use the message bar to present timely information to provide key information or actions to enrich the user experience.

The message bar supports several levels of information:

  • Default (as shown above)
  • Warning – used in exceptional situations
  • Severe Warning – used situations, that could turn into a harmful one
  • Error – used for serious failure
  • Remove – used when a user faces security restrictions
  • Success – used when something went right.

The messagebar directive

The new umessagebar directive will be a part of ngOfficeUIFabric v0.11.0 release.

How does the message bar work?

<uif-message-bar uif-type="error">
<uif-content>
Error - lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
</uif-content>
<uif-link ng-href="http://ngofficeuifabric.com">Link text</uif-link>
</uif-message-bar>

The markup above is fairly simple compared to the Office UI Fabric template:

<div class="ms-MessageBar ms-MessageBar--error">
<div class="ms-MessageBar-content">
<div class="ms-MessageBar-icon">
<i class="ms-Icon ms-Icon--xCircle"></i></div>
<div class="ms-MessageBar-text">
Error - lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
<a href="" class="ms-Link">Hyperlink string</a></div>
</div>
</div>

The directive works with the following minimal markup. This minimal markup renders a default message bar without a user action:

<uif-message-bar>
<uif-content>
lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit
</uif-content>
</uif-message-bar>

The messagebar supports the following attribute:

  • uif-type: string
    possible values: error, remove, severewarning, success, warning

The messagebar directive requires a

<uif-content />

element as child. The

<uif-link />

element is optional.

Is there a preview available?

Sure there is. I set up a plunk to demonstrate the message bar component:
Check it out here: https://plnkr.co/edit/jbp1K2

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.