uid: Card_Template_Switch_Simple
tags:
  - Card Template Switch Simple
  - Customizable Template
  - ScrewPlate
  - Version 1.1
props:
  parameters:
    - description: "Input without 'px' (Default: none)"
      label: Card Height
      name: cardHeight
      required: false
      type: TEXT
      groupName: cardGroup
    - description: "Input without 'px' (Default: 20px)"
      label: Card Border Radius
      name: cardBorderRadius
      required: false
      type: TEXT
      groupName: cardGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Card Border Color
      name: cardBorderColor
      required: false
      type: TEXT
      groupName: cardGroup
    - description: "Input without 'px' (Default: 3px)"
      label: Card Border Size
      name: cardBorderSize
      required: false
      type: TEXT
      groupName: cardGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Card Background Color
      name: cardBgColor
      required: false
      type: TEXT
      groupName: cardGroup
    - default: "false"
      label: Card Background Image - Show on Card
      name: cardBgImageShow
      required: false
      type: BOOLEAN
      groupName: cardGroup
    - description: Input file name for Background Image (uploaded to /html/ folder)
      label: Card Background Image
      name: cardBgImage
      required: false
      type: TEXT
      groupName: cardGroup
    - default: "false"
      label: Icon - Show on Card
      name: iconShow
      required: false
      type: BOOLEAN
      groupName: iconGroup
    - description: Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon),
        material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: iconName
      required: false
      type: TEXT
      groupName: iconGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Icon Color
      name: iconColor
      required: false
      type: TEXT
      groupName: iconGroup
    - description: "Input without 'px' (Default: 30px)"
      label: Icon  Size
      name: iconSize
      required: false
      type: TEXT
      groupName: iconGroup
    - default: "false"
      label: Header - Show on Card
      name: headerShow
      required: false
      type: BOOLEAN
      groupName: headerGroup
    - description: Input Text to diplay on Header
      label: Header
      name: headerText
      required: false
      type: TEXT
      groupName: headerGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Header Text Color
      name: headerTextColor
      required: false
      type: TEXT
      groupName: headerGroup
    - description: "Input without 'px' (Default: 25px)"
      label: Header Text Size
      name: headerTextSize
      required: false
      type: TEXT
      groupName: headerGroup
    - default: "false"
      label: Footer - Show on Card
      name: footerShow
      required: false
      type: BOOLEAN
      groupName: footerGroup
    - description: Input Text to diplay on Footer
      label: Footer
      name: footerText
      required: false
      type: TEXT
      groupName: footerGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Footer Text Color
      name: footerTextColor
      required: false
      type: TEXT
      groupName: footerGroup
    - description: "Input without 'px' (Default: 16px)"
      label: Footer Text Size
      name: footerTextSize
      required: false
      type: TEXT
      groupName: footerGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Content Text Color
      name: contentTextColor
      required: false
      type: TEXT
      groupName: contentGroup
    - description: "Input without 'px' (Default: 18px)"
      label: Content Text Size
      name: contentTextSize
      required: false
      type: TEXT
      groupName: contentGroup
    - description: "Input without 'px' (Default: 30px)"
      label: Content Icon Size
      name: contentIconSize
      required: false
      type: TEXT
      groupName: contentGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Content Icon Color
      name: contentIconColor
      required: false
      type: TEXT
      groupName: contentGroup
    - context: item
      description: Switch item
      label: Switch
      name: switchItem
      required: true
      type: TEXT
      groupName: customGroup
    - default: "true"
      label: Switch Toggle - Show on Card
      name: switchToggleShow
      required: false
      type: BOOLEAN
      groupName: customGroup
    - default: "true"
      label: Switch Icon - Show on Card
      name: switchIconShow
      required: false
      type: BOOLEAN
      groupName: customGroup
    - description: Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon),
        material:iconName (Material icon) or iconify:iconSet:iconName
      label: Switch Icon
      name: switchIconName
      required: false
      type: TEXT
      groupName: customGroup
    - description: "Input without 'px' (Default: 80px)"
      label: Switch Icon Size
      name: switchIconSize
      required: false
      type: TEXT
      groupName: customGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Switch Handle Color
      name: switchHandleColor
      required: false
      type: TEXT
      groupName: customGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Switch Active Color
      name: switchActiveColor
      required: false
      type: TEXT
      groupName: customGroup
    - description: Input like '#FFFFFF' or 'red', 'yellow' etc.
      label: Switch Inactive Color
      name: switchInactiveColor
      required: false
      type: TEXT
      groupName: customGroup
    - default: "false"
      label: Title - Show on Card
      name: switchItemTitleShow
      required: false
      type: BOOLEAN
      groupName: customGroup
    - description: Input Text to diplay as Title
      label: Switch Item Title
      name: switchItemTitle
      required: false
      type: TEXT
      groupName: customGroup
    - default: "false"
      label: SubTitle - Show on Card
      name: switchItemSubTitleShow
      required: false
      type: BOOLEAN
      groupName: customGroup
    - description: Input Text to diplay as Sub Title
      label: Switch Item Sub Title
      name: switchItemSubTitle
      required: false
      type: TEXT
      groupName: customGroup
  parameterGroups:
    - name: cardGroup
      label: Card Settings
      description: All settings to customize the card layout
    - name: iconGroup
      label: Icon Settings
      description: All settings to customize the icon
    - name: headerGroup
      label: Header Settings
      description: All settings to customize the header area
    - name: footerGroup
      label: Footer Settings
      description: All settings to customize the content area
    - name: contentGroup
      label: Content Settings
      description: All settings to customize the content area
    - name: customGroup
      label: Custom Settings
      description: All settings to customize the custom objects
