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?
Just put html inside of “text” toast prop
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.
Possible, with Template7 custom template http://idangero.us/template7/
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),
});
}
How would I make it so sheet modal is only the height of it’s content and not a fixed height?
You need to set/unset it’s heighy, check it’s element with inspector - easiest way to realize what need to be changed
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.
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