Framework7 - Action Sheet To Popover Template


Advertisements

Description

Whenever you use Action Sheet conversation to popover, you can customize the popover template by passing modalActionsToPopoverTemplate parameter on App initialization. The parameter will accept Template7 formatted HTML string, which will be compiled by Template7 with the groups context passed.

The default template will look like as shown below −

<div class = "popover actions-popover">
   <div class = "popover-inner">
      {{#each this}}
         <div class = "list-block">
            <ul>
               {{#each this}}
                  {{#if label}}
                     <li class = "actions-popover-label 
                     {{#if color}}color-{{color}}{{/if}} 
                     {{#if bold}}actions-popover-bold{{/if}}">{{text}}</li>
                  {{else}}
                     <li><a href = "#" class = "item-link list-button 
                     {{#if color}}color-{{color}}{{/if}} {{#if bg}}bg-{{bg}}{{/if}} 
                     {{#if bold}}actions-popover-bold{{/if}} 
                     {{#if disabled}}disabled{{/if}}">{{ some text}}</a></li> 
                  {{/if}}
               {{/each}}
            </ul>
         </div>
      {{/each}}
   </div>
</div>
framework7_overlays.htm
Advertisements