6

I have been using Fluent UI to implement the UI for an Excel add-in that I'm working on. I need a way to display a series of pop up notifications that do not require user input, but just serve to notify the user that something happened. What I want is to use something like the Callout widget, that nicely stack on top of each other.

An example of what I am looking for: https://react-bootstrap.github.io/components/toasts/

I don't see any widget like that, and was wondering if it is possible to be able to implement the same in Fluent UI, so that I can preserve the look and feel with the rest of the UI widgets my add-in has. If that is not possible, I have no choice but to use a third party library, and then tweak it's look and feel to match that of Fluent UI.

What is the recommended way to go about this?

koushtavc
  • 71
  • 1
  • 3
  • 7
    Fluent UI doesn't offer it. So a solution depends on your personal choice (I guess that's why someone downvoted your question). I'd personally use a Layer (https://developer.microsoft.com/en-us/fluentui#/controls/web/layer) and render custom toasts using other Fluent UI components in there myself. The stacking can simply be achieved by using flex box or Fluent UI's Stack component (https://developer.microsoft.com/en-us/fluentui#/controls/web/stack). – alex3683 Aug 13 '20 at 07:20
  • 1
    Thanks for the suggestions @alex3683! Yeah, was currently using Toastr with custom CSS to match the look and feel of Fluent UI. I will look into using Callouts with the Stack component to see if the same effect can be reproduced. – koushtavc Aug 14 '20 at 04:07
  • 2
    Hm, I don't think that callouts are stackable, since they have their own layer and are positioned absolute or fixed or something. It should not be that difficult to just take standard `div` or `Stack` elements, make them nicer with the elevation / depth styles (https://developer.microsoft.com/en-us/fluentui#/styles/web/elevation) and add an `IconButton` for the closing action. – alex3683 Aug 14 '20 at 05:55
  • 1
    Ah, I see. Yeah, thanks for the suggestions! Will try this and then customize as needed. :) – koushtavc Aug 14 '20 at 11:05

0 Answers0