OH3 Standard height and shadow

Add-ons UIs
1

What is the height of standard widgets and how do i get the shadow of f7-card?

2

The overall height of the widget is determined by it’s contents, but it is the CSS variables that determine the overall design of the component.

Assuming that you are creating your own widget, the f7 documentation is your friend here:
[Cards | Framework7 Documentation] Cards | Framework7 Documentation. The classes and default CSS style options are the most useful sections for widget development.

Adding the no-shadow class does what you need I added a simple override to a default style in the snippet below. I’ve made some assumptions so hope this helps.

component: f7-card
config:
  class:
    - no-shadow
  style:
    --f7-card-bg-color: red
  title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
  footer: =props.prop1
  content: =items[props.item].displayState || items[props.item].state
3

What i want is the same shadow and min height as the default cards.

image
image1209×307 15.4 KB

4

Hi,

So I did an F12 / Inspect. Used Ctrl + Shift + C to select the default card. Filtered the applied styles for height, shadow and radius. Copied the styles from the default card and added to the styles of the custom widget.

Styles
Styles1919×576 70 KB

component: f7-card
config:
  title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
  footer: =props.prop1
  content: =items[props.item].displayState || items[props.item].state
  style:
    height: 120px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
3 Likes