找回密码
 立即注册
搜索
查看: 1783|回复: 4

[UI界面] homeassistant 导航栏卡片

[复制链接]

5

主题

22

回帖

603

积分

论坛分享达人

积分
603
金钱
576
HASS币
0
发表于 2024-9-24 22:25:26 | 显示全部楼层 |阅读模式
本帖最后由 OoUuBo 于 2024-9-24 22:29 编辑

效果展示
微信图片_20240923130357.png 屏幕截图 2024-09-20 185024.png
支持homeassistant 2024.4以后的版本。其他版本自行测试

视频教程:

介绍
替换homeassistant默认导航界面。

配置说明
参考如下文件配置。注意添加的位置不是在view的配置文件,而是整个dashboard配置文件。
title: 我的家
o_header: #值不能是空的。如果都使用默认配置,值可以用true。  需要暂时调出原始导航可以在url最后添加 ?disableOheader 
  activeColor: var(--contrast20) #触发状态的按钮颜色,默认是雅蓝色:‘#4D93A3
  color: var(--contrast10) #未触发的按钮颜色,默认是浅灰色:‘#909090’
  nav_background_color: #导航条的背景,默认颜色是深灰色:'#292929'
  height: 80 #(可选项)导航条的高度 默认是80。注:填数字,不用带单位,单位是px。
views: #所有的view配置
  - title: 1F
    path: home-1_f
    type: panel
    o_type: popup #不需要显示导航图标的页面在view配置中,填入。需要显示的保持默认的即可,不用修改。
    cards:[]


安装教程
下载oheader_change.js文件,放入homeassistant config目录下的 www 文件夹中。做一下资源配置(详见官方教程)

下载地址(附件也可以):
https://gitee.com/oouubo/oheader_change.git





oheader-change.js

20.48 KB, 下载次数: 31

评分

参与人数 2金钱 +18 收起 理由
DDDear + 10 高手,这是高手!
hungheo + 8 高手,这是高手!

查看全部评分

回复

使用道具 举报

jhbl 手机认证

6

主题

88

回帖

2572

积分

金牌会员

积分
2572
金钱
2478
HASS币
0
发表于 2024-9-24 22:51:11 | 显示全部楼层
多谢分享……
回复

使用道具 举报

yjl 手机认证

8

主题

190

回帖

861

积分

高级会员

积分
861
金钱
663
HASS币
0
发表于 2024-9-30 10:23:41 | 显示全部楼层
留个记号,后面学到UI的时候再来学习
总为浮云能避日,长安不见使人愁
回复

使用道具 举报

Ari 手机认证

0

主题

672

回帖

2855

积分

金牌会员

积分
2855
金钱
2183
HASS币
0
发表于 2024-9-30 11:09:40 | 显示全部楼层
挺好看的。就是颜色素了点
回复

使用道具 举报

7

主题

28

回帖

185

积分

注册会员

积分
185
金钱
150
HASS币
0
发表于 2025-3-11 09:54:13 | 显示全部楼层
资源配置是见官方文档?官方文档在哪?
Snipaste_2025-03-11_09-51-36.png
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian ( 晋ICP备17001384号-1 )

GMT+8, 2025-6-22 18:19 , Processed in 0.464290 second(s), 27 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表