You’re right - forgot to mention that you should exchange the f7-action components with their oh-pendant. oh-link, oh-button are available and this is everything you need, if your plan is still the one from your initial post.
You can change most of the pre-defined styles by using the f7-style variables that are listed in the f7-docs on a component level.
In your case it’s the safe-area that messes up the layout - which you can remove by adding --f7-safe-area-left / right: 0 as a style to the standard component. (this one sadly isn’t mentioned clearly in the documentation - but you could use the chrome dev-tools (F12) in those cases and inspecting the element, you want to change)
The standard oh-button does not come with a background or outline - but you could add both with a config parameter.
All available paramters shows up as a tooltip while you’re writing your code, if not you can trigger it with ‘CTRL + Space’
I’m still not a fan of nested cards - but if this is what you want, I attached a small example which might help you coming a step closer to what you would like to archieve:
uid: Thermostat
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 10, 2020, 7:31:08 PM
component: f7-card
config:
outline: false
noBorder: true
padding: false
noShadow: true
style:
--f7-safe-area-right: 0
--f7-safe-area-left: 0
slots:
content:
- component: oh-label-card
config:
noShadow: true
trendItem: ThermostatArbeitszimmerErdgeschoss_temperature
action: analyzer
actionAnalyzerItems:
- ThermostatArbeitszimmerErdgeschoss_Solltemperatur
- ThermostatArbeitszimmerErdgeschoss_temperature
item: ThermostatArbeitszimmerErdgeschoss_Solltemperatur
title: Arbeitszimmer
icon: oh:temperature
actionAnalyzerCoordSystem: time
vertical: false
- component: f7-row
config:
class:
- padding
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
text: my button 1
fill: true
- component: f7-col
slots:
default:
- component: oh-button
config:
text: my button 2
fill: true
- component: f7-col
slots:
default:
- component: oh-button
config:
text: my button 3
outline: true
- component: f7-col
slots:
default:
- component: oh-button
config:
text: my button 4
outline: true
