Callout Demo | <uif-callout>

In order for this demo to work you must first build the library in debug mode.

To render callout, use the following markup:

  <uif-callout uif-arrow="left">
    <uif-callout-header>All of your favorite people</uif-callout-header>
    <uif-callout-content>Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</uif-callout-content>
    <uif-callout-actions>
      <a href="#" class="ms-Callout-link ms-Link ms-Link--hero">Learn more</a>
    </uif-callout-actions>
  </uif-callout>

All of your favorite people Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom. Learn more

uifArrow attribute is optional. If not provided, callout does not have arrow.

    <uif-callout>
      <uif-callout-header>All of your favorite people</uif-callout-header>
      <uif-callout-content>Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</uif-callout-content>
      <uif-callout-actions>
        <a href="#" class="ms-Callout-link ms-Link ms-Link--hero">Learn more</a>
      </uif-callout-actions>
    </uif-callout>

All of your favorite people Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom. Learn more

This markup will render OOBE callout:

  <uif-callout uif-arrow="top" uif-type="oobe">
    <uif-callout-header>All of your favorite people</uif-callout-header>
    <uif-callout-content>People automatically puts together all of the people you care most about in one place.</uif-callout-content>
    <uif-callout-actions>
      <uif-button uif-type="primary">
        More
        <uif-button-description>Description of the action this button takes</uif-button-description>
      </uif-button>
      <uif-button>
        Got it
        <uif-button-description>Description of the action this button takes</uif-button-description>
      </uif-button>
    </uif-callout-actions>
  </uif-callout>

All of your favorite people People automatically puts together all of the people you care most about in one place. More Description of the action this button takes Got it Description of the action this button takes

This markup will render Peek callout:

  <uif-callout uif-arrow="right" uif-type="peek">
    <uif-callout-header>Uploaded 2 items to <span class="ms-Link">Alton's OneDrive</span></uif-callout-header>
    <uif-callout-actions>
      <uif-button>
        More
        <uif-button-description>Description of the action this button takes</uif-button-description>
      </uif-button>
    </uif-callout-actions>
  </uif-callout>

Uploaded 2 items to Alton's OneDrive More Description of the action this button takes

Separator can be rendered between content and actions containers. uif-actiontext and uif-separator server the same purpose.

  <uif-callout uif-action-text>
    <uif-callout-header>All of your favorite people</uif-callout-header>
    <uif-callout-content>People automatically puts together all of the people you care most about in one place.</uif-callout-content>
    <uif-callout-actions>
      <uif-button uif-type="command">
        <uif-icon uif-type="check"></uif-icon>
        Save
      </uif-button>
      <uif-button uif-type="command">
        <uif-icon uif-type="x"></uif-icon>
        Cancel
      </uif-button>
    </uif-callout-actions>
  </uif-callout>

All of your favorite people People automatically puts together all of the people you care most about in one place. Save Cancel

Callout supports ngShow directive. Hover over the link to test.

  <uif-callout ng-show="vm.firstVisible" uif-arrow="left">
    <uif-callout-header>All of your favorite people</uif-callout-header>
    <uif-callout-content>Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</uif-callout-content>
    <uif-callout-actions>
      <a href="#" class="ms-Callout-link ms-Link ms-Link--hero">Learn more</a>
    </uif-callout-actions>
  </uif-callout>

Hover over me!
All of your favorite people Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom. Learn more

Callout can have close button, with help of uif-close attribute.

  <uif-callout ng-show="vm.secondVisible" uif-arrow="left" uif-close>
    <uif-callout-header>All of your favorite people</uif-callout-header>
    <uif-callout-content>Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</uif-callout-content>
    <uif-callout-actions>
      <a href="#" class="ms-Callout-link ms-Link ms-Link--hero">Learn more</a>
    </uif-callout-actions>
  </uif-callout>

All of your favorite people Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom. Close

When ngShow is used without uif-close, callout is closed when mouse leaves from callout:

  <uif-callout ng-show="vm.thirdVisible" uif-arrow="left">
    <uif-callout-header>All of your favorite people</uif-callout-header>
    <uif-callout-content>Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</uif-callout-content>
    <uif-callout-actions>
      <a href="#" class="ms-Callout-link ms-Link ms-Link--hero">Learn more</a>
    </uif-callout-actions>
  </uif-callout>

All of your favorite people Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom. Learn more