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

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'


This is what I see on docs page

this is what I get


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

1 Like

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

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.

1 Like

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 ?

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.

1 Like

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

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.

1 Like

Thanks for helpful information !