[SOLVED] How to get same visuality as seen in docs for Action Sheet?


#1

I want to use action sheet for a menu and I used same code provided on docs for Action Sgeet but I a different plain viewm, and I can not see any css style used however I get a simple view, why this happens and how can I get same visuality ?

var ac1 = this.$f7.actions.create({
  buttons: [
    {
      text: 'Button1',
      bold: true
    },
    {
      text: 'Button2'
    },
    {
      text: 'Cancel',
      color: 'red'
    },
  ]
})

ac1.open();

This is what I see on docs page

this is what I get

vi


#2

Yout screenshot of the docs has theme ios, the screenshot of your app has material design. Set theme: ‘ios’ in your app options.


#3

Thanks, so how can I get ios preview in my local chrome as in the docs then ? Even if I select IPhone 6/7/8 I dont have ios visual


#4
var app = new Framework7({
 ...
'theme': 'ios',
...
});

You can set it to ‘auto’ as well to detect the device and automatically set material design or ios design.

For more information see App / Core in the docs.


#5

hmm, I see my theme is auto, means I can get same visuality only on ios.

So how can I change it later as in the docs ?


#6

If you want an ios element in a auto designed app you will have to create the css on your own. F7 is designed to have a native feeling on all of the elements for each operating system.


#7

Thanks, actually I wasked asked if I can change theme later on as in the docs example, the button at top.

I use a template, for icons it has a selection per device ios or andorid, so it does not act natively on icons then ?

            i.icon.f7-icons.ios-only volume_mute_fill
            i.icon.material-icons.md-only volume_mute

v1 doesnt suport this ? I use another application which is v1, and shows ios action sheet even if mobile mode not selected in chrome


#8

You have to set the icons on your own as they are not part of the F7 base. You can use the ios-only and md-only classes to show only the icons you need.


#9

Thanks for helpful information !