I am trying to create a widget with three buttons but look like it belongs in a list item. ive gone a certain way but now need to be able to conttrol the alignment and margins of the text so it is aligned left with a margin (“Speed” below) - can anyone help?
uid: threebutttons
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: Feb 4, 2021, 5:29:55 AM
component: f7-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-icon
config:
class:
- margin
- flex-direction-column
icon: light
height: 32
- component: f7-col
slots:
default:
- component: Label
config:
class:
- margin
- flex-direction-column
text: Speed
style:
font-size: 20px
font-weight: bold
- component: f7-col
slots:
default:
- component: oh-button
config:
action: options
actionItem:
class:
- margin
- flex-direction-column
icon-f7: goforward_30
iconColor: yellow
size: 20
text:
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
font-size: 12px
height: auto
- component: f7-col
slots:
default:
- component: oh-button
config:
action: options
actionItem:
class:
- margin
- flex-direction-column
icon-f7: goforward_60
iconColor: green
size: 20
text:
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 12px
height: auto
- component: f7-col
slots:
default:
- component: oh-button
config:
action: options
actionItem:
class:
- margin
- flex-direction-column
icon-f7: goforward_90
iconColor: red
size: 20
text:
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 12px
height: auto