手机端UI-长篇大论之-预览

hhh.

导航：

• 预览篇-   手机端UI-长篇大论之-预览
• 主页篇-   手机端UI-长篇大论之-主页
• 区域篇-
• 我的篇-
  

感谢：

• 感谢所有卡片制作者，感谢论坛及其他网站的UI制作者，感谢！
• UI实现，参考，借鉴均来自本论坛，感谢各位大佬的付出，感谢！
• 本帖使用所有卡片，均来自，本论坛和home论坛，还有其他网站。
  

前言：

• 本帖UI，因导航栏的实现，“只能在手机端使用”，电脑端会基于手机端UI实现。
• 为卡片显示效果，大多卡片使用页面跳转方式，少量使用弹出窗口。
• UI使用不同主题，会实现不同效果。（不限制主题）
• 期待大家，提出问题和建议，后续会继续完善。
  

更新日志：

20240425：新建主页篇。

前期必备：

---

主题,   均可在HACS中添加

• mushroom （必备）
• UI Lovelace Minimalist （可选）  minimalist-mobile 这个主题可以隐藏页眉
• iOS Theme （可选）
  

第三方卡片：

• browser_mod （弹出模组）
• button-card  （按钮卡片）（大多卡片都是基于这个卡片制作）
• card-mod   （卡片模组）
• Canary     (金丝雀)
• fold-entity-row  （折叠卡片）
• kiosk mode  （隐藏页眉）（可选）
• mini-graph-card  （迷你图形卡片）
• multiple-entity-row  （多实体行卡片）
• RGB light card  （RGB灯卡片）
• simple thermostat  （温控卡片）
• stack ln card （垂直堆叠卡片）（可选）
• tabbed card  （选项卡片）
• vertical stack ln card （垂直堆叠卡片）
• layout-card  (为页面提供更多的选项)
  

      
实现：

• 底部导航栏  （卡片方式） 期待论坛大佬有更好的方式
• 单页面实现更多内容显示  （尽可能一目了然）
• 尽可能使用 button-card 制作卡片  （很多卡片均由button-card制作）
• 减少第三方卡片的使用，尽可能使用自带卡片。（兼容性问题）
• 简约风格。
• 通过icon，icon_color， badge_icon ，badge_color，实现信息直观显示，比如有人在，图片背景显示颜色，窗户未关，显示徽标图标，已睡觉，改变为睡觉图标等。
• 利用mushroom的徽标图标以及徽标颜色，可以实现好多功能用于直观显示，包括设备离线提示。
  

BUG：

• browser_mod 手机端弹出卡片，只能全屏显示，无法窗口化。
• 个别情况重新进入APP后，无法正常加载卡片，导致无法正确显示卡片。（可能是button-card和mushroom卡片不兼容，目前使用stack ln card作基础卡片，避免问题出现）。
• vertical stack ln card 个别情况下不能正确堆叠卡片，会显示卡内卡片边框。（添加Canary卡片，问题已解决）
  

UI展示:

贰苍

厉害啊，期待后续内容

ghostist

browser_mod可以非全屏弹窗
去issues看一下 有说解决方式

隔壁的王叔叔

不得了啊，快出个教程啊。

ck3

为啥底部导航不两头拉到底

zxyny1989

ck3 发表于 2024-4-19 08:50
为啥底部导航不两头拉到底

应该不是拉不到底，是他没拉到底。

wsq0387

期待大佬出教程

hhh.

ghostist 发表于 2024-4-19 08:30
browser_mod可以非全屏弹窗
去issues看一下 有说解决方式

有使用browser_mod修改版的，但是不太完美，目前还是以单页面设计，区别不大，所以使用页面跳转。

benlky

能抄作业吗

nuknoop

厉害，不过提几点建议，字有点大，很多功能丧失美感以及臃肿混乱，如同大佬的Agdhome一样只有功能但丧失最好的速度解析