Custom widget, media query css support

[magcode]

Hello, I’m experimenting with a custom widget for OH3.
Its a bit more sophisticated and I need some device specific styles (mobile and tablet basically)
(I’m not a CSS developer by any means)

Let say I have this

                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                    large: 20
                    width: 50
                    style:
                      height: 200px
                      justify-content: center
                      border-right: 1px solid gray

Is there any chance to tell “no border right if screen width <= ‘Small’”?

[RGroll (Rainer)]

You could try to experiment with the device specific properties (see docs).
It’s not dependant only on the screen size afaik (I think it uses the useragent in combination with some other techniques) like it would be possible with media queries, but it should work.

YAML from the example

component: f7-card
config:
  title: Device info
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: Label
            config:
              text: "=device.desktop ? 'Visible on Desktop' : device.ios ? 'Visible on iOS' : device.android ? 'Visible on Android' : 'Anything else'"
              class:
                - margin-bottom
              style:
                font-weight: 800
                color: "=device.desktop ? 'green' : device.ios ? 'gray' : device.android || device.androidChrome ? 'red' : 'Anything else'"
          - component: Label
            config:
              text: "='Pixel ratio: ' + device.pixelRatio "
              class:
          - component: Label
            config:
              text: "='OS: ' + device.os + ' (version: ' + device.osVersion + ')'"
              class:
                - margin-bottom
                
          - component: oh-button
            config:
              text: Some generic button
              color: white
              style:
                fill: true
                background: "=device.desktop ? 'green' : device.ios ? 'gray' : device.android || device.androidChrome ? 'red' : 'Anything else'"

[magcode]

Thanks Rainer for this awesome hint!

Not perfect but absolutely sufficient for my purpose.

Desktop:

Phone:

[magcode]

I had another look, this app.width looks good App / Core | Framework7 Documentation but doesn’t work for some reason