A simple widget that includes a configurable home button and up to 15 additional links that can be scrolled.
As far as scrollability, I reused parts of the code from @florian-h05’s weather widget - thank you very much for that!
Changelog
Version 0.1
- initial release
Resources
uid: home_and_nav
tags: []
props:
parameters:
- description: Link to home page
label: Home Page Link
name: homePageLink
required: true
type: TEXT
- description: Label for home button
label: Home Button Text
name: homePageTitle
required: true
type: TEXT
- label: Link 1 Name
name: link1Name
required: false
type: TEXT
- label: Link 1 Target Page
name: link1Page
required: false
type: TEXT
- label: Link 2 Name
name: link2Name
required: false
type: TEXT
- label: Link 2 Target Page
name: link2Page
required: false
type: TEXT
- label: Link 3 Name
name: link3Name
required: false
type: TEXT
- label: Link 3 Target Page
name: link3Page
required: false
type: TEXT
- label: Link 4 Name
name: link4Name
required: false
type: TEXT
- label: Link 4 Target Page
name: link4Page
required: false
type: TEXT
- label: Link 5 Name
name: link5Name
required: false
type: TEXT
- label: Link 5 Target Page
name: link5Page
required: false
type: TEXT
- label: Link 6 Name
name: link6Name
required: false
type: TEXT
- label: Link 6 Target Page
name: link6Page
required: false
type: TEXT
- label: Link 7 Name
name: link7Name
required: false
type: TEXT
- label: Link 7 Target Page
name: link7Page
required: false
type: TEXT
- label: Link 8 Name
name: link8Name
required: false
type: TEXT
- label: Link 8 Target Page
name: link8Page
required: false
type: TEXT
- label: Link 9 Name
name: link9Name
required: false
type: TEXT
- label: Link 9 Target Page
name: link9Page
required: false
type: TEXT
- label: Link 10 Name
name: link10Name
required: false
type: TEXT
- label: Link 10 Target Page
name: link10Page
required: false
type: TEXT
- label: Link 11 Name
name: link11Name
required: false
type: TEXT
- label: Link 11 Target Page
name: link11Page
required: false
type: TEXT
- label: Link 12 Name
name: link12Name
required: false
type: TEXT
- label: Link 12 Target Page
name: link12Page
required: false
type: TEXT
- label: Link 13 Name
name: link13Name
required: false
type: TEXT
- label: Link 13 Target Page
name: link13Page
required: false
type: TEXT
- label: Link 14 Name
name: link14Name
required: false
type: TEXT
- label: Link 14 Target Page
name: link14Page
required: false
type: TEXT
- label: Link 15 Name
name: link15Name
required: false
type: TEXT
- label: Link 15 Target Page
name: link15Page
required: false
type: TEXT
timestamp: Feb 16, 2025, 10:46:20 PM
component: f7-card
config:
noBorder: true
noShadow: true
style:
border-radius: var(--f7-card-expandable-border-radius)
margin: 5px
padding: 10px
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.homePageLink
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: block
padding: 10px
text-align: center
text-decoration: none
slots:
default:
- component: oh-icon
config:
height: 26
icon: "=(themeOptions.dark == 'dark') ? 'f7:house_fill' : 'f7:house_fill'"
style:
margin-top: 5px
width: 26
- component: Label
config:
style:
margin-left: 10px
text: =props.homePageTitle
- component: f7-block
config:
style:
align-items: center
display: flex
height: 40px
justify-content: center
margin: 0 auto
overflow: hidden
padding-top: 10px
position: relative
width: calc(100% - 5px)
visible: =!!(props.link1Name || props.link2Name || props.link3Name ||
props.link4Name || props.link5Name || props.link6Name ||
props.link7Name || props.link8Name || props.link9Name ||
props.link10Name || props.link11Name || props.link12Name ||
props.link13Name || props.link14Name || props.link15Name)
slots:
default:
- component: f7-swiper
config:
params:
direction: horizontal
freeMode: true
mousewheel: true
scrollbar:
draggable: true
el: .swiper-scrollbar
slidesPerView: auto
style:
--swiper-navigation-color: var(--f7-text-color)
--swiper-navigation-size: 20px
.swiper-wrapper:
margin: 0 10px
padding: 0
align-items: center
display: flex
height: 100%
justify-content: center
position: relative
slots:
default:
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link1Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link1Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link1Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link2Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link2Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link2Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link3Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link3Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link3Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link4Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link4Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link4Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link5Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link5Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link5Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link6Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link6Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link6Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link7Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link7Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link7Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link8Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link8Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link8Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link9Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link9Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link9Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link10Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link10Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link10Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link11Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link11Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link11Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link12Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link12Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link12Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link13Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link13Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link13Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link14Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link14Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link14Name
- component: f7-swiper-slide
config:
style:
padding: 0 2px
width: auto
visible: =!!props.link15Name
slots:
default:
- component: oh-link
config:
action: navigate
actionPage: =props.link15Page
style:
background: var(--f7-theme-color)
border-radius: 8px
color: "=(themeOptions.dark == 'dark') ? 'white' : 'black'"
display: inline-block
font-size: 15px
margin: 0 2px
padding: 4px 10px
text-align: center
white-space: nowrap
slots:
default:
- component: Label
config:
text: =props.link15Name