timestamp: May 3, 2025, 2:52:35 PM
component: f7-card
config:
  style:
    --f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
      === 'dark' ? '#232324' : 'white')"
    --f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '20px'"
    --f7-card-margin-horizontal: 4px
    --f7-card-margin-vertical: 4px
    --f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
      : (themeOptions.dark === 'dark' ? '#c95826' : '#c95826')"
    background-color: var(--f7-card-bg-color)
    background-image: "=props.cardBgImageShow== 'false' ? '' :
      'linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)),
      url(/static/' + props.cardBgImage + ')'"
    border: "=props.cardBorderSize ? (props.cardBorderSize)+'px solid
      var(--f7-card-outline-border-color)' : '6px solid
      var(--f7-card-outline-border-color)'"
    color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
      === 'dark' ? 'white' : 'black')"
    font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '18px'"
slots:
  default:
    - component: f7-card-header
      config:
        style:
          --f7-card-header-border-color: transparent
          --f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '25px'"
          --f7-card-header-font-weight: 800
          --f7-card-header-min-height: "=props.headerShow == 'true' ? '35px' : '0px'"
          --f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
            (themeOptions.dark === 'dark' ? 'white' : 'black')"
          justify-content: flex-start
          margin-left: "=(Number.parseInt(props.cardBorderRadius) > 90) ? '30px' :
            (Number.parseInt(props.cardBorderRadius) > 50) ? '10px' : '0px'"
      slots:
        default:
          - component: oh-icon
            config:
              icon: "=props.iconName ? props.iconName : 'f7:house'"
              style:
                color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
                  'white' : 'black')"
                padding-right: 10px
              visible: "=props.iconShow ? props.iconShow : props.iconShow"
              width: "=props.iconSize ? (props.iconSize) + 'px' : '30px'"
          - component: Label
            config:
              text: "=props.headerText ? props.headerText : 'Header'"
              visible: "=props.headerShow ? props.headerShow : props.headerShow"
    - component: f7-card-content
      config:
        style:
          align-items: center
          display: flex
          height: "=props.cardHeight ? (props.cardHeight) + 'px' : ''"
          justify-content: center
          margin-left: "=(Number.parseInt(props.cardBorderRadius) > 90) ? '30px' :
            (Number.parseInt(props.cardBorderRadius) > 50) ? '10px' : '0px'"
          margin-top: -10px
      slots:
        default:
          - component: f7-block
            config:
              style:
                margin-top: -10px
                text-align: center
                width: 100%
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - align-items-center
                      - justify-content-center
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class:
                            - display-flex
                            - flex-direction-row
                            - align-items-center
                            - justify-content-center
                        slots:
                          default:
                            - component: oh-toggle-card
                              config:
                                item: =props.switchItem
                                visible: "=props.switchToggleShow ? props.switchToggleShow :
                                  props.switchToggleShow"
                                noBorder: true
                                noShadow: true
                                outline: false
                                style:
                                  --f7-toggle-handle-color: "=props.switchHandleColor ? props.switchHandleColor :
                                    '#b1602e'"
                                  --f7-toggle-inactive-color: "=props.switchInactiveColor ?
                                    props.switchInactiveColor : '#edede9'"
                                  --f7-toggle-active-color: "=props.switchActiveColor ? props.switchActiveColor :
                                    '#e5cb63'"
                                  --f7-toggle-width: "=props.switchIconSize ? (props.switchIconSize / 2) + 'px' :
                                    '40px'"
                                  --f7-toggle-height: "=props.switchIconSize ? (props.switchIconSize / 4) + 'px' :
                                    '20px'"
                            - component: oh-link
                              config:
                                action: toggle
                                actionItem: =props.switchItem
                                actionCommand: toggle
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      height: "=props.switchIconSize ? (props.switchIconSize) + 'px' : '80px'"
                                      icon: "=props.switchIconName ? (props.switchIconName) :
                                        'iconify:ic:twotone-emoji-objects'"
                                      style:
                                        color: "=items[props.switchItem].state == 'ON' ? (props.switchActiveColor ?
                                          props.switchActiveColor : '#e5cb63') :
                                          (props.switchInactiveColor ?
                                          props.switchInactiveColor :
                                          '#edede9')"
                                      visible: "=props.switchIconShow ? props.switchIconShow : props.switchIconShow"
                - component: f7-row
                  config:
                    class:
                      - text-align-center
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            background: rgba(233, 196, 106, 0)
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "=props.switchItemTitle ? props.switchItemTitle : 'Title'"
                                visible: "=props.switchItemTitleShow ? props.switchItemTitleShow :
                                  props.switchItemTitleShow"
                - component: f7-row
                  config:
                    class:
                      - text-align-center
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            background: rgba(233, 196, 106, 0)
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "=props.switchItemSubTitle ? props.switchItemSubTitle : 'SubTitle'"
                                visible: "=props.switchItemSubTitleShow ? props.switchItemSubTitleShow :
                                  props.switchItemSubTitleShow"
    - component: f7-card-footer
      config:
        style:
          --f7-card-footer-border-color: transparent
          --f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '16px'"
          --f7-card-footer-font-weight: 500
          --f7-card-footer-min-height: "=props.footerShow == 'true' ? '20px' : '0px'"
          --f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
            (themeOptions.dark === 'dark' ? 'white' : 'black')"
          margin-left: "=(Number.parseInt(props.cardBorderRadius) > 90) ? '30px' :
            (Number.parseInt(props.cardBorderRadius) > 50) ? '10px' : '0px'"
      slots:
        default:
          - component: Label
            config:
              text: "=props.footerText ? props.footerText : 'Footer'"
              visible: "=props.footerShow ? props.footerShow : props.footerShow"