Monaca Onsen UI Discord Chat Github Repo

Platform-specific styling classes?

  • While I’ve looked through docs and resources, I haven’t quite managed to find an answer to this.
    Does ONSEN UI contain some informational platform-specific classes? Like class “ios” when on running on iOS? Or is this problem solved only by using platform=“ios” in HTML?

    I have found the automatic styling helpful but definitely in need of alteration.

  • Onsen UI

    @Saloniq-David Everything looks like iOS by default. Autostyling is adding a modifier="material" attribute to every component basically. At the same time, modifiers add custom classes like page--material or toolbar--material (elementName--modifierName). Therefore, you can easily select an element in CSS with for MD or .page:not(.page--material) for iOS. Alternatively, [modifier~=material] and :not([modifier~=material] would also work.

    ons.platform contains methods to change platform styling or detect the current platform.