『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 756|回复: 3

[UI界面] homeassistant 导航栏卡片

[复制链接]

5

主题

27

帖子

568

积分

论坛分享达人

积分
568
金钱
541
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, 下载次数: 19

评分

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

查看全部评分

回复

使用道具 举报

6

主题

94

帖子

2226

积分

金牌会员

Rank: 6Rank: 6

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

使用道具 举报

6

主题

151

帖子

572

积分

高级会员

Rank: 4

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

使用道具 举报

0

主题

608

帖子

2514

积分

金牌会员

Rank: 6Rank: 6

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

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-21 19:56 , Processed in 1.849798 second(s), 29 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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