Building Pages in the OH3 UI: documentation draft (2/3)

Hi

Thanks for your example.
It explains how certain syntaxes should be used.

I Stil have problems with the syntaxes

I started from the keypad widget and try to adapt it to created a ir remote control keypad (habpanel widget)

uid: irLed_1c08a67036
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: Nov 12, 2020, 9:19:25 AM
    component: f7-block
    config:
    title: Sended IR code
    style:
    outline-border-color: rgba(50, 150, 110, 1)
    outline: 2px
    background-color: rgba (60,100,120,1)
    position: relative
    -ms-user-select: None
    -moz-user-select: None
    -webkit-user-select: None
    user-select: None
    –f7-button-text-color: var(–f7-text-color)
    –f7-button-bg-color: var(–f7-card-bg-color)
    –f7-theme-color-rgb: var(–f7-color-blue-rgb)
    class:
  • padding
    slots:
    default:
  • component: oh-label-card
    config:
    title: Sended IR code
    style:
    border-radius: 10px
    background-color: rgba(80, 150, 50, 1)
    outline-border-color: rgba(50, 150, 110, 1)
    outline: true
    class:
    - margin-bottom
    content: =items[props.item].displayState || items[props.item].state
  • component: f7-row
    config:
    style:
    background-color: rgba(80, 150, 50, 1)
    class:
    - margin
    slots:
    default:
    - component: f7-col
    slots:
    default:
    - component: oh-button
    config:
    text: “2”
    raised: true
    large: true
    action: variable
    actionVariable: pincode
    actionVariableValue: ‘=(vars.pincode) ? vars.pincode + “2” : “2”’
    - component: oh-icon
    config:
    icon: a1
    style:
    height: 25px
    - component: Label
    config:
    text: OH-icon

Apparently I haven’t quite mastered the syntax to get the layout right.

Have read all the examples, but apparently there are more possibilities to influence the display.

I have tried your example, but I am still not getting the display aligned properly (see my screenshot).