Can you put html inside Toasts?

Questions
1

Is it possible to put HTML inside a Toast component? I’d like to insert some other Framework7 UI elements for a pop up interface that will appear over the top of a fullscreen google map.

I want to put in a title, an image, some formatted text and a footer toolbar. Is this all possible or is it not recommended? If not then what’s the best thing to use instead?

2

Just put html inside of “text” toast prop

3

Actually it looks like a sheet modal is what I need… Is there a way to use the handlebar syntax in the content parameter for app.sheet.create() ? I’d like to insert variables created in the data function on the page.

4

Possible, with Template7 custom template http://idangero.us/template7/

5

Great, I got it working like this… Is this the correct use of Template7?

createSheet: function (branch) {
  var obj = app.utils.extend(branch);
  var tmpl = '\
        <div class="sheet-modal">\
          <div class="toolbar">\
            <div class="toolbar-inner justify-content-flex-end">\
              <a href="#" class="link sheet-close">Close</a>\
            </div>\
          </div>\
          <div class="sheet-modal-inner">\
            <div class="page-content">\
              <div class="block-strong">\
                <h2>{{city}}</h2>\
                <p>{{address}}</p>\
              </div>\
            </div>\
          </div>\
        </div>\
      ';
  self.sheet = app.sheet.create({
    content: Template7.compile(tmpl)(obj),
  });
}
6

How would I make it so sheet modal is only the height of it’s content and not a fixed height?

7

You need to set/unset it’s heighy, check it’s element with inspector - easiest way to realize what need to be changed

8

Thank you. I know that I can set height: auto in the css to solve this on iOS, but this is breaking on the md theme and the sheet doesn’t appear, the reason I asked was to see if there was a cleaner way to do this as an option through the api.

9

Can’t see it is breaking in MD theme by setting height: auto. The issue can be because of some content, if there is something with position: absolute then it won’t work as expected