[f7-vue] Theme-based rendering inside designated container

Questions
1

Hi!
Me and my team would like to know if there’s any way to render a component stylized either for iOS/MD/Aurora, ignoring the app theme.
Let me explain.
Suppose i have the app set to use the MD theme globally.
I would like to to use some of the iOS-stylized components inside my app, for example the iOS dialog or the iOS toggle, which are aesthetically completely different from the MD versions.

It would be cool if i could render JUST those components in the iOS style.
Is it possible?

Thanks!
Have a wonderful day

2

For javascript components like dialog, from the docs I assume you can dynamically add CSS theme class, .md or .ios, this way:

app.dialog.create({
  ...
  cssClass: 'ios'
  ...
});

For html elements like buttons you can just add those classes in the element itself.

3

Hi, thanks for the reply.
I tried just by adding the class and it partially works… by partially i mean it renders the component differently, but they are broken. Here’s the code:

    <f7-block strong>
      no class <f7-toggle ></f7-toggle>
      <hr>
      no class, checked <f7-toggle checked ></f7-toggle>
      <hr>
      ios class <f7-toggle class='ios'></f7-toggle>
      <hr>
      ios class, checked <f7-toggle checked class='ios'></f7-toggle>
      <hr>
      aurora class <f7-toggle class='aurora'></f7-toggle>
      <hr>
      aurora class, checked <f7-toggle checked class='aurora'></f7-toggle>
    </f7-block>

And here’s the result:

image
image457×714 20.4 KB

4

For a quick comparison, here are the expected results (obviously the colors are not important, just the shapes are):
image

5

No, it is not really possible because it depends on the order of such styles declaration. So just add custom styles (in custom CSS) overwriting default ones like you need

6

Oh ok thanks for the info